最近書いているCSSがそもそも今サービスが推奨しているブラウザでサポートされているのかチェックするのだるいと思っていたら、doiuseという便利なツールを見つけた。
doiuseとは
https://www.npmjs.com/package/doiuse
CSSのブラウザサポートのチェックをしてくれるモジュール。caniuse のデータベースを利用して、ブラウザと自分が書いているCSSを指定して、サポートされていないCSSの書き方を見つけてくれる。
試す環境を用意する
とりあえず試すための環境を用意する。適当なディレクトリを作って、必要なライブラリをインストールする。また、検証するためにbootstrapも入れておく。
$ mkdir try-doiuse $ cd try-doiuse $ npm install --save-dev doiuse $ npm install --save-dev bootstrap
もしくは自分が試した環境もあるので、https://github.com/shibayu36/javascript-playground をcloneして
$ cd try-doiuse
$ npm install
でも試す環境はセットアップできる。
doiuseで書いたCSSをチェックしてみる
bootstrapの提供しているCSSについてブラウザサポートをチェックしてみる。基本的には
doiuse --browsers '...' [FILE]
というCLIでチェックできる。browsersの部分にはbrowserslist に書いてあるような記法を用いることができる。
メインブラウザの直近2バージョンのサポート状況をチェックする
まず、bootstrap.cssのメインブラウザの直近の2バージョンのサポート状況をチェックしてみる。
$(npm bin)/doiuse --browsers 'last 2 version' node_modules/bootstrap/dist/css/bootstrap.css
すると以下のようにずらりとサポートされていないものや、一部サポートのもののリストが表示される。
node_modules/bootstrap/dist/css/bootstrap.css:9:1: CSS text-size-adjust not supported by: IE (10,11), Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38) (text-size-adjust) node_modules/bootstrap/dist/css/bootstrap.css:10:1: CSS text-size-adjust not supported by: IE (10,11), Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38) (text-size-adjust) node_modules/bootstrap/dist/css/bootstrap.css:131:1: CSS Appearance not supported by: IE (10,11), IE Mobile (10) and only partially supported by: Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38), iOS Safari (9.0-9.2,9.3), IE Mobile (11) (css-appearance) ...
これだと流石に見にくいので、どういうエラーがあるのか知るために、適当に整形してみる。あんまりパースしやすい形式ではないけど、cutやsortやuniqを使って強引に整形してみる。最初の数字がそのエラーが出た回数で、それ以降がエラーの内容になっている。
$ $(npm bin)/doiuse --browsers 'last 2 version' node_modules/bootstrap/dist/css/bootstrap.css | cut -d':' -f 4- | sort | uniq -c | sort -rn 12 CSS Filter Effects not supported by: IE (10,11), Edge (12), IE Mobile (10,11) and only partially supported by: Edge (13) (css-filters) 10 CSS3 Cursors (original values) not supported by: iOS Safari (9.0-9.2,9.3), IE Mobile (10,11) and only partially supported by: Edge (12,13) (css3-cursors) 5 CSS Appearance not supported by: IE (10,11), IE Mobile (10) and only partially supported by: Edge (12,13), Firefox (46,47), Chrome (50,51), Safari (9,9.1), Opera (37,38), iOS Safari (9.0-9.2,9.3), IE Mobile (11) (css-appearance) 4 CSS3 3D Transforms only partially supported by: IE (10,11), IE Mobile (10,11) (transforms3d) ...
これを見ると、基本的には直近のブラウザには対応しているけど、一部分だけブラウザサポートしていないCSSが混ざっていることが分かった。CSS Filter EffectsというのはIE 10や11ではサポートしていないみたい。caniuse を見てもそうだった。
しかし、このCSSの中にはモバイルブラウザ用のものも混ざっていたりしてそれが誤検出されている場合もあるし、もしかしたらJSを使うと出来るのかもしれないので、Bootstrapのsupport で見て取れるように、基本的には対応していることが分かる。
IE8も含めてサポート状況をチェックする
さらにBootstrapはIE8には対応していないと書かれているので、IE8以上も含めて調べてみる。
$(npm bin)/doiuse --browsers 'last 2 version, IE >= 8' node_modules/bootstrap/dist/css/bootstrap.css | cut -d':' -f 4- | sort | uniq -c | sort -rn 281 CSS Generated content for pseudo-elements only partially supported by: IE (8) (css-gencontent) 129 CSS3 Border-radius (rounded corners) not supported by: IE (8) (border-radius) 78 CSS3 Colors not supported by: IE (8) (css3-colors) 68 CSS3 Media Queries not supported by: IE (8) (css-mediaqueries) 58 CSS3 Box-shadow not supported by: IE (8) (css-boxshadow) 45 CSS3 selectors only partially supported by: IE (8) (css-sel3) ...
BootStrapはIE8以下のブラウザサポートは切っているということなので、IE8以上でサポート情報を調べると、IE8では使えないものをどんどん使っていることが検出できた。
まとめ
このようにdoiuseを使えば自分が書いたCSSのブラウザサポート状況を確認することが出来る。またdoiuseのAPIを見ていると、CLIだけではなくてJS用のAPIとかもあるので、自動でCI回すこととかも出来そう。機会があったらそのようにしてみても良いかもしれない。
CSSについて、デザイナが気合で頑張るというのは辛い話なので、こういう自動化ツールをどんどん利用していきたい。
