Loading article…
 | |
| 原作者 | ファルク・アテシュ |
|---|---|
| 開発者 | ファルク・アテシュ、ポール・アイリッシュ、アレックス・セクストン、ライアン・セドン、パトリック・ケトナー、スチュ・コックス、リチャード・ヘレラ、および寄稿者 |
| 初回リリース | 2009年7月1日[1] |
| 安定リリース | 3.12 / 2022年2月15日[2] |
| リポジトリ |
|
| 書かれた | JavaScript |
| タイプ | JavaScript ライブラリ |
| ライセンス | MIT ; 2010年6月14日[3]から2012年9月15日までMIT - BSDのデュアルライセンスであった[4] |
| Webサイト | 出典: |
Modernizrは、ユーザーのブラウザで利用可能な機能を検出するJavaScript ライブラリです。これにより、Webページは、ブラウザがサポートされていないことをユーザーに通知したり、ポリフィルをロードしたりすることで、サポートされていない機能を回避できます。Modernizrは、失敗しやすいブラウザスニッフィングの使用を抑制し、一貫性があり使いやすい方法で機能検出を提供することを目指しています。[5]
概要
HTML5とCSS 3 の多くの機能は、少なくとも 1 つの主要ブラウザで既に実装されています。[要出典] Modernizr は、ユーザーのブラウザが特定の機能を実装しているかどうかを判断します。[6] [7] [8] [9]これにより、開発者はブラウザがサポートする新しい機能を活用しながら、サポートされていないブラウザ用のフォールバックを作成できます。2010 年と 2011 年の両方で、Modernizr は .net Award の Open Source App of the Year を受賞し、2011 年には、その主任開発者の 1 人であるPaul Irishが Developer of the Year 賞を受賞しました。[10]
関数
Modernizr は、ブラウザのプロパティをチェックするのではなく、機能検出を使用して、ブラウザで何ができて何ができないかを判別します。同じレンダリング エンジンが、そのエンジンを使用する 2 つの異なるブラウザで必ずしも同じ機能をサポートするとは限らないため、機能検出の方が信頼性が高いとみなされます。さらに、ブラウザに必要な機能があるにもかかわらず、特定のユーザー エージェント設定を持つブラウザの機能をブロックする Web サイトを回避するために、ユーザー エージェント文字列を変更するユーザーもいます。
Modernizr は 250 を超える機能のテストを提供し、これらのテストの結果をブール値プロパティとして含むJavaScriptオブジェクト (「Modernizr」という名前) を作成します。また、ネイティブでサポートされている機能とサポートされていない機能に基づいて、 HTML要素にクラスを追加します。
機能検出テストを実行するために、Modernizr は多くの場合、要素を作成し、その要素に特定のスタイル命令を設定して、すぐにその設定を取得しようとします。命令を理解するWeb ブラウザーは意味のある値を返しますが、理解しないブラウザーは何も返さないか、「未定義」を返します。Modernizr は結果を使用して、その機能が Web ブラウザーでサポートされているかどうかを評価します。[引用が必要]
ドキュメント内の多くのテストには、特定のテストを Web 開発ワークフローでどのように使用できるかを示す小さなコード サンプルが付属しています。
ランニング
実行すると、検出できる各機能のブール型プロパティのセットを含む Modernizr というグローバル オブジェクトが作成されます。たとえば、ブラウザーがキャンバス API をサポートしている場合、Modernizr.canvas プロパティは true になります。ブラウザーがキャンバス API をサポートしていない場合、Modernizr.canvas プロパティは false になります。
if ( Modernizr . canvas ) { // 図形を描いてみましょう...! } else { // ネイティブのキャンバス サポートは利用できません :( }
制限事項
このライブラリは単なる機能検出方法であり、古いブラウザに欠けている機能を追加するものではありません。[11]
例
Modernizr JavaScript の例
<!DOCTYPE html>
< html class = "no-js" lang = "en" >
< head >
< title > Modernizr - JavaScript の例</ title >
</ head >
< body >
< p id = "result" > JavaScript が有効になっていないと、Modernizr は実行されません。</ p >
</ body >
< script src = "path/to/modernizr.js" ></ script >
< script >
elem = document . getElementById ( 'result' ); if ( Modernizr . websockets ) { elem . innerHTML = 'お使いのブラウザは WebSocket をサポートしています。' ; } else { elem . innerHTML = 'お使いのブラウザは WebSocket をサポートしていません。' ; } </ script > </ html >
CSSの例
<!DOCTYPE html>
< html class = "no-js" lang = "en" >
< head >
< title > Modernizr - CSS の例</ title >
< style >
. wsno 、. wsyes 、. js . no-js { display : none ; } /* Modernizr は 、ユーザーのブラウザーで WebSocket がサポートされているかどうかに基づいて、次のいずれかのクラスを HTML 要素に追加します。 */ . no-websockets . wsno 、. websockets . wsyes { display : block ; } </ style > </ head > < body > < p class = "wsno" >ブラウザーは WebSocket をサポートしていません。</ p > < p class = "wsyes" >ブラウザーは WebSocket をサポートしています。</ p > < p class = "no-js" > JavaScript が有効になっていないと、Modernizr は実行されません。</ p > </ body > < script src = "path/to/modernizr.js" ></ script > </ html >
参照
.svg/500px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
参考文献
- ^ Faruk Ateş (2009 年 7 月 1 日). 「Modernizr を誇りを持って発表します」.
- ^ “Releases · Modernizr/Modernizr”. GitHub . 2022年9月7日閲覧。
- ^ 「Modernizr 1.5: 新機能、単体テストの追加」。Modernizr。2010 年 6 月 14 日。2013年7 月 30 日閲覧。
- ^ 「BSD ライセンスを削除し、readme を改善」。GitHub。2012年 9 月 15 日。2013 年7月 30 日閲覧。
- ^ 「What is Modernizr」 。 2019年12月25日閲覧。
- ^ Faruk Ateş (2010 年 6 月 22 日)。「Modernizr で HTML5 と CSS3 を活用する」。
- ^ Gil Fink (2011 年 1 月 10 日)。「Modernizr を使用した HTML5 機能の検出」。
- ^ Daniel Sellergren (2011 年 2 月)。「Modernizr を使用して HTML5 CSS3 のサポートを確認する」。2013 年 8 月 22 日時点のオリジナルよりアーカイブ。
- ^ David Powers. 「Modernizr を使用して HTML5 および CSS3 ブラウザーのサポートを検出する」。
- ^ .net Awards 2011:#7. オープンソース アプリ オブ ザ イヤー: Modernizr 2.0、#16. 開発者 オブ ザ イヤー: Paul Irish
- ^ 「IE の HTML 5 要素」 。2012年 6 月 14 日閲覧。
外部リンク
- 公式サイト