CSS3のベンダープレフィックス

2012/03/03

CSS

CSS3を使用する際、ちょっと面倒なのがベンダープレフィックス...。
CSS3の仕様策定が安定してくると、各ブラウザも対応してくるので、先々記述の必要がなくなってきますが、現状でCSS3を使う際、ベンダープレフィックスが必要な場合もあります。
今回は、ベンダープレフィックス使用時に活用できるツールを紹介しようと思います。また、簡単にベンダープレフィックスに関しての説明も書いておきます。

Keyword：CSS3,Javascriptライブラリ,Prefix free

ベンダープレフィックス

ベンダープレフィックスとは、仕様策定途中のCSS3のプロパティや値を各ブラウザが先行実装している場合、それらの機能を動作させるためにプロパティや値の先頭に付加する文字列のことをいいます。主要ブラウザでのベンダープレフィックスは以下となります。

ベンダープレフィックス

-moz-     /* Firefox */
-webkit-  /* Chrome･Safari */
-o-       /* Opera */
-ms-      /* Internet Explorer */

/* 例:Firefox･Chrome･Safariに指定 */
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;

例では、ベンダープレフィックをFirefox･Chrome･Safariに指定しています。
“transition”はCSS3でアニメーションさせる場合に使用するプロパティで、”all”は設定の対象、”1s”は時間、”ease”はアニメーション方法(徐々に早くなり、終盤に減速する)です。
また、ベンダープレフィックスは仕様が安定すると外される(ベンダープレフィックスが付いたままだと動作しなくなる)ため、ベンダープレフィックスなしの記述も合わせて書いておくようにしましょう。
各ブラウザ毎のCSS3の対応状況は、以下サイトで確認できます。
⇒ findmebyip.comのHTML5 & CSS3のブラウザサポート

また、CSSの各プロパティ別ブラウザ対応状況の確認は、以下サイトが便利です。
⇒ caniuse.comのCSS･HTML5･Javascript API･SVGのブラウザサポート
使い方はとても簡単！
“Transitions”の対応状況とベンダープレフィックスを確認する場合、以下のようにします。
・一番左のCSSの項目から”Transitions”をクリック
・すると対応状況が表示されます(以下の画像を参照)。
※反転表示(赤)：未対応、反転表示(薄い緑)：対応
※どれにベンダープレフィックスが必要かも表示してくれます。

※画像をクリックすると拡大表示されます

JavascriptライブラリPrefix free

JavascriptでCSS3にベンダープレフィックスを自動で追加してくれるライブラリです。
以下サイトよりダウンロードできます。
⇒ Prefix freeダウンロードページ

使用時にはダウンロードしたファイルを外部ファイルとして読み込むだけです。

HTML

<head>
<script src="prefixfree.js"></script>
</head>

これだけで、通常のCSS3を書けば、必要なベンダープレフィックスのみを自動で追加してくれます。例えば、Webkit系のブラウザを使用時には”-webkit-“だけを追加してくれます！

●Prefix freeの特徴
・ファイルサイズが軽い
・jQuery等のライブラリに依存しない
・link要素でもstyle要素でも自動でベンダープレフィックスを追加
※@importでのスタイルシートには対応していないようです
・Javascript経由で設定しているCSSにも対応
・既存のベンダープレフィックス付きのプロパティには適用されない
[対応ブラウザ]
IE9以上・Opera 10以上・Firefox 3.5以上・Safari 4以上・Chrome・Mobile Safari・Android browser・Chrome Mobile・Opera Mobile
※2012.9.18時点の最新バージョン1.0.7を使用した場合

その他に活用したいツール

●cssFx
ベンダープレフィックスを自動で追加してくれるJavascriptライブラリ
参考リンク：cssFx、かちびと.net

●CSSPrefixer
通常のCSS3の記述にベンダープレフィックスを追加してくれるWebサービス
参考リンク：CSSPrefixer

●Compass
RubyベースのCSS構築フレームワーク
参考リンク：Compass,Windows7でSCSS+Compass,Sass,Sass、そしてSCSS

~最後に~
ベンダープレフィックス自体、ブラウザのバージョンアップごとに使用も減っていくと思いますし、私が一番おすすめなツールはPrefix freeです。その理由は、とにかく簡単で必要がなくなったらJavascriptを外すだけで済むからです。
ベンダープレフィックスに時間をとられるよりは、SassやCompass等のCSSフレームワークを導入して作業効率を図ったり、HTML5やCSS3の新要素やプロパティを覚える方が有益ですしね！

Prev List Next

関連記事(※当記事と関連性が高いと思われる記事)