WEBBLOG

CSSハックを使用せずにJSクラスで一括管理

CSSハックを使用せずにJSクラスで一括管理!

各ブラウザ対応でCSSハックを使用することが多かったのですが、CSSハックの記述が長いので、JSの各OSやブラウザ判定を使用してCSS記述負担を減らしたいと思います。

各OSとブラウザ判定に応じてCSSクラスを付与します。(ieなら → js_ie)

document.addEventListener('DOMContentLoaded', function() {
  "use strict";

  //共通変数
  let uAg = window.navigator.userAgent.toLowerCase();
  let jsBody = document.querySelector('body');

	
	/*	OSとブラウザ判定して「適用CSS付与」
	---------------------------------------------------------	*/
		// bodyに「js_ブラウザ名」クラス付与
		if( uAg.indexOf('msie') != -1 || uAg.indexOf('trident') != -1) {

			jsBody.classList.add('js-ie');
		
		} else if(uAg.indexOf('edge') != -1) {

			jsBody.classList.add('js-edge');
		
		} else if(uAg.indexOf('chrome') != -1) {

			jsBody.classList.add('js-chrome');
		
		} else if(uAg.indexOf('safari') != -1) {

			jsBody.classList.add('js-safari');

		} else if(uAg.indexOf('firefox') != -1) {

			jsBody.classList.add('js-firefox');

		} else if(uAg.indexOf('opera') != -1) {

			jsBody.classList.add('js-opera');

		}

		// bodyに「js_OS名」クラス付与
		if(uAg.indexOf("windows nt") !== -1) {

			jsBody.classList.add('js-windows');

		} else if(uAg.indexOf("android") !== -1) {

			jsBody.classList.add('js-android');

		} else if(uAg.indexOf("iphone") !== -1 || uAg.indexOf("ipad") !== -1) {

			jsBody.classList.add('js-ios');

		} else if(uAg.indexOf("mac os x") !== -1) {

			jsBody.classList.add('js-mac');

		}

});

各ブラウザはもちろんですが、OS関係(windowsとMac)でも細かいズレは発生するので、両方対応するのが無難だと思います。