おしい県でWebに携わって働く人のブログ

基本的にはIT&Web界隈に関する役に立ちそうなことをまとめていきます。

HTML5やCSS3を使ってサイトを制作する場合には必須のサイト「caniuse.com」

f:id:lord_cashew:20140126231319p:plain

caniuse.com」はHTML5やCSS3等の各ブラウザの対応状況を確認することができるとても便利なサイトです。 

 

例えばCSS3の「Box-shadow」の場合

f:id:lord_cashew:20140126225910p:plain

上の画像が各ブラウザの各バージョンにおける「Box-shadow」の対応状況です。

ピンク色の項目は対応していないブラウザ・バージョンを表しているので「IE8.0」と「OperaMini5.0-7.0」は「Box-shadow」に未対応ということになります。

ちなみに、バージョンの下に小さい文字で「-webkit-」などと記述してある場合にはスタイルシート(CSS)を記述する際に「ベンダープレフィックス(-webkit-等)」を記述する必要があります。上記画像の「Box-shadow」の場合だと「iOS 3.2、4.0-4.1、4.2-4.3」と「Android 2.1、2.2、2.3、3.0」には「ベンダープレフィックス」の記述が必要になります。

 

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

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。

(HTMLクイックリファレンス「ベンダープレフィックス-CSSの基本」を参照)

 

主要ブラウザの「ベンダープレフィックス」

-webkit- ・・・ Google Chrome / Safari
-moz- ・・・ Firefox
-o- ・・・ Opera
-ms- ・・・ Internet Explorer

(HTMLクイックリファレンス「ベンダープレフィックス-CSSの基本」を参照)

 

*追記* 
HTML5とCSS3を勉強するのにオススメの書籍です。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。