Modernizr

ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」
ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。

Google Ghrome の場合で対応を明示


Firefox 3 の場合で対応を明示


JavaScript では、次のように使えるようです。

if (Modernizr.cssgradients) {
    alert('対応');
} else {
    alert('未対応');
}

cssgradients の他には以下のようなプロパティが利用可能。

Modernizr.canvas
Modernizr.rgba
Modernizr.hsla
Modernizr.multiplebgs
Modernizr.borderimage
Modernizr.borderradius
Modernizr.boxshadow
Modernizr.opacity
Modernizr.cssanimations
Modernizr.csscolumns
Modernizr.cssreflections
Modernizr.csstransforms
Modernizr.csstransitions

同じように、true or false が入っているので簡単に使えます。

CSSで次のように書くこともできるみたい。

body.multiplebgs div p {
   /* multiplebgs 対応のブラウザに適用するCSSをここに書く */
}

body.no-multiplebgs div p {
   /* multiplebgs 非対応のブラウザに適用するCSSをここに書く */
}

まだまだ、CSS3、HTML5を使ったサイトは多くなさそうですが、覚えておくといずれ使えそうですね。

関連エントリ

• ブラウザのCSS対応状況が一発でわかる「CSS Mastergrid」
• CSSのプロパティとJavascriptでのスタイル属性対応表