#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. vendor prefix

Vendor prefix

ベンダープレフィックス

CSS3は現在も拡張が続いており、各ブラウザもアップデートの度にCSS3が追加されています。
古いブラウザでの閲覧では『ベンダープレフィックス』や独自のプロパティが必要になる場合が有ります。
『ベンダープレフィックス』とは、先頭に付ける -webkit-, -moz-, -ms-, -o- など各ブラウザで先行実装/独自拡張された機能を使用する時に付ける識別子のことです。
プロパティの頭にブラウザを特定する識別子をつけてそれが拡張機能であることを明記します。

-webkit- ・・・ Google Chrome、Safari
-moz- ・・・ Firefox
-ms- ・・・ Internet Explorer、Microsoft Edge
-o- ・・・ Opera(現在は -webkit- を使用する事になり不要)

ベンダープレフィックス使用の注意点

CSS3プロパティにベンダープレフィックスをつける必要があるかは、ブラウザやバージョンによって異なります。
記述されていてもエラーにはなりませんが、ベンダープレフィックスを使用する際は、必ず最後にベンダープレフィックスがつかないプロパティの記述が必要です。
それまで(ベンダープレフィックスを)記述しないと利用できなかったCSS3プロパティが「草案」から「勧告候補」になった場合、ベンダープレフィックスの記述しかされていないと、ブラウザが正しく表示をしなくなる事があります。
ベンダープレフィックスがつかないプロパティを最後に記述することで、上の指定がブラウザに無視されても下の指定によって正しく表示するようになります。
(CSSは一つのセレクタ内に指定されているプロパティを、上から順に評価するルールがあるためです。)

ベンダープレフィックスの書き方
.sample1{
   -webkit-border-radius: 5px;  /* GoogleChrome、Safar用 */
   -moz-border-radius: 5px;  /* Firefox用 */
   -ms-border-radius: 5px;  /* Internet Explorer・Microsoft Edge用 */
   -o-border-radius: 5px;  /* Opera用 (現在は不要)*/
   border-radius: 5px;  /*ベンダープレフィックス無しを最後に(必ず)書く */
}

対応ブラウザ・バージョンを確認する

下記サイトは、HTML5やCSS3がどのブラウザに対応しているか、ベンダープレフィックスが必要かどうかを、上部の検索窓に要素を入れるだけで簡単に調べる事ができます。

CanIuse
Can I use -Browser support tables for modern web technologies-