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

Autoprefixerでベンダープリフィックス自動付与する

More than 3 years have passed since last update.

ここまでで、PostCSSの仕組みとそのプラグインはどういうものなのか、そしてPostCSSのAPIを使ってASTを操作する方法と、プラグインの作り方を説明しました。

Webアプリを作る業務では、実際にASTを変換してCSSに独自の処理をおこなうのではなく、既存のプラグインを組み合わせることが多いです。今日から何日かは、PostCSSのプラグインとしてよく使われているものを紹介していきます。

Autoprefixer

PostCSSのプラグインとして最も有名なのが Autoprefixer でしょう。「PostCSSは知らなかったけど、Autoprefixerは使っている」という人も少なくないと思います。PostCSSも元々はAutoprefixerを作るために生まれました。

.example {
  display: flex;
  user-select: none;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

例えば、上記のようなCSSを下記のように変換します。

.example {
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 3px;
}

display プロパティの値としてIE用のベンダープリフィックスとして -ms-flexbox が追加されていることがわかります。他にも user-select プロパティには -webkit-, -moz-, -ms-プリフィックスが付与されています。また、入力となるCSSには -webkit-border-radius というプロパティが書かれていますが、最近のChromeやSafariでは border-radius プロパティにベンダープリフィックスは必要ないので、これは削除されています。

使い方

AutoprefixerはPostCSSのプラグインとして実行する他に、それ単体での実行も可能で、Rails上で実行するためのRailtieとしての実装、静的サイトジェネレーターのMiddlemanの拡張としての実装もあります。

今回はPostCSSのプラグインとして、1日目で説明した postcss-cliで実行する方法 を説明します。

まずは、npmからautoprefixerをインストールします。

$ npm install -D autoprefixer

そして、.postcssrc.json を以下のように記述します。

{
  "use": [
    "autoprefixer"
  ],
  "input": "input.css",
  "output": "output.css"
}

オプションでサポートブラウザを指定する。

Autoprefixerはオプションで、ベンダープリフィックスを付与する対象となるブラウザのバージョンを指定することができます。

  • last 2 versions: 全てのブラウザの最新2バージョン
  • last 3 iOS versions: iOS Safariの最新3バージョン
  • > 5% in US: USで 5% 以上のシェアがある全てのブラウザバージョン

上記のように、自然言語風の文字列でサポートブラウザを指定することができます。

postcss-cliでは、プラグイン名でプロパティを追加し、その下にそのプラグインのオプションを記述することができます。

{
  "use": [
    "autoprefixer"
  ],
  "input": "input.css",
  "output": "output.css",
  "autoprefixer": {
    "browsers": [
      "ie >= 11",
      "last 2 Edge versions",
      "last 2 Firefox versions",
      "last 2 Chrome versions",
      "last 2 Safari versions",
      "last 2 Opera versions",
      "last 2 iOS versions",
      "last 2 ChromeAndroid versions"
    ]
  }
}

今日はAutoprefixerの紹介と、使い方を説明しました。明日は少し掘り下げて、Autoprefixerの仕組みや実装について述べます。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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