CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入

ブラウザの進化が早い昨今、CSSのベンダープレフィックス(-webkit--ms-)が必要なプロパティと不要なプロパティが入り乱れています。必要なベンダープレフィックスのみを付与しようとした場合、途端にコード量が倍増し、メンテナンス性が低下し、バグの温床となります。このベンダープレフィックス地獄を解消するAutoprefixerをGulpやwebpackで使う方法を紹介します。


今なお続くベンダープレフィックス地獄

角丸を表現するborder-radiusプロパティはIE 11を含む全ての主要ブラウザで、ベンダープレフィックス無しで使えます。(Can I use border-radius)

一方で、ボックスレイアウトモジュールの為のflexboxプロパティやテキスト要素を変形するtransformプロパティ等では、Android 4.4以下等一部のブラウザではベンダープレフィックスが必要です。

しかし、毎日刻々と変化するブラウザの仕様を追い続け、必要なベンダープレフィックスだけを付与していくのは大変な労力です。また、ベンダープレフィックスを全てつけて解決を試みるコードを見かけます。確かにブラウザによるレイアウト崩れは防げるものの、一つの値を編集するだけで通常の何倍もの作業が発生し、ストレスとタイピングミスが増えるので辞めるべきです。


ベンダープレフィックス地獄の例

div {

-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}


ベンダープレフィックス地獄を解決するAutoprefixer

これらのベンダープレフィックス地獄はAutoprefixerを使うことで解決できます。Autoprefixerは最新のブラウザ実装状況をまとめたサイト「Can I use」の情報を使用し、必要なベンダープレフィックスのみを付与する為のツールです。

また、ベンダープレフィックスの適用範囲を細かく指定することが可能で、例えば下記のような指定ができます。


  • 各ブラウザの最新バージョンと一つ前のバージョンで必要なベンダープレフィックスのみ

  • IEは11以上、Android標準ブラウザは4以上で必要なベンダープレフィックスのみ

  • シェアが5%以上のブラウザで必要なベンダープレフィックスのみ

簡単な変換を通して、Autoprefixerの設定手順を紹介します。


変換用のCSS

プロジェクトフォルダにsrcフォルダを作成し、テスト用のstyle.cssファイルを作成します。

projectFolder/

 └ src/
   └ style.css

style.cssの中には下記のようなスタイルを設定しました。border-radiusプロパティやdisplayプロパティに、自動で必要なベンダープレフィックスを付与します。


style.css

main {

border-radius: 5px;
display: flex;
}

Autoprefixerはwebpack、Gulp、CLIなど様々な環境で使えます。本エントリーではwebpackとGulpでの設定方法について解説します。自身の環境にあったものをご覧ください。


GulpでAutoprefixerを使う

この章ではGulpとの連携方法について解説します。Gulpの詳しい導入方法や使い方については記事「絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順 - ICS MEDIA」を参照してください。


環境のセットアップ

プロジェクトフォルダにて、下記コマンドを使って初期化します(※1)。

npm init -y

必要なモジュールをインストールします。Autoprefixerは「PostCSS」の一部なので、本体「autoprefixer」とあわせてGulpでPostCSSを使うための「gulp-postcss」をインストールします。

npm i -D gulp gulp-postcss autoprefixer

※ Gulp用のAutoprefixerプラグイン「gulp-autoprefixer」もありますが、こちらは暫くメンテナンスされておらず、内部で使われているAutoprefixerは古いです。


タスクの定義

Gulpタスク用にgulpfile.jsを作成して下記のタスクを定義します。☆部分がベンダープレフィックスをどのように設定するかを指定する部分です。他の指定方法は「BrowserslistのREADME」を参照するとよいでしょう。例えば、「IE 11以上、Androidは4以上、その他は2バージョン」を指定してみます。


Gulp

const gulp = require("gulp");

const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");

gulp.task("default", function () {
return gulp.src("src/style.css")
.pipe(postcss([
autoprefixer({
// ☆IEは11以上、Androidは4.4以上
// その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
browsers: ["last 2 versions", "ie >= 11", "Android >= 4"],
cascade: false
})
]))
.pipe(gulp.dest("dist"));
});


上記のタスクを実行するには、下記コマンドを使います(※2)。

$ npx gulp


必要なベンダープレフィックスが付与された

Autoprefixerが適用されたCSSは下記です(上記のタスクでdistフォルダにstyle.cssが書き出されます)。border-radiusプロパティはベンダープレフィックスが付与されず、flexプロパティのみに必要なベンダープレフィックスが付与されます。


必要なベンダープレフィックスのみが適用されたstyle.css

main {

border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

ちなみに、browsers: [(中略), "ios_saf >= 8"],のように、iOS Safari 8を対象にした場合、-webkit-flexと旧仕様のプロパティが追加されます。


iOSのSafari8を対象にした場合

main {

border-radius: 5px;
display: -webkit-box;
display: -webkit-flex; /* 旧仕様が追加された */
display: -ms-flexbox;
display: flex;
}


webpackでAutoprefixerを使う

この章ではwebpackとの連携方法について解説します。webpackの詳しい導入方法や使い方については以下の記事も参照ください。

webpackの初期設定では、srcフォルダのindex.jsimportした各ファイルをバンドル(一つにまとめること)します。次のようにindex.jsを追加します。

projectFolder/

 └ src/
   └ style.css
   └ index.js

index.js内でCSSファイルを読み込みます。


index.js

// import文を使ってCSSファイルを読み込む。

import './style.css';

プロジェクトフォルダにて、下記コマンドを使って初期化します。

npm init -y

必要なモジュールをインストールします。Autoprefixerは「PostCSS」の一部なので、本体「autoprefixer」とあわせてGulpでPostCSSを使うための「postcss-loader」をインストールします(※1)。

npm i -D webpack webpack-cli style-loader css-loader postcss-loader autoprefixer


webpack.config.jsの定義

webpack.config.jsを作成し、下記の設定を記述します。☆部分がベンダープレフィックスをどのように設定するかを指定する部分です。他の指定方法は「BrowserslistのREADME」を参照するとよいでしょう。例えば、「IE 11以上、Androidは4以上、その他は2バージョン」を指定してみます。


webpack.config.json

module.exports = {

mode: "development",
module: {
rules: [
{
test: /\.css/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
url: false,
importLoaders: 1
},
},
// PostCSSのための設定★
{
loader: "postcss-loader",
options: {
plugins: [
// Autoprefixerを有効化
require("autoprefixer")({
// ☆IEは11以上、Androidは4.4以上
// その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
browsers: ["last 2 versions", "ie >= 11", "Android >= 4"]
})
]
}
}
]
}
]
}
};

下記コマンドでwebpackを実行すると、Autoprefixerによるベンダープレフィックスの自動付与が行われます。

npx webpack


必要なベンダープレフィックスが付与された

Autoprefixerが適用されたCSSは下記です。distフォルダのmain.js内のCSS部分をぬきだしたものです。


必要なベンダープレフィックスのみが適用されたスタイル

main {

border-radius: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}


ParcelでAutoprefixerを使う

ParcelでAutoprefixerを使う方法については、次の記事を参照ください。webpackやGulpの場合と異なり、設定ファイルが不要なのでラクです。


対象ブラウザは外部ファイルに記述もできる

webpack、Gulpの場合共に、対象ブラウザはpackage.json.browserslistrcというファイルに記述することも可能です。Autoprefixer以外のツールと対象ブラウザの設定を共有したい場合に役立ちます。この場合はwebpack.config.jsgulpfile.jsでのブラウザ指定は不要です。


package.jsonの場合

{

"dependencies": {
"autoprefixer": "^8.6.4"
},
"browserslist": [
"last 2 versions",
"ie >= 11",
"Android >= 4"
]
}


.browserslistrcの場合


.browserslistrc

> 0.5%

last 2 versions
ie >= 11
Android >= 4


Grid対応も強力

CSS GridでIE 11対応をする場合も、Autoprefixerは強力です。次の記事で詳しく解説しましたので参照ください。


もうベンダープレフィックスで消耗するのは辞めましょう

美しいCSSコードとは、ベンダープレフィックスが必要最低限だけ付与されたコードです。Autoprefixerに出会う前は、逐一プロパティ毎のベンダープレフィックス必要性を調べ、適用していくという大変な苦労を強いられました。Autoprefixerを使って面倒なベンダープレフィックスの処理は全て自動化し、ストレスとタイピングミスから解放されたCSSコーディングを今日から行いましょう。

※1 -y-Dについて不明であれば、GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方を参照ください。

※2 npxについて不明であれば、「npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう 」を参照ください。