目次
CSS3とは
CSS3は、CSS2.1に続く新しいCSSの仕様です。現在も拡張が続いており、各ブラウザもアップデートの度にCSS3が追加されています。
注意しておきたいのはInternet Explorerです。もともとInternet Explorerが独自実装していたものがCSS3として採用されたもの（box-sizingなど）以外、Internet Explorer8までCSS3に対応していません。Internet Explorer9は、一部対応です。Internet Explorerで現在サポートされているバージョンは11のみです。11以外に対応しなければ、かなりのCSS3が利用可能です。
ベンダープレフィックスとは
CSS3を使う際に使用するプロパティの前につけるキーワードです。各ブラウザは、CSS3が正式勧告される前に、先行実装という形でCSS3を採用していました。しかし、先行実装のため、CSS3が正式に勧告された時に除外されたり、仕様が変わることが考えられるため、各ブラウザの独自プロパティとして、ベンダープレフィックスを付けて差別化する必要がありました。
現在、CSS3のプロパティにベンダープレフィックスをつける必要があるかはブラウザの種類やバージョンごとに違います。また、ブラウザのバージョンが上がることによって、ベンダープレフィックスを取り除いても良いことになるものもあります。ちなみにベンダープレフィックスを外してもよいプロパティに、ベンダープレフィックスが付いていてもエラーにはなりません。
ブラウザごとのCSS3の対応状況やベンダープレフィックスの有無に関しては、Can I useというサイトで確認できます。
ベンダープレフィックスの種類
ベンダープレフィックスは、ブラウザの種類ごとに下記のキーワードを使います。
- -webkit- … Google Chrome, Sfari, Opera
- -moz- … Firefox
- -ms- … Internet Explorer, Microsoft Edge
Operaは、2013年7月に独自のレンダリングエンジンから、Google Chromeと同じレンダリングエンジンを採用しました。そのためベンダープレフィックス -o- は、現在使用されていません。
ベンダープレフィックスの記述方法
下記は、border-radiusにベンダープレフィックスをつけた例です。
※現在は、つける必要はありません。
.sec {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
下記は、線形グラデーションの場合です。
グラデーションは、background-imageプロパティの値なので、値にベンダープレフィックスを付けます。
※現在は、Android4.4、iOS7対策で-webkit-のみ使用します。
.sec{
background-image: -webkit-linear-gradient(#7074db, #171ca1);
background-image: -moz-linear-gradient(#7074db, #171ca1);
background-image: -ms-linear-gradient(#7074db, #171ca1);
background-image: -o-linear-gradient(#7074db, #171ca1);
background-image: linear-gradient(#7074db, #171ca1);
}
2022年現在のベンダープレフィックスの対応状況
2022年3月でのベンダープレフィックスの対応状況です。比較的有名なCSS3のプロパティの対応状況を掲載しています。現在、最新のブラウザであれば、ほとんどベンダープレフィックスは必要がなくなりました。Operaに関しては2013年2月にレンダリングエンジンがwebkitに変更したため、-o-はなくりました。
ベンダープレフィックスをつけなくてもよい
PCサイト、モバイルサイトともにベンダープレフィックスは必要ありません。
Internet Explorer未対応
最終バージョンである11でも未対応なプロパティです。
- filter ※Microsoft Edgeは対応
- transform-origin ※Z軸のみ未対応。Microsoft Edgeは対応
- backface-visibility ※Microsoft Edgeは対応
- transform-style ※Microsoft Edgeは対応
- display: flow-root; ※Microsoft Edgeは対応
まとめ
- CSS3は、CSS2.1に続く新しいCSSの仕様。
- ベンダープレフィックスは、先行実装を表すテキスト。
- ベンダープレフィクスは、ブラウザごとに違う。
- ベンダープレフィックスは、ブラウザの種類やバージョンによって付ける必要がない。