各ブラウザ対応で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）でも細かいズレは発生するので、両方対応するのが無難だと思います。
