良く利用する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プロパティ
  1. ベンダープレフィックスのまとめ
  2. border-radius:丸角
  3. box-shadow:ボックスに影を付ける
  4. transform:傾き
  5. opacity:透明度
  6. linear-gradient:グラデーション

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

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

プロパティの頭に「-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」で代用する必要があります。

divider

Trackback URL

http://webnonotes.com/css/css3/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>