LoginSignup
3

More than 5 years have 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というパッケージを使っています。

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について書きます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3