応用49. CSS3とベンダープレフィックス

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

ベンダープレフィックスの記述方法

下記は、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-はなくりました。

まとめ

• CSS3は、CSS2.1に続く新しいCSSの仕様。
• ベンダープレフィックスは、先行実装を表すテキスト。
• ベンダープレフィクスは、ブラウザごとに違う。
• ベンダープレフィックスは、ブラウザの種類やバージョンによって付ける必要がない。