HOME > > > CSS3から聞く様になったベンダープレフィックス(vendor prefix)って一体何?

CSS3から聞く様になったベンダープレフィックス(vendor prefix)って一体何?

CSS3から聞く様になったベンダープレフィックス(vendor-prefix)って一体何

CSS3から耳にする様になったベンダープレフィックスとは?

ベンダープレフィックスは拡張機能ですよという明示をする為につける拡張子の事。
最近ではブラウザの種類も多く、各ブラウザで独自の拡張機能を実装したりしています。そんな時、ブラウザによって動きが違うと大変です。仕様のリスクに備えてchromeもコレsafariもコレと同じ事が出来る様に、プロパティ名や値の先頭にベンダープレフィックスを付ける事が推奨されています。

ベンダープレフィックスの意味は?

プレフィックスは接頭辞(単独に用いられることがなく、これに何らかの意味を付加するはたらきをもつもの)であり、前後に「-」を付けたベンダー識別子でブラウザの種類を特定するものです。
という事なので、「ベンダープレフィックス」自体は1つで使うものではなく各ブラウザを判別するものだよーって事になります。

各ブラウザを特定するベンダープレフィックス

ブラウザを特定するベンダープレフィックスは以下の通りです。

-webkit-

Google Chrome、Safariを判別する識別子。
上記ブラウザが「WebKit採用ブラウザ」である事からこの識別子になっています。

-moz-

Firefoxを判別する識別子。
Mozilla Firefoxの頭文字「Moz」が識別子になっています。

-ms-

Internet Explorerを判別する識別子。
Microsoft Internet Explorerの頭文字「Ms」が識別子になっています。

-o-

Operaを判別する識別子。
Operaの頭文字「O」が識別子になっています。

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

例としてCSSでベンダープレフィックスを使った角丸を記述する場合です。


div{
 -webkit-border-radius: 5px; /*Google Chrome、Safari*/
 -moz-border-radius: 5px; /*Firefox*/
 -ms-border-radius: 5px; /*IE*/
 -o-border-radius: 5px; /*Opera*/
 border-radius: 5px; /*草案(原案)*/
}

「-webkit-」~「-o-」までは各ブラウザの識別。 最後の「草案」は言葉通り「元(原案)」となります。
CSS3の仕様が勧告候補になった場合はブラウザでプロパティがサポートされると、ベンダープレフィックスだけで対応していた場合動かなくなる場合があります。ですので、そうなっても大丈夫な様に元々のプロパティを入れておく必要があります。(最終的には草案だけで済むといいですけどね)
現段階ではベンダープレフィックスと草案の両方を入れておきます。

記述する順番

CSSは同様の内容であれば、最後に書かれている内容が結果として表示されます。
上記で述べた通りベンダープレフィックスが対応しなくなる事を考えると、「草案」を最後に記述しておいた方が良いかと思います。
ただし、ブラウザによっては順番が違っても動きます。
プロパティがサポートされた場合直さなくてはならなくなるので、後の事を考えると最後で良いと考えています。

ベンダープレフィックス付きの順番は?

上記の考え方からいくとベンダープレフィックス付きの順番ですが、CSSの非対応ブラウザを下にもっていくのが良いのかと思います。
あくまで「border-radius」だけに関しては、

・IE8(非対応)だが、9以降は対応。
・Firefox3.6(非対応)だが、それ以降は対応。
・Google Chrome4(非対応)だが、それ以降は対応。
・Safari4(非対応)だが、それ以降は対応。

IE8は「PIE」で対応すると考えると、Firefox3.6が一番古いので草案の上にもっていく。


div{
 -ms-border-radius: 5px; /*IE*/
 -o-border-radius: 5px; /*Opera*/
 -webkit-border-radius: 5px; /*Google Chrome、Safari*/
 -moz-border-radius: 5px; /*Firefox*/
 border-radius: 5px; /*草案(原案)*/
}

こんな感じ?
ブラウザを全て最新にしている場合は全部対応できるので、そもそもベンダープレフィックスが要らない事にはなる。

最後に

旧ブラウザ(CSS3が対応していない)ではベンダープレフィックスを記述しても対応しない場合があります。
IE8などで仕様する場合は「-ms-」を入れても動かない場合がありますので、「PIE」を使う等して対応する必要があります。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket