HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2019/11/04   hatano

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
  • -moz- … Firefox
  • -ms- … Internet Explorer
  • -o- … Opera

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

下記は、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);
}

2019年現在のベンダープレフィックスの対応状況

2019年11月でのベンダープレフィックスの対応状況です。比較的有名なCSS3のプロパティの対応状況を掲載しています。現在、最新のブラウザであれば、ほとんどベンダープレフィックスは必要がなくなりました。Operaに関しては2013年2月にレンダリングエンジンがwebkitに変更したため、-o-はなくりました。

ベンダープレフィックスをつけなくてもよい

PCサイト、モバイルサイトともにベンダープレフィックスは必要ありません。

-webkit- のみベンダープレフィックスをつける

PCサイトは必要ありませんが、モバイルサイトで必要な場合があります。

Internet Explorer未対応

最終バージョンである11でも未対応なプロパティです。

まとめ

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