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