少し前のブラウザーではＣＳＳ３のプロパティを実装する際にプロパティによって”–webkit-”や”–moz-”などの「ベンダープレフィックス」を付けたプロパティを記述していましたが、最近のブラウザーは多くのＣＳＳ３の仕様をサポートしており、「ベンダープレフィックス」なして正しく動作するプロパティが増えてきました。本コラムでは、「ベンダープレフィックス」の基本とＷ３ＣのＣＳＳ３勧告状況の見方について解説します。
目次
1. ベンダープレフィックスとは何か？
「ベンダープレフィックス（Bender Prefix）」とは、"Google Chrome" や "Mozilla Firefox"、"Safari" といったブラウザーのベンダーがＣＳＳ３の拡張機能を実装するのに使用する識別子のことです。
プレフィックス(Prefix)の意味は「接頭辞」です。ＣＳＳ３のプロパティの接頭辞として「–webkit-」や「–moz-」を付けて「草案段階(ＷＤ：Working Draft)」のＣＳＳ３の仕様を先行して実装するときに利用します。
1.1. ベンダープレフィックスの一覧
ブラウザーごとに以下のようなベンダープレフィックスを実装します。
| 接頭辞 | 対応ブラウザー |
|---|---|
| -webkit- | Google Chrome、Safari |
| -moz- | Mozilla Firefox |
| -ms- | Microsoft Internet Explorer |
| -o- | Opera |
例えば、「border-radius」プロパティをベンダープレフィックスをつけて実装する場合CSSに記述するのは次のようなコードになります。ブラウザーに対応した接頭辞をプロパティにつけて同じプロパティを複数記述します。
●sample.html
.sample {
-webkit-borde-radius: 20px; /* Google Chrome、Safari用 */
-moz-border-radius: 20px; /* Mozilla Firefox用 */
-ms-border-radius: 20px; /* Microsoft IE用 */
-o-border-radius: 20px; /* Opera用 */
border-radius: 20px; /* 「勧告候補」以降の対応 */
}
1.2. ベンダープレフィックスの順序について
「ベンダープレフィックス」を付けたプロパティを記述する時に順序は特にきにする必要はありません。サンプルではベンダープレフィックスが長い順番記述しています。またベンダープレフィックスを付けたプロパティをCSSに記述する際には、通常のプロパティを一番最後の行に記述します。
現在のウェブブラウザーでは多くのCSS3の仕様をサポートしていますので、「ベンダープレフィックス」を記述する必要はほとんどありませんが、古いコードのメンテナンスをしたり暫定対策でベンダープレフィックスを利用する場面もあるかと思います。しかし、「ベンダープレフィックス」はコードが膨大になり、管理やメンテナンスもしにくくなる為なるべく使用しないことをお勧めします。
W3Cでは、ＣＳＳ３の「草案段階（Working Draft）」から「勧告候補（Candidate Recommendation）」になったらブラウザーからベンダープレフィックスを外すことが推奨されています。その為、今まで正常に動作していたベンダープレフィクス付きのプロパティが突然動作しなくなることがあります。その為勧告候補になったプロパティはベンダープレフィックスなしのプロパティに変更する必要があります。対応策としてプレフィックスなしのプロパティを記述しておきます。
CSSは同じものが記述されていた場合は下に記述されたものを優先しますので、ベンダープレフィックスのついたプロパティよりもその下のプロパティで正しく動作することになります。
2. ＣＳＳ３の勧告状況を確認する方法
W3Cの「CSS current work & how to participate（http://www.w3.org/Style/CSS/current-work）」のページで、プロパティの状況を確認する事ができます。
●CSS current work & how to participate
Ｗ３Ｃサイトでは勧告状況は以下のように区分されています。
| 日本語 | 英語 |
|---|---|
| 「草案段階」 | WD： Working Draft |
| 「最終草案」 | LC： Last Call |
| 「勧告候補」 | CR： Candidate Recommendation |
| 「勧告案」 | PR： Proposed Recommendation |
| 「勧告」 | REC： Recommendation |
最近のブラウザーではよく使われるＣＳＳ３のプロパティが実装可能ですので、ベンダープレフィックスを付ける必要はありませんが、中にはブラウザーでサポートされていないプロパティもあります。プロパティごとに草案段階なのか勧告されているものかなどを確認してみましょう。Ｗ３Ｃのサイト「CSS current work & how to participate」のプロパティ一覧で「ＣＲ（勧告候補）」「ＰＲ（勧告案）」「ＲＥＣ（勧告）」とあればブラウザーベンダーがプロパティをサポートしてるもしくはする予定のプロパティですので、まずは通常のプロパティを設定して確認してみましょう。ちなみにサンプルコードの「border-radius」プロパティは、”IE", "Google Chrome", "Firefox", "Opera”, ”Safari" などの主要ブラウザーで利用可能ですのでベンダープレフィックスを付ける必要はなく「border-radius: 20px」の記述だけで角丸の指定が可能になります。
