ベンダープレフィックスを補完してくれる Autoprefixer

メモ:

Chrome , Firefox , Safari など様々なブラウザ存在しており、 CSS 仕様への対応状況もまちまちです。ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するため付ける識別子のことをベンダープレフィックスと言います。

例えば、次のようなベンダープレフィックスが利用されています。

Prefix ブラウザー
-webkit- Chrome , Safari , Opera 等
-moz- Firefox
-ms- Internet Explorer , Edge
-o- 古い Opera

Autoprefixer のインストール

Autoprefixer は、 PostCSS のプラグインということなので今回はコマンドラインから実行可能な PostCSS-cli とプラグインの Autoprefixer をインストールします。

c:\Projects\blueleaf> npm install --save-dev postcss-cli autoprefixer

インストールが完了したら、 Autoprefixer がどのように動作するのか確認したいので次のディレクトリを用意します。

「src/css」ディレクトリに style.css ファイルを作成します。

projects
  |- blueleaf      // プロジェクトフォルダー
      |- public
      |   |- assets
      |       |- css
      |- src
      |   |- css
      |       |- style.css     // css ファイル

style.css ファイルには、次のようにスタイルを定義しておきます。

* {
  box-sizing: border-box; }
  *:before, *:after {
    box-sizing: inherit; }

.example {
  display: grid;
  transition: all .5s;
  user-select: none;
  background: linear-gradient(to bottom, white, black); }

基となるスタイルシートが作成できたので次のコマンドを実行して Autoprefixer を通してみます。

c:\Projects\blueleaf> npx postcss src/css/style.css --use autoprefixer --autoprefixer.browsers "> 5%" -d public/assets/css/

「public/assets/css/」ディレクトリに出力された style.css には次のようなベンダープレフィックスが追加されます。

* {
  box-sizing: border-box; }
  *:before, *:after {
    box-sizing: inherit; }

.example {
  display: grid;
  transition: all .5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: linear-gradient(to bottom, white, black); }

「-d」オプションが出力先、「–autoprefixer.browsers “> 5%“」が対象とするブラウザの範囲になります。

以上でベンダープレフィックスが補完されることを確認することができました。