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

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

      2018/04/03

CSS3とは

CSS3は、CSS2.1に続く新しいCSSの仕様です。現在も拡張が続いており、各ブラウザもアップデートの度にCSS3が追加されています。
注意したいのInternet Explorerです。8まではCSS3は対応していません。
9は、一部対応です。

ベンダープレフィックスとは

CSS3を使う際に使用するプロパティの前につけるキーワードです。各ブラウザは、CSS3が正式勧告される前に、先行実装という形でCSS3を採用していました。しかし先行実装のため、CSS3が正式に勧告された時に除外されたり、仕様が変わることが考えられるため、各ブラウザの独自プロパティとして、ベンダープレフィックスを付けて差別化する必要がありました。
現在、CSS3のプロパティにベンダープレフィックスをつける必要があるかはブラウザの種類やバージョンごとに違います。また、ブラウザのバージョンが上がることによって、ベンダープレフィックスを取り除いても良いことになるものもあります。ちなみにベンダープレフィックスを外してもよいプロパティに、ベンダープレフィックスが付いていてもエラーにはなりません。
ブラウザごとのCSS3の対応状況やベンダープレフィックスの有無に関しては、Can I useというサイトで確認することができます。

ベンダープレフィックスの種類

ベンダープレフィックスは、ブラウザの種類ごとに下記のキーワードを使います。

  • -webkit- … Google Chrome, Sfari
  • -moz- … Firefox
  • -ms- … Internet Explorer
  • -o- … Opera

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

下記は、border-radiusにベンダープレフィックスをつけた例です。
※現在は、つける必要はありません。

下記は、線形グラデーションの場合です。
グラデーションは、background-imageプロパティの値なので、値にベンダープレフィックスを付けます。
※現在は、Android4.4、iOS7対策で-webkit-のみ使用します。

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

2018年3月でのベンダープレフィックスの対応状況です。
比較的有名なCSS3のプロパティの対応状況をのせています。

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

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

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

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

  • liner-gradient ※Android Browser4~4.3で必要
  • radial-gradient ※Android Browser4~4.3で必要
  • animation ※Android Browser4〜4.4.4、モバイルSafai8, 8.4で必要

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

PCサイトは、IE9とSafai8。モバイルサイトはAndroid Browser4〜4.4.4、モバイルSafai8, 8.4に対応させる場合に必要です。

  • transform

まとめ

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

 - HTML・CSS