chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag
2014/10/01

[CSS3]CSS3プロパティ/HTML5のタグのブラウザサポートをチェック出来るサービス「Can I use…」

CSS3/HTML5でのコーディングをする上で必要なのが、各ブラウザの対応状況。
そんな時便利なサービスをご紹介致します。各ブラウザのCSS3/HTML5の対応状況をまとめてくれているサービスです。
スマートフォンのブラウザも網羅しており、一般的なブラウザは揃っていると思います。

CSS3/HTML5のブラウザ対応状況は?

コーディングをしている上で、デザインでCSS3やHTML5のタグを使用できる事があると思います。

その際に調べないといけないのが、各ブラウザのCSS3/HTML5の対応状況です。

そんな時にオススメのサービスが「Can I use…」です!

普段からCSS3/HTML5を使用している方は既にご存知だとは思いますが。。

Can-I-use...-Support-tables-for-HTML5--CSS3--etc

 

このサービスは各ブラウザ(IE8〜/FireFox/Chrome/Safari/Opera/iOS Safari/Opera Mini/Android Browser/Chrome for Android)のCSS3/HTML5の対応状況が書かれています。

使い方はとっても簡単。「Can I use __ ?」の入力部分にCSS/HTMLのプロパティを入れるだけ!

border-radius-ar1

 

上の画像は、CSS3プロパティ「border-radius」の対応状況です。

表の見方はそれぞれのブラウザのバージョンの番号となっており、緑色が対応していて、赤色が未対応(もしくはサポート外)となっています。

svg-ar2

 

こちらが最近ちょこちょこ使われている「SVG」プロパティの対応状況です。

Chrome,Firefoxは基本的にほぼ対応してますね!

IEは11が出ましたが、やはりバグがちょこちょこ出てるみたいで^^;

ですが、CSS3も結構対応してるので後はIE8ユーザーが少なくなる事を祈ってますw

 

いかがでしょうか。

CSS3/HTML5の対応度合いを調べるには非常に有効なので使った事が無い方は一度お試ししてみては?

 

サイトはこちら-> 「Can I use…

 

今後のトレンド

少し本題とはズレますが、CSS3/HTML5の話題としてw

先日「iOS 8」が発表され、その中のアップデートの一つにSafariのWebGL対応というのがWebの中では今話題となっています。

WebGLとは、3DCGをブラウザで表示させるための仕様で、例えば3DCGを使ったキャラクターなどをブラウザ上で360°見回せたり動かしたり・・・

よりコンテンツの表現をアップさせる事が出来ます。

WebGLを使用したサイトを紹介しています -> 圧倒的な3D表現にWebの未来を感じるWebGLを使ったサイト・デモ20選 | 株式会社LIG

まだまだ未発達な部分があり、成長途中ですが今後3Dを使ったコンテンツがより増えて来ると感じています。

 

少しずつWebGLの勉強を始めていきたいと思っています!

オススメのサンプルや書籍があればTwitterで教えて頂けると幸いです^^

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加