CSSハックなんて使いたくない！ブラウザ・OS別にスタイルを書ける『is.js』が便利だった

CSSハックなんて使いたくない！ブラウザ・OS別にスタイルを書ける『is.js』が便利だった:

2018年でもブラウザ対応は苦慮する

受託開発だといろいろなブラウザに対応しなければならず、いつも苦労します。

現在の対応の主流は

• IE11以上
• edge
• chrome最新
• firefox最新
• safari最新

このあたりだと思うのですが、

IE11とかクセが強いんですよね。。

游ゴシックのline-heightがずれたり、imgにsvg画像入れたら表示崩れたり。

ブラウザ毎にスタイル当てる解決法って色々あると思うのですが、

CSSハックはなんか嫌だ！ということでこんなライブラリみつけました。

is.jsの導入

https://is.js.org/

上記URLからアクセスできます。

データの型をチェックしたりする目的のライブラリらしいですね。

JavaScriptライブラリis.jsを使用しないほうが良い5つの理由という記事を見つけてしまったのですが、今回はOSやブラウザの判定の為に使用するのでOKということにします。

webpack環境でハマる

特にnpmとか使ってない人は、githubページからjsファイル落としてscriptタグで読み込んで終わり。

<script src="/path/is.min.js"></script> 

npm使ってる人は

npm install is_js 

これでOKなのですが。。（『is.js』ではなく『is_js』であることに注意！違うものがインストールされます！）

僕はwebpackでjsトランスパイルする環境なのですが、

さあやってみようとなったらコンソールエラーが！！



えええー　なんでだー

読み込めてないぞ。。

そしたらこのページ見つけて解決。

using is_is since issue with webpack is fixed

import is from 'is_js'; 

これでうまくいきました！

bodyタグにブラウザ名を付与！

こんなコード書いてみました。

bodyタグに、閲覧環境のOS・ブラウザ名を加筆します。

$(function() { 
    $('body').addClass(function() { 
        var bodyClasses = ''; 
 
        if (is.ios()) { 
            bodyClasses += ' ios'; 
 
            if (is.iphone()) { 
                bodyClasses += ' iphone'; 
            } else if (is.ipad()) { 
                bodyClasses += ' ipad'; 
            } 
        } else if (is.android()) { 
            bodyClasses += ' android'; 
 
            if (is.androidPhone()) { 
                bodyClasses += ' androidphone'; 
            } else if (is.androidTablet()) { 
                bodyClasses += ' androidtablet'; 
            } 
        } else if (is.windows()) { 
            bodyClasses += ' windows'; 
        } else if (is.mac()) { 
            bodyClasses += ' mac'; 
        } 
 
        if (is.ie()) { 
            bodyClasses += ' ie'; 
        } else if (is.edge()) { 
            bodyClasses += ' edge'; 
        } else if (is.chrome()) { 
            bodyClasses += ' chrome'; 
        } else if (is.firefox()) { 
            bodyClasses += ' firefox'; 
        } else if (is.safari()) { 
            bodyClasses += ' safari'; 
        } 
 
        return bodyClasses; 
    }); 
}); 

よーし！これでbodyタグをみると。。



ついてる！筆者環境はmacでchromeなので、このようなクラス名が付いてます！

IEなら、『windows ie』となっているはず！

準備完了！

使い方ですが、

例えば、edgeだけにスタイルをあてたい場合、

以下のようにしてスタイルをあてればよい。

.edge .hoge { 
    padding: 30px; 
} 

まとめ

CSSハックの場合、cssが荒れて嫌だったので、このような形にしました。

みなさまはどのようにしているのかも興味があるので、ご教示いただけますと幸いです！

それでは。