Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

Autoprefixerの仕組み

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

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
3
Help us understand the problem. What are the problem?