HTML 5 サイト制作を助けてくれるヘルパーJavaScript ライブラリModenizr を導入しました。
http://www.modernizr.com/
HTML 5 サイトを作るには、このCSS プロパティに対応してるかとかこのタグに対応してるかとかブラウザ判別しなくてはいけないことがちょくちょく発生します。
Modenizr はブラウザの機能を判別しその結果を html タグにクラスとして書出してくれます。
ただこれだけの単純・簡潔な機能を実装しているJavaScriptライブラリです。
以下のような感じでClassを設定してくれます。
<html dir="ltr" lang="ja" class=" js flexbox canvas canvastext no-webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg no-inlinesvg smil svgclippaths"> |
後は対応しているブラウザとそうでないブラウザ向けにCSSを設定するだけです。
ハックを使う必要がありません。
複数背景対応かどうかでCSSを切り分ける例。
.multiplebgs div p { /* properties for browsers that support multiple backgrounds */ } .no-multiplebgs div p { /* optional fallback properties for browsers that don't */ } |
ドキュメントによればあらかじめ
<html class='no-js'> |
としておくとJavaScript未対応の場合にも対応できるそうです。
Modenizrが働けば設定しておいた'no-js'は'js'に置換えられます。
詳細はDocumentをご覧になって下さい。
Modenizr Document
ソースはgithubにもホストされています。
https://github.com/Modernizr/Modernizr