良く利用する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
ベンダープレフィックスのまとめ
ベンダープレフィックスとは、各ブラウザで先行実装/独自拡張された機能を使用するときに利用します。
プロパティの頭に「-moz-」などのブラウザの種類を特定する識別子をつけ、「これが拡張機能である」ということを明記するためのものです。
正式に実装されれば不要なのですが、それまではつけておく必要があります。
主要なブラウザのベンダープレフィックスは以下の通りです。
-ms- | …… | Internet Explorer |
---|---|---|
-webkit- | …… | Google Chrome、Safari |
-moz- | …… | Firefox |
-o- | …… | FirOperafox |
border-radius:丸角
border-radius: 30px;
「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のベンダーサフィックスが必要となります。
opacity:透明度
opacity:0.2;
「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」で代用する必要があります。
Related Posts

Trackback URL
http://webnonotes.com/css/css3/trackback/No Comments Yet