東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェアこんにちは、最近あだ名が増えるばかりのおじいちゃんと申します。今回はブラウザ対応で便利な「modernizr.js」を紹介します。modernizr.jsとはmodernizr.jsはJavaScriptのライブラリです。閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。それらを利用して、ブラウザごとの処理を記載することが可能となります。いうことで、さっそく使ってみましょう。ダウンロード下記よりダウンロードが可能です。Modernizrhttp://modernizr.com/modernizr.jsをダウンロードしようとするとチェックボックスが並んでいるページが表示されます。これらの項目はmodernizr.jsを使用することで対応状況を判別できる項目になります。どの機能を判別したいかによって、選択した機能を判別できるJSを生成してダウンロードすることができます。使用している機能だけを選ぶのもいいですし、使用する可能性がある項目をまとめてチェックしておいて使うのもありです。読み込みダウンロードしたmodrnizr.jsを読み込みます。svgclippaths">記載していないはずのclassがHTMLタグに追加されていますね。これがmodernizr.jsの機能になります。閲覧者の使用しているブラウザごとに判別してクラスを付与しているので、追加されたクラスを使うことで、ブラウザの対応状況に応じたCSSを記載することができます。canvasが利用可能な場合は「canvas」とクラス名を付与します。いうクラス名を付与します。JavaScriptでは前述したmodernizrグローバルオブジェクトを生成しているので、このオブジェクトを利用して対応することができます。CSSで利用する方法HTMLタグに付与された、no-機能名のCSSを書いてあげることで対応することができます。生成されたmodernizrグローバルオブジェクトのプロパティに各機能の使用状況が記録されていますので、以下のようにブラウザごとの処理が書けます。//canvasを使用できない場合の処理}その他機能html5shivIE8未満などのHTML5未対応のブラウザで、HTML5から追加されたタグを使用できるようにしてくれますPolyfill最新の機能が利用できないブラウザ向けにJavaScriptなどで同様の機能を扱えるようにするためのものですまとめ以上がmodernizr.jsの使い方になります。modernizr.jsを使って、手間のかかるブラウザ対応を少し簡単にしてみてはいかがでしょうか。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。