カテゴリー

キーワード

 
> 【CSS3】2015年4月3日現在 よ...

【CSS3】2015年4月3日現在 よく使うCSS3プロパティのブラウザ対応状況と書き方


2015 年 4 月 3 日 投稿    view: 43417
タグ:
このエントリーをはてなブックマークに追加

css3 プロパティ対応状況

こんにちは、WEBマーケティング部の杉尾です。


今回はよく使うCSS3プロパティのブラウザ対応状況と共に、クロスブラウザ対策を紹介します。


各プロパティの詳細については、次回以降紹介していきますので、そちらをご覧ください。



CSS3プロパティが使えるかどうか、どうやって判断する?

CSS3プロパティが使えるかどうか、というのは主要ブラウザがサポートしているかどうかで決まります。


主要ブラウザとは、
デスクトップにおいてはIEChromeFirefoxSafariOperaの5つ
スマートフォンブラウザにおいては、iOS SafariAndroid Browserの2つ
です。


案件によっては切り捨ててよいブラウザもあるでしょうが、Web制作においては普通、これらのブラウザに対応することを求められます。


ブラウザ対応状況を調べるには、Web開発者ご用達のcaniuse.com が便利です。
たとえば『CSS3』で調べてみます。 ⇒  http://caniuse.com/#search=css3


25コの結果が出てきます。
当然、プロパティにより、対応状況が違います。


各プロパティのサポート状況を見ながら、そのプロパティがもう使えそうか、使えそうならベンダープレフィックスをつけるか否かを判断していきます。


ちなみに、W3CのCSS current workのページ


http://www.w3.org/Style/CSS/current-work


を見ると、今、そのプロパティがどの段階にあるかわかります。


WD」(草案段階)のものについては、ベンダープレフィックスをつけておくのが無難ですが、これもブラウザによってサポート状況がまちまちですから、その都度判断してください。


ベンダープレフィックスについてはコチラ ⇒ 【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要)


では、これらのサイトを見ながら、よく使うCSS3プロパティを今現在どう書くべきか判断していきましょう。


IE8は基本的にCSS3プロパティをサポートしていません(Text-overflow、word-breakなどの例外は除く)から、ベンダープレフィックスをつけるつけない以前の問題です。
ですので、ここではひとまず無視して考えます。
IE8でも一部のCSS3プロパティを使えるようにする方法は近いうちに紹介したいと思います。


よく使うCSS3プロパティ

以下、IE8とOpera Miniは無視して話を進めます。
IE8は基本的にCSS3プロパティをサポートしていないからです。
Opera Miniは、シェアがあまりに低すぎるからです。
参考ソース内に.fooと書いていますが、これは特定のセレクタを表すものではありません。英語圏での慣習です。


border-radius

ボックスの角丸を指定するときに使うプロパティですね。
これは主要ブラウザの最新バージョン(どころかその前も)でサポート済みです。
CSS current workでもCR(勧告候補)ですから、ベンダープレフィックスを外すべきです。


.foo {
    border-radius:6px;
}

border-radius ブラウザ対応状況


以上のコードだけ書いておけば大丈夫です。


box-shadow

ボックスに影をつけるプロパティです。
これもborder-radius同様、主要ブラウザの最新バージョン(どころかその前も)でサポート済みです。
CSS current workでもCR(勧告候補)ですから、ベンダープレフィックスを外すべきです。


.foo {
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.4);
}

box-shadow ブラウザ対応状況


ベンダープレフィックスなしで書いてください。


ちなみにbox-shadowの使い方は


box-shadow:横方向のズレ 下方向のズレ ぼかし距離 広がり距離 (任意で)影の色;


です。


opacity

透明度を変化させることのできるプロパティです。
これも上記2つ同様、主要ブラウザでは対応済みです。
CSS current workではREC(勧告)で、既に勧告済みですからベンダープレフィックスを外してください。


.foo {
    opacity:0.6;
}

opacity ブラウザ対応状況


以上の書き方でスタイルが反映されます。


text-shadow

IE9でサポートされていません。
それ以外では大丈夫です。
IE9にも対応させるには、以下のように書いてください。(IE8にも対応します)


.foo {
    display:block;
    filter:dropshadow(color=#0000ff,offX= 3,offY= 3);
    text-shadow: 3px 3px 0px blue;
}

text-shadow ブラウザ対応状況


IE9ではtext-shadowがサポートされていないので、IE独自の『filter』というプロパティを使います。
display:block;をつけているのは対象要素がインライン要素だと反映されないためです。


ちなみにtext-shadowの使い方は


text-shadow:水平方向の距離 垂直方向の距離 ぼかし半径 影の色;


です。


広がり距離(box-shadowのような4つ目の値)はIE10のみで採用されていますので、書かない方が無難です。


animation

IE9では未実装ですので、使えません。
対応させようと思ったら、jQueryなどのJavaScriptを用いるしかありません。


.foo {
    -webkit-animation: anime1 10s ease -2s infinite alternate;
    border-radius:  anime1 10s ease -2s infinite alternate;
}

animation ブラウザ対応状況


Chrome、Safari、Opera、iOS Safari、Android Browserでサポートしていません。
ですので、-webkit-が必要です。
Operaはバージョン15から、-webkit-のベンダープレフィックスで対応しているので、-o-は必要ありません。


animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-modeの各プロパティも同じです。


linear-gradient()

IE9では未実装ですので、使えません。
IE9に対応させる方法に関しては、次回以降に紹介します。


.foo {
   background : -webkit-linear-gradient(top, #fff, #000) ;
   background : linear-gradient(to bottom, #fff, #000) ; 
}

gradients ブラウザ対応状況


Androidでは4.4(2013年10月リリース)から、SafariとiOSは7.0(2013年9月リリース)からの対応ですから-webkit-のみ残しておく必要があります。


radial-gradient()

IE9では未実装ですので、使えません。


.foo {
    background : -webkit-radial-gradient(center center, circle contain, black 0%, blue 25%, green 50%, red 60%, purple 80%, white 100%);
    background : radial-gradient(center center, circle contain, black 0%, blue 25%, green 50%, red 60%, purple 80%, white 100%);
}

gradients ブラウザ対応状況


linear-gradient()と同じく、Androidでは4.4(2013年10月リリース)から、SafariとiOSは7.0(2013年9月リリース)からの対応ですから-webkit-のみ残しておく必要があります。


もし、IE8に対応する必要がある方はbackground-colorプロパティで色を指定してください。
単色での表示になりますが、何も表示されないよりはいいと思います。


まとめ

CSS3のプロパティはまだ沢山あります。
現場でよく使うと判断したら、順次追加していきたいと思います。


また、近いうちにCSS3のプロパティとセレクタをIE8でも使う方法を紹介します。


※書きました。

【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法


それとは別に、今回出てきたプロパティの詳しい使い方も順次説明していくつもりです。


よろしければ、またご訪問ください。

最後までお読みいただき、ありがとうございました。



よろしければ、こちらもどうぞ。


【CSS】CSS3で追加されたセレクタ 19選!!


【CSS3】CSSのanimationで画面に動きを出そう①【概要説明】

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事