ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」
2009年07月07日-
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を使ったサイトは多くなさそうですが、覚えておくといずれ使えそうですね。
関連エントリ
最新のブログ記事(新着順)
- 個性的な明朝フリーフォント「築豊初号明朝OFL」
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 過去のエントリ