良く利用するCSS3プロパティのクロスブラウザ対応まとめ

html5-css3-plain-logos By: Nelson Felix Giga

CSS3では、丸角や影をつけたりと今まで出来なったリッチなUIが作れるようになりました。

しかし、まだ全てのブラウザで完全に実装されていないため、ベンダープレフィックスや独自のプロパティが必要となってきます。

そのため、CSS3で良く利用するプロパティの使い方をまとめて見ました。

対応ブラウザのバージョン

Internet Explorer 9 / 10 / 11
Firefox 29
Google Chrome 34
Safari 5
Opera 12

CSS3プロパティ

ベンダープレフィックスのまとめ
border-radius：丸角
box-shadow：ボックスに影を付ける
transform：傾き
opacity：透明度
linear-gradient：グラデーション

ベンダープレフィックスのまとめ

ベンダープレフィックスとは、各ブラウザで先行実装/独自拡張された機能を使用するときに利用します。

プロパティの頭に「-moz-」などのブラウザの種類を特定する識別子をつけ、「これが拡張機能である」ということを明記するためのものです。

正式に実装されれば不要なのですが、それまではつけておく必要があります。

主要なブラウザのベンダープレフィックスは以下の通りです。

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

-ms-	……	Internet Explorer
-webkit-	……	Google Chrome、Safari
-moz-	……	Firefox
-o-	……	FirOperafox

border-radius：丸角

border-radius: 30px;

「border-radius」には、ベンダーサフィックスは不要です。

既に主要なブラウザでは、実装済みためそのまま利用できます。

border-radius

box-shadow：ボックスに影を付ける

box-shadow: 1px 1px 5px 0px;
-webkit-box-shadow: 1px 1px 5px 0px #000;

「box-shadow」は、IE / Firefox / Opera / Chromeでは有効でした。

Safari 5では、まだ未対応なのでwebkitのベンダーサフィックスが必要となります。

transform：傾き

transform:rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);

「transform」は、IE / Firefoxでは有効でした。

Opera / Chrome / Safariでは、まだ未対応なのでOpera用とwebkitのベンダーサフィックスが必要となります。

transform

opacity：透明度

opacity:0.2;

「opacity」は、主要なブラウザで実装済みなためベンダーサフィックスは不要です。

opacity

linear-gradient：グラデーション

background: -o-linear-gradient(top, #00A8FF, #74b5cd);
background:-webkit-gradient(linear, left top, left bottom, from(#00A8FF), to(#74b5cd));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A8FF', endColorstr='#74b5cd', GradientType=0)";
background: linear-gradient(to bottom, #00A8FF, #74b5cd);

「linear-gradient」は、まだまだ未実装のブラウザが多くベンダーサフィックスが必要でした。

Opera用, webkit用のほかに、IEは9のみ対応していないため「-ms-filter」で代用する必要があります。