【CSS】「autoprefixer」について

autoprefixerとは？

自動でベンダープレフィックスをつけてくれるものです。CSSはブラウザによって使えるもの使えないものが変わってきますが、ベンダープレフィックスをつけることによってどのブラウザでも動くようにしてくれるものです。自力でも良いのですが、一つ一つつけていくのは大変ですし、スペルミスなどでバグの原因になったり、どのプロパティがベンダープレフィックスが必要なのか判断することも大変なので自動でやってくれるメリットがあります。

なお、サポートしたいブラウザーはbrowserlistなどの設定ファイルに指定することで対応するのが通常です。

使われ方

postcss(CSSのビルドツール)のプラグインとして使うことが多いです。ビルド手法によって指定の仕方が変わってきますが、以下のケースが多いでしょう。

• なお、sassであればgulpビルドの際にpostcss変換のプラグインとして実行する。
• tailwindであればpostcssの設定ファイルにプラグインとして指定する。
• webpackのプラグインやReactのCSS in JSなどで記述したりします。
• 他には、VSCodeなどのエディタの拡張機能、オンラインツール(Autoprefixer CSS online)などでも変換後のソースコードを入手することは可能です。

例

postcssでビルド後のCSSですが、例えば以下のように「--webkit」や「-moz-」から始まるCSSプロパティがあったりしますが、これが該当します。

• -moz-：Firefox
• -webkit-：Google Chrome、Safari
• -o-：Opera（これは現在、webkitで補完できるので今は不要）
• -ms-：Internet Explorer（現状IEはサポート停止になったので現状実装はほぼ不要です。）

具体例

display:flex

古いバージョンだとベンダープレフィックスが必要でしたが、今は不要になっています。

そのCSSが各ブラウザで対応しているか調べるには？

Can I Useを使うのが早いでしょう。各ブラウザの最新版の対応状況はもちろんのこと、過去バージョンの対応状況まで調べることができる便利ツールです。

基本的に、autoprefixerが自動でやってくれるので問題ないかもしれませんが、もしautoprefixerがちゃんと動かなかった場合に原因調査には活かせるかもしれません。

設定例

browsers: ['last 2 versions']

直近2バージョンまでフォローする。