「ベンダープレフィックスとは」の編集履歴(バックアップ)一覧に戻る

ベンダープレフィックスとは - (2015/05/25 (月) 21:02:59) の編集履歴(バックアップ)


ベンダープレフィックスについてお勉強していきます。
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)によってブラウザの種類が付けられています。

と書かれています。 プロパティを作っているものに関して、 プロパティ名の先頭に接頭辞というものを付けて、いち早く対応してます!使って大丈夫ですよ!というようにさせています。


ベンダープレフィックスを付けないとできないものの例

  1. グラデーションプロパティ
  2. text-shadowプロパティ などです。簡単に言えば、グラデーション系、影系に関してはベンダープレフィックスを付ける必要があります。


ベンダープレフィックス

ではどのようにベンダープレフィックスを付けないといけないのでしょうか?
GoogleChrome,Safariの場合

-webkit-

Firefoxの場合

-moz-

InternetExplorerの場合

-ms-

Operaの場合

-o-

というような接頭辞を付けます。 グラデーション、影系に関しては、ベンダープレフィックスを付けるようにしましょう。

ベンダープレフィックスが必要か必要でないかを判断するためには・・・

http://caniuse.com/ のサイトで確認してみましょう。プロパティ名を入力して、結果をだし、show allを押せば確認できます。