Autoprefixerによる、CSS3の管理

ベンダープレフィックスをいつまで付け続けるのか

ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。

現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFlexible Box Layoutなど、CSS3によっては仕様の更新時に大幅な変更が加えられたものがあり、「CSS3には、ベンダープレフィックスを付けとけばいい」という考えはやめた方がいいでしょう。

例えば、border-radiusにベンダープレフィックスが必要なブラウザは、Firefox 3.6やiOS Safari 3.2、Android Browser 2.1など、IE8がリリースされた2009年前後のブラウザばかりです。
CSSによっては、ベンダープレフィックスを付けるどころか、なしでも問題ない環境が整いつつあります。

以下の記述は2014年っぽくない

-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;

今っぽい感じ

border-radius: 4px;

Sassを使ったベンダープレフィックスの限界

border-radiusのように、数年前から多くのブラウザがサポートしているCSSだけではありません。
仕様の改定やブラウザの開発スピードによって、CSS3の対応はブラウザのバージョンによって、まちまちです。

ベンダープレフィックスを付与するのに、SassといったCSS Preprocessorのmixinを利用している人もいるでしょう。
CompassやBorbonといったフレームワークやmixin集を利用したり、自分でmixin集を作成することで、ベンダープレフィックスを付ける作業を簡易化できます。

これらを使用することで一定以上の品質を保てますが、Compassで出力されるCSS3は、すでに時代遅れの記述ばかりです。CompassのGitHubページを見ると、CSS3のSCSSファイルはほとんどが2年前に更新されて、そのまま放置されているファイルばかりです。
先ほど紹介したborder-radiusも、Compassのデフォルトでは以下のように出力されます。

SCSS

@import "compass";
    
.border-radius {
  @include border-radius(4px);
}

SCSSの出力

.border-radius {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

さまざまなベンダープレフィックスが付与されており、余計な記述を増やしている印象です。
またCompassのCSS3グラデーションを生成する仕組みは、ひとつ前の古い構文にしか対応しておらず、最新の構文で記述すると古い構文に影響し、エラーとなります。

SCSS

@import "compass";
    
.gradient {
  // 最新の構文で記述
  @include background-image(linear-gradient(to right, #fff, #000)); 
}

Compassを使用したグラデーション

.gradient {
  background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #ffffff), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(to right, #ffffff, #000000);
  background-image: -moz-linear-gradient(to right, #ffffff, #000000);
  background-image: -o-linear-gradient(to right, #ffffff, #000000);
  background-image: linear-gradient(to right, #ffffff, #000000);
}

正しいグラデーションの構文(比較用)

.gradient {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#000000));
  background-image: -webkit-linear-gradient(left, #ffffff, #000000);
  background-image: -moz-linear-gradient(left, #ffffff, #000000);
  background-image: -o-linear-gradient(left, #ffffff, #000000);
  background-image: -ms-linear-gradient(left, #ffffff, #000000);
  background-image: linear-gradient(to right, #ffffff, #000000);
}

Compassは、ベンダープレフィックスの管理を行うための変数が用意されています。
そのため、ある程度のベンダープレフィックスの制御は可能ですが、グラデーションの構文やFlexible Box Layoutなど大幅な仕様変更が加えられているものは、Compassの機能に期待できません。

自らでCSS3のMixin集を作成し、Compassとあわせて運用するという方法もありますが、定期的にCSSの対応状況の確認と調整が必要になるので、CSS3をメンテナンスするコストとサイトのパフォーマンスが釣り合いません。

CSS3で楽をしたいのに、ベンダープレフィックスの問題にとらわれると、何を目指しているのか分からなくなります。

Autoprefixer

ここでようやく「Autoprefixer」の出番です。

Autoprefixerは、その名前の通り、自動でプレフィックスを付与するツールです。
単にベンダープレフィックスを付けるツールなら、いくらでもありましたが、このツールはCan I Use.のデータを元に、必要なCSSのみにベンダープレフィックスを追加します。また不要なベンダープレフィックスがあれば削除も行ってくれます。
対象のブラウザも細かく設定できるため、プロジェクトに合わせたCSS3の管理が楽になります。

元のCSS。
ベンダープレフィックスが付いたものでも、Autoprefixerに通すと適切な形に出力される。

div {
  -webkit-border-radius: 5px;
  border-radius: 5px
}

コンパイル後。
自動的にベンダープレフィックスが削除される。

div {
  border-radius: 5px
}

カオスで有名なグラデーションとFlexible Box Layoutも対応しているため、最新のグラデーション構文や値を記述しておくだけで、いい感じのCSS3が出力されます。

元のCSS

div {
  display: flex;
}

コンパイル後

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}

Compass(CLI)からAutoprefixer

CompassでAutoprefixerを利用する場合は、ターミナル、またはコマンドプロンプトを使用して、以下の2つのコードを記述し、それぞれをインストールしてください。(Macは、先頭に　sudo　が必要)

gem install autoprefixer-rails

gem install csso-rails

インストールが終われば、Compassを使用しているプロジェクトの「config.rb」を開き、どこでもいいので、以下のコードをコピー&ペーストしてください。

require 'autoprefixer-rails'
require 'csso'

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.compile(css)
  end
end

以上で、設定は終わりです。
後はいつも通りに「compass w」して、SassにCSSを記述していくだけです。

Autoprefixerを利用する注意点は、最新のCSS3を記述を行うこと。
ベンダープレフィックス付きのCSS3を記述してもいいですが、自動追記・削除がうまくいかない場合があるため、ベンダープレフィックスなしのCSSを記述するようにしましょう。
もちろんMixinなどを使用しなくても構いません。そのままCSSを書いてください。

CompassとAutoprefixerを利用した例

@import "compass";

.border-radius {
  @include border-radius(4px);
}

.border-radius2 {
  border-radius: 4px;
}

.gradient {
  @include background-image(linear-gradient(to right, #fff, #000));
}

.gradient2 {
  background-image: linear-gradient(to right, #ffffff, #000000);
}

コンパイル後。
そのままCSS3を記述したところも適切にベンダープレフィックスが付与される。逆にMixinを使っていると不要なコードが残ることがあるので、そのまま記述する方がいい。

.border-radius {
  -o-border-radius: 4px;
  border-radius: 4px;
}

.border-radius2 {
  border-radius: 4px;
}

.gradient {
  background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #ffffff), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(to right, #ffffff, #000000);
  background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#000000));
  background-image: -webkit-linear-gradient(left, #ffffff, #000000);
  background-image: linear-gradient(to right, #ffffff, #000000);
}

.gradient2 {
  background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#000000));
  background-image: -webkit-linear-gradient(left, #ffffff, #000000);
  background-image: linear-gradient(to right, #ffffff, #000000);
}

Autoprefixerがデフォルトで設定している対象ブラウザは、最新から2バージョン前と、Firefox 24、 Opera 12.1以上をサポートするように設定されています。Google Chromeなどは、常に最新に近いCSS3になるように設定されているため、コンパイルするだけでCSS3のメンテナンスが行えます。

対象のブラウザを変更したい時は、以下のような記述によって変更できます。

"last 3 versions", "ie 8", "ios 4", "android 2.3"

• 最新から何(n)バージョン前まで　[last n versions]
• iOS Safari [ios]
• Android browser [android]
• Blackberry browser [blackberry] か [bb]
• Google Chrome [chrome]
• Firefox [firefox] か [ff]
• Internet Explorer [explorer] か [ie]
• Opera [opera]
• Safari [safari]

対象ブラウザをCompassで変更する場合は、config.rbに追記した場所の一部を書き換えます。

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    # この下を書き換える
    io << AutoprefixerRails.compile(css, ['last 3 versions', 'ie 8', 'android 2.3'])
  end
end

エディタからAutoprefixer

Sassなどを使っていない人でも、エディタのプラグインによって、簡単にAutoprefixerを利用することができる BracketsのAutoprefixerプラグインを紹介します。

Bracketsは、Adobeが主導で開発しているHTML, CSS, JavaScript用のオープンソースコードエディタです。
正式リリースはされておらず、約2週間ごとにバージョンアップを行っているため、不安定な部分もありますが、今後の開発に期待してるエディタです。

BracketsのAutoprefixerプラグイン

BracketsにAutoprefixerプラグインをインストールするには、「Extension Manager」の「Available」タブをクリックし、隣の検索窓から「Autoprefixer」で検索をかけます。
プラグインに「Autoprefixer」が検出されるので、インストールし、Bracketsを再起動しましょう。

再起動すると[Edit]の中に[Auto prefix on save]と[Auto prefix selection]の2つが追加されているはずです。

• Auto prefix on saveにチェックを入れていると、CSSファイルを保存した瞬間にAutoprefixerが走り、その場でベンダープレフィックスの追加と削除を行います。
• Auto prefix selectionは、個別に適用するもので、ルールセット全体を選択し、実行するとベンダープレフィックスの追加と削除が行われます。

特にこだわりがなければ、Auto prefix on saveにチェックを入れておくといいでしょう。
CSSファイルを保存すれば、リアルタイムでCSSが書き換わります。

まとめ

ベンダープレフィックスの記述が少なくなったとしても、それによってパフォーマンスやCSSのファイルサイズに大きく影響しないかもしれません。
しかしプロジェクトごとの対象ブラウザにあわせて、ベンダープレフィックスの自動付与や、グラデーションなどをいい感じにしてくれるというメリットがあります。
コピペが必要なCSS3のツールやCSSメタ言語のMixinを利用とは少し違ったアプローチなので、ぜひAutoprefixerを試して欲しいと思います。

ただAutoprefixerもツールです。過信は良くありません。
出力されたCSSを確認するようにしましょう。