ホーム>Web デザインのチュートリアル>HTMLチュートリアル

Modernizrの使用方法について教えてください

著者：Eve Cole 更新時間：2025-08-23 02:32:01

Modernizrについてはすでに多くの中国の紹介があります。BaiduまたはGu Geを検索できます。 Blue Idealで読むこともできます。この記事は比較的包括的です。HTML5とCSS3のModernizr-Born。

HTML5およびCSS3の基本的な環境判断とセマンティックサポートを提供することに加えて、Modernizrの使用は何ですか？今日一緒に学びましょう。

1. Modernizrを適用することから始めます

この部分については、HTML5およびCSS3のModernizr-Bornで詳細に説明されています。これには、Modernizrの実行後のHTML要素の変化などが含まれます。新しい学生は慎重に読むことをお勧めします。

詳細については、公式ウェブサイトhttp://modernizr.com/docs/に直接アクセスすることもできます。

2。Modernizr.loadの使用

1。jqueryをロードします

まず、公式ウェブサイトにjqueryを読み込む方法とコードを見てみましょう。

  1. Modernizr.Load（[{
  2. 負荷： 'http：//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'、
  3. 完了：function（）{
  4. if（！window.jquery）{
  5. Modernizr.Load（ 'JS/LIBS/JQUERY-1.7.1.min.js'）;
  6. }
  7. }
  8. }]）;

このコードはテストされており、Googleが通常提供しているCDNにアクセスできない場合、ブラウザはエラーを報告し、メッセージは

  1. gethttp：//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404（notfound）
  2. Modernizr.custom.js：4ResourceInterstedasimage-buttransed/x-javascript：js/libs/jquery-1.7.1.min.js。

フィードバック情報から、ローカルjQueryをリロードするときにModernizrによって解析されたファイル形式が正しくないことがわかります。これが起こるかどうかはわかりませんが、これは使用に影響します。すべての中国の検索結果の中で、この現象に関する説明や研究は見つかりませんでした、そして、個人的な能力は限られていたため、深く調査することは不可能でした。 StackoverFlowから一時的なソリューションを手に入れましたが、コードは次のとおりです。

  1. <scriptType = text/javascript> // <！[cdata [
  2. Modernizr.Load（[{
  3. 負荷： 'http：//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'、
  4. 完了：function（）{
  5. if（！window.jquery）{
  6. Modernizr.Load（[{
  7. 負荷： 'js/jquery.min.js'、
  8. コールバック：function（url、result、key）{
  9. //console.log('jqueryonlocalwasloaded！ '）;
  10. init（）;
  11. }
  12. }]）;
  13. }それ以外{
  14. //console.log('jqueryongoglewasloaded！ '）;
  15. init（）;
  16. }
  17. }
  18. }]）;
  19. functionIt（）{
  20. jQuery（document）.ready（function（）{
  21. $（ 'body'）。prepend（ 'helloworld！'）;
  22. }）;
  23. }
  24. //]]> </script>

2。低いバージョンのサポートIEインターセプトされたPNG図

Yepnopejsのドキュメントの説明には、IE用のプラグインの使用に関するセクションがあります！プレフィックス。

ほとんどの場合、フロントエンドインターフェイスの互換性を作成している場合、IEのさまざまなバージョンの詳細を考慮する必要があります。現在、IE6の放棄を強調していますが、ほとんどのクライアントはまだこのバージョンを使用しています。インターフェイスの一貫性を確保するために、通常、次の形式コードを見ることができます。

  1. <！ - [ifltie7]> <htmlclass = ie6> <！[endif] - >
  2. <！ - [ifie7]> <htmlclass = ie7> <！[endif] - >
  3. <！ - [ifie8]> <htmlclass = ie8> <！[endif] - >
  4. <！ - [ifie9]> <htmlclass = ie9> <！[endif] - >
  5. <！ - [if（gtie9）|！（ie）]> <！ - > <！ - <！[endif] - >

これは、HTMLで許可されているフィルタリングのフィルタリングの条件付きフォーマットステートメントです。フィルタリングを通じて、IEのさまざまなバージョンのCSSハッキングをいくつか実現できます。コンテンツのこの部分は、Paulirish.comで読んで学習できます。

透明なPNG図には多くのソリューションがあります。 JSコードセグメントを導入して、Modernizrを介して透明なPNGを解決する試みをいくつか紹介します。特定のコードは次のとおりです。

  1. <scriptType = text/javascript> // <！[cdata [
  2. Modernizr.Load（[[
  3. {
  4. load： 'js/yepnope.ie_prefix.js'、// yepnopeのIE！プレフィックスプラグインをロードします
  5. 完了：function（）{
  6. Yepnope（[{
  7. 負荷： 'ielt8！js/ie_png.js'、//プラグインは、正常に読み込まれた後にのみフィルタリングできます（ie8以下のバージョンにie_png.jsをロード）
  8. 完了：function（）{
  9. ie_png.fix（ 'img'）;
  10. }
  11. }]）;
  12. }
  13. }
  14. ]）;
  15. //]]> </script>

これは興味深い試みです。

3. CSS3またはHTML5に対するブラウザのサポートを決定します

この部分は、Modernizrの基本的な機能です。これらの基本機能を使用して、CSS3またはHTML5の新機能を試すだけでなく、サポートされていない環境で友好的なプロンプトを提供することもできます。次のコードを見てください。

  1. <scriptType = text/javascript> // <！[cdata [
  3. Modernizr.Load（{
  4. テスト：Modernizr.csstransforms3d＆＃038;＆Modernizr.csstransitions、//現在のクライアントが3次元バリアントと勾配遷移をサポートしているかどうかを判断します
  5. YEP：['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js']、//
  6. いいえ： 'CSS/Fallback.CSS'、//フレンドリーなリマインダーに使用される関連スタイルをロードします
  7. callback：function（url、result、key）{//コールバックコンテンツ
  9. if（url === 'js/jquery.hoverfold.js'）{//最後にロードされたjsファイルのパスが同じ場合、アプリケーション
  10. $（ '＃grid'）。hoverfold（）;
  11. }
  13. }
  14. }）;
  16. //]]> </script>

このコードは、3Dサムネイルホバーエフェクトのプレゼンテーションドキュメントの段落からカットされています。著者が作成したチュートリアルを分析して体験することにより、Modernizrの使用の一部を学ぶだけでなく、CSS3の強力で眩しい効果のいくつかを経験することもできます。

上記のコンテンツは依然として非常に大まかに整理されており、目的はそれを使用して、Modernizr（Yepnope）の特性と使用方法を学び、理解することです。同時に、CSS3とHTML5の学習と注意を強化する必要があります。

テキスト全体が終わりました。

関連記事