Help us understand the problem. What is going on with this article?

Autoprefixerの仕組み

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away