Edited at

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


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

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

現在の対応の主流は


  • IE11以上

  • edge

  • chrome最新

  • firefox最新

  • safari最新

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

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

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

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

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


is.jsの導入

スクリーンショット 2018-10-17 12.14.34.png

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トランスパイルする環境なのですが、

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

スクリーンショット 2018-10-17 12.25.11.png

えええー なんでだー

読み込めてないぞ。。

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

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タグをみると。。

スクリーンショット 2018-10-17 12.39.21.png

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

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

準備完了!

使い方ですが、

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

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

.edge .hoge {

padding: 30px;
}


まとめ

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

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

それでは。