hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

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

◉ ベンダープレフィックス

"Google Chrome" や "Mozilla Firefox"、"Safari" といった様々なブラウザの

ベンダーがCSS3の拡張機能を実装するのに使用する識別子のこと。

プレフィックス(Prefix)とは「接頭辞」という意味。

CSS3のプロパティの接頭辞として「–webkit-」や「–moz-」を付けて「草案段階(WD:Working Draft)」のCSS3の仕様を先行して実装するときに利用する。

 

◉ 書き方

   【 CSS 】

      section {

           -webkit-box-sizing: border-box;

           -moz-box-sizing: border-box;

           -ms-box-sizing: border-box;

           -o-box-sizing: border-box;

           box-sizing: border-box;

      }

 

ただし、CSS3の勧告候補になったら、

ブラウザ側のベンダーを外すことに推奨されているので、

サポート状況を確認して使用するようにする。

 

◉ サポート状況の確認

仮に、現在ベンダープレフィックスの記述が必要なプロパティであっても、

将来的に不要になるものも出てくる。

ベンダープレフィックスが必要かどうか、利用したいプロパティなどを

実装する時点で各ブラウザの対応状況を確認することが望ましい。

 

 ● Can I use...  ( htttps://caniuse.com/)

「 Can I use... 」のトップページに表示されているテキストボックスに、

利用したいCSSのプロパティ名を入力すると、

ブラウザの対応状況や、

どのブラウザとバージョンでベンダープレフィックスが必要かが、

一目瞭然にわかるようになっている。