ウェブのあれこれ
ウェブを活用したいひとのためのブログ
CSSベンダープレフィックスの種類と使い方のまとめ
2015/06/25 HTML/CSS

CSSベンダープレフィックスの種類と使い方のまとめ

ブラウザの種類やバージョンによってサポートされているCSSのプロパティは違いがありますよね。そんな時に少しで共通したスタイルを適用できるするためにベンダープレフィックスというものがあります。

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

CSSのプロパティの中にはブラウザのバージョンによってはドラフトとして実装されているプロパティがあります。
そのようなプロパティはベンダープレフィックスを使用することによって利用できます。

モダンブラウザであればほぼ対応しているプロパティでも、少し前のバージョンではベンダープレフィックスが必要な
場合もあり、CSS3のプロパティを利用する際にはベンダープレフィックスは必須ともいえます。

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

-moz-

Firefoxのベンダプレフィックスです。
「moz」とはFirefoxのベンダーである「Mozila」の頭文字ですね。

-webkit-

iOS,Androidなどモバイル端末のブラウザに標準搭載されているレンダリングエンジンやGoogle Chromeのベンダープレフィックスです。
モバイル系のOSはバージョンアップがかなり頻繁に行われるのでこのプレフィックスはかなり重要ですね。

-o-

Operaブラウザのベンダープレフィックスです。
ブラウザシェアは他のものより低いですが、最近はモバイル用のブラウザもあり、利用者が一定数います。

-ms-

IEのベンダープレフィックスです。
IEに関してはバージョンによる差が非常に大きく、特にIE8以前、以降ではかなりの差があるので
ベンダープレフィックス以外にもCSSハックが数多く存在するのが特徴ですね。

ベンダープレフィックスの使い方

使い方は簡単で、CSSのプロパティ名の前にプレフィックスをつけるだけです。
「border-radius」を例にしてみると、
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px; /* ベンダープレフィックスなしを最後に書く */
というぐあいです。

ベンダープレフィックスを「つけたプロパティ」と「つけていないプロパティ」では「つけていないプロパティ」を最後に書きましょう。

これには理由があり、CSSは一つのセレクタ内に指定されているプロパティにかんして、上から順番に評価するというルールがあるためです。ベンダープレフィックスに該当しない場合や、プロパティがサポートされている場合には一番最後に記述している「つけていないプロパティ」が最終的に評価されるようになります。

ベンダープレフィックスを「つけたプロパティ」にかんしての書き順は特にありませんが、私はスタイルを見やすくするために上記サンプルのような書き方をよくします。値の部分の面が揃うのでみやすいですよね。

結局はブラウザ依存なので実機でのチェックは忘れずに!

各種ベンダープレフィックスですが、つけてもサポートしていないケースもあったりします。結局はブラウザの種類やバージョンによりけりなんですね。上記例のborder-radiusもIE8はベンダープレフィックスをつけてもサポートしませんが、IE9ではベンダープレフィックスなしでサポートしています。

FirefoxやChromeはバージョンの確認は難しいかもしれませんが、IEは開発者ツール(F12キー)で過去のバージョンをエミュレートできるので、各バージョンのチェックは忘れずに行いましょう。また、古いブラウザにも対応するならば、プロパティが無効であっても最低限閲覧可能な構成を作るように心がけましょう。
Provided by Revolme inc.
revolme.co.jp