CSS3のベンダープレフィックスについて

CSS3のベンダープレフィックスについて

CSS3を扱う上でちょこちょこ登場するベンダープレフィックスについてまとめました。

ベンダープレフィックスとは

各ブラウザで先行実装されているCSS3で採用予定の機能を動作させるために、プロパティや値につけられる-moz-や-webkit-などの識別子のことです。

主要ブラウザのベンダープレフィックス

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

記述方法

ベンダープレフィックスを記述するときは、ベンダープレフィックスなしの記述も一番最後に記述します。

-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;

プロパティ別ブラウザ対応状況の確認

以下のサイトで確認できます。

Can I use... Support tables for HTML5, CSS3, etc
Can I use... Support tables for HTML5, CSS3, etc

確認したい項目をクリックすると、対応状況が表示されます。
以下はbox-sizingプロパティの対応状況を表示したものです。
対応している場合は緑色、非対応の場合は赤で表示され、ベンダープレフィックスが必要なブラウザも分かります。

box-sizingプロパティの対応状況

参考サイト

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事