Autoprefixerの仕組み

昨日はAutoprefixerがどういうツールかということと、その使い方について書きました。今日は、その仕組と実装について書きます。

ベンダープリフィックスを付与する仕組み

Can I Useという、CSSやJavaScriptの構文、WebのAPIなどのブラウザの対応状況をまとめたサイトです。

AutoprefixerはこのCan I Useのデータをまとめている、caniuser-dbというnpmパッケージを利用することで、CSSのプロパティや値、@ルールに必要なベンダープリフィックスを参照することができます。

browserslist

また、サポートブラウザを 'last 2 versions' のような文字列で指定できるようにするために、browserslistというパッケージを使っています。

browserslistは上記の自然言語のように書かれた文字列を受け取り、そのブラウザバージョンのリストを配列で返します。

const browserslist = require('browserslist');

browserslist('last 2 versions');
/*
[ 'chrome 55',
  'chrome 54',
  'edge 14',
  'edge 13',
  'firefox 50',
  'firefox 49',
  'ie 11',
  'ie 10',
  'ie_mob 11',
  'ie_mob 10',
  'ios_saf 9.3',
  'ios_saf 10-10.1',
  'opera 41',
  'opera 40',
  'safari 10',
  'safari 9.1' ]
*/

---

今日はAutoprefixerがオプションで指定したサポートブラウザから、どのようにしてベンダープリフィックスを付与しているのかの仕組みについて述べました。

明日はPostCSS製のCSSリンターであるstylelintについて書きます。