Autoprefixerのサポートブラウザを把握してより適切なCSSを書こう
Tag:Web
2020年1月10日 追記
現在browserl.istというサイトで簡単に調べられます
入力例：last 3 versions,ie >= 9,iOS >= 7,Android >= 4.1
入力例：last 3 major versions, not dead, ios >= 14, safari >= 14
Autoprefixerとは
Autoprefixerはcssにベンダープレフィックスを付与してくれるnode.jsのモジュールです。
面倒なベンダープレフィックスを書く手間が省けて大変便利ですが、サポートするブラウザルールを深く考えず、デフォルトの”last 2 versions”などで設定していませんか。
少し気を使ってIE9とIE8を追加して使う。そんな人も多いと思いますが、それだけでは意図しているブラウザをサポートしていないかもしれません。
この記事では指定したルールが、どのブラウザまでをサポートするのか確認する方法を紹介します。
方法
Autoprefixerで指定ルールからブラウザを絞り込むにはbrowserslistというモジュールが使用されています。
よってbrowserslistを実行すれば、対象となるブラウザ名を表示させる事ができます。
手順
前提としてnode.jsとAutoprefixerはインストールされているものとします。
そして環境はWindows7です。
browserslistを複製
まずbrowserslistモジュール内のindex.jsを同一フォルダ内に適当な名前で複製します。
ここではshow.jsとします。
場所は
C:\Program Files\nodejs\node_modules\autoprefixer\node_modules\autoprefixer-core\node_modules\browserslist\index.js
にあります。
プログラムの書き換え
show.jsを開いて、最下部（module.exports = browserslist;）の下に下記コードを追加し保存します。
|
1 |
console.log(browserslist("last 2 versions")); |
実行
コマンドプロンプトを開き
node.jsでshow.jsを実行します。
> node C:\Program Files\nodejs\node_modules\autoprefixer\node_modules\autoprefixer-core\node_modules\browserslist\show.js
2015年3月3日現在では下記のように出力されました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[ 'chrome 40', 'chrome 39', 'firefox 35', 'firefox 34', 'ie 11', 'ie 10', 'ie_mob 11', 'ie_mob 10', 'ios_saf 8.1', 'ios_saf 8', 'opera 27', 'opera 26', 'safari 8', 'safari 7.1' ] |
これが”last 2 versions”を指定した時にサポートされるブラウザのリストですが、僕が気になったのがiPhoneのSafaliの対応です。
ios7がサポートされていません。
この辺りのブラウザは使っている人がまだ多いのではないかと思いますし、僕も当然サポートされているのだと思っていました。
修正
show.jsの”last 2 versions”を”last 5 versions”に編集し、再度コマンドプロンプトから実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
[ 'chrome 40', 'chrome 39', 'chrome 38', 'chrome 37', 'chrome 36', 'firefox 35', 'firefox 34', 'firefox 33', 'firefox 32', 'firefox 31', 'ie 11', 'ie 10', 'ie 9', 'ie 8', 'ie 7', 'ie_mob 11', 'ie_mob 10', 'ios_saf 8.1', 'ios_saf 8', 'ios_saf 7.0-7.1', 'ios_saf 6.0-6.1', 'ios_saf 5.0-5.1', 'opera 27', 'opera 26', 'opera 25', 'opera 24', 'opera 23', 'safari 8', 'safari 7.1', 'safari 7', 'safari 6.1', 'safari 6' ] |
サポートブラウザが増え、古いIEやiPhone版Safaliもサポートされるようになりました。人によってはこれで十分という人もいるでしょう。
どの設定が正解というものは無いと思いますので、どのブラウザがサポートされているのか確認して、把握した上で利用する事が大切だと思います。
より細かいブラウザの指定方法はbrowserslistのページで確認できます。
browserslist | GitHub
僕の設定
ちなみに僕は先ほどの設定だとAndroidブラウザが対応していないのが気になったのとChromeやFirefoxはもっと短いサポートで良いので次のような指定にしています。
“last 3 versions,ie >= 8,iOS >= 6,Android >= 3”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
[ 'android 37', 'android 4.4', 'android 4.4.3-4.4.4', 'android 4.2-4.3', 'android 4.1', 'android 4', 'android 3', 'chrome 40', 'chrome 39', 'chrome 38', 'firefox 35', 'firefox 34', 'firefox 33', 'ie 11', 'ie 10', 'ie 9', 'ie 8', 'ie_mob 11', 'ie_mob 10', 'ios_saf 8.1', 'ios_saf 8', 'ios_saf 7.0-7.1', 'ios_saf 6.0-6.1', 'opera 27', 'opera 26', 'opera 25', 'safari 8', 'safari 7.1', 'safari 7' ] |
全てのブラウザに対応させる
“> 0%”
と指定すると使用率が0%以上のブラウザとなり、全てのブラウザに対応するプレフィックスを付与してくれます。
注意点
カンマの周辺や文頭にスペースを入れるとautoprefixerで使うときにはエラーになります。
ルールの指定に必要な区切り以外の所でスペースは使わないようにしましょう。
|
1 2 3 |
//エラーの起きるパターン console.log(browserslist('last 3 versions, ie >= 8, iOS >= 6, Android >= 3')); console.log(browserslist(' > 5%')); |
