ベンダープレフィックスについてお勉強していきます。
CSSで-moz-や-webkit-や-ms-や-o-という記述を時々見かけると思います。それとは何ぞやという話です。
世の中には様々なブラウザが存在します。InternetExplorer、GoogleChrome,Opera,Safari,Firefox,Netscape・・・。CSSを同じように書いてもすべてのブラウザで同じように表示されるとは限りません。webでの表現は日々進化しており、CSSのプロパティの機能の中で、ブラウザを作ってる人が
「こんな機能あったらよくね？」「こういうのを標準化しようぜ！」といって作られるもの
があったり、統一団体W3Cによってこのプロパティは
「今後標準するためにお試しとして作ってみよう！」や「標準化するようにしよう」
といって標準化を促すものがあります。paddingやmarginは標準化されているのですが、グラデーションは記述がばらばらでまだ標準化されていません。※2015年5月25日現在
http://kojika17.com/2013/02/ordering-vender-prefix.htmlによると
ベンダープレフィックス(vendor prefix)は、ブラウザが独自の拡張機能を実装、勧告候補前の仕様を先行実装する場合に、 将来的に仕様が変更されるリスクに備えて、プロパティや値につけられる識別子のことです。その識別子は、ベンダー識別子(vendor identifier)によってブラウザの種類が付けられています。
と書かれています。
プロパティを作っているものに関して、
プロパティ名の先頭に接頭辞というものを付けて、いち早く対応してます！使って大丈夫ですよ！というようにさせています。
こんな感じをCSSで表現する。その場合、
background: -moz-linear-gradient(top, #ffffff, #CCCCCC);/*Firefox 3.6・4以降で必要*/
上のCSSの場合ベンダープレフィックスは
-moz-
です。
-webkit-box-shadow : 1px 2px 3px #000;
上のCSSの場合ベンダープレフィックスは
-webkit-
です。
簡単に言えば、グラデーション系、影系に関してはベンダープレフィックスを付ける必要があります。
ではどのようにベンダープレフィックスを付けないといけないのでしょうか？
GoogleChrome,Safariの場合
-webkit-
Firefoxの場合
-moz-
InternetExplorerの場合
-ms-
Operaの場合
-o-
というような接頭辞を付けます。
グラデーション、影系に関しては、ベンダープレフィックスを付けるようにしましょう。
ただ、最近のOperaはwebkitを使用しており、webkitになる場合もあるようです。
wikipediaによると
2013年2月13日に、今後はレンダリングエンジンとしてのPrestoの開発とOpera Browserでの使用を終了し、今後のリリースにおいてはOpera Browserで使用するレンダリングエンジンをWebKitに変更すると発表した
というようにwebkitになっているそうです。昔のOperaは-o-が必要です。
http://caniuse.com/ のサイトで確認してみましょう。プロパティ名を入力して、結果をだし、show allを押せば確認できます。
