Posted at

Autoprefixerの仕組み

More than 1 year has passed since last update.

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


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

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

Screen Shot 2016-12-06 at 22.44.30.png

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


browserslist

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

https://github.com/ai/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について書きます。