الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

أخبرنا عن كيفية استخدام Modernizr

الكاتب：Eve Cole وقت التحديث：2025-08-23 02:32:01

هناك بالفعل العديد من المقدمات الصينية حول Modernizr ، يمكنك البحث من خلال Baidu أو Gu Ge. يمكنك أيضًا قراءتها على Blue Ideal ، هذه المقالة شاملة نسبيًا: المولود في Modernizr لـ HTML5 و CSS3 ؛

ما هي استخدامات Modernizr بالإضافة إلى توفير حكم البيئة الأساسي والدعم الدلالي لـ HTML5 و CSS3؟ دعونا نتعلم ذلك معًا اليوم.

1. ابدأ بتطبيق Modernizr

يتم شرح هذا الجزء بالتفصيل في Modernizr المولود لـ HTML5 و CSS3 ، بما في ذلك التغييرات في عناصر HTML بعد تشغيل Modernizr ، وما إلى ذلك. من المستحسن أن يتمكن الطلاب الجدد من قراءته بعناية.

يمكنك أيضًا الانتقال مباشرة إلى الموقع الرسمي 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. }]) ؛

تم اختبار هذا الرمز ووجد أنه إذا لم تتمكن من الوصول إلى CDN المقدم من Google بشكل طبيعي ، فسيقوم المتصفح بالإبلاغ عن خطأ ، والرسالة هي

  1. gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (notfound)
  2. Modernizr.custom.js: 4ResourceInterPretedAsimageButtransferred مع MimetypeApplication/X-JavaScript: JS/LIBS/JQUERY-1.7.1.MIN.JS.

من معلومات التعليقات ، يمكننا أن نرى أن تنسيق الملف الذي تم تحليله بواسطة Modernizr عند إعادة تحميل jQuery المحلي غير صحيح. لا أعرف ما إذا كان هذا سيحدث ، لكن هذا يؤثر على الاستخدام. من بين جميع نتائج البحث الصينية ، لم يتم العثور على أي تفسير أو بحث حول هذه الظاهرة ، وكانت القدرات الشخصية محدودة ، لذلك كان من المستحيل التحقيق بعمق. لقد حصلت للتو على حل مؤقت من 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. رد الاتصال: وظيفة (url ، النتيجة ، المفتاح) {
  9. //console.log('jqueryonlocalwasloaded! ') ؛
  10. init () ؛
  11. }
  12. }]) ؛
  13. }آخر{
  14. //console.log('jqueryongoglewasloaded! ') ؛
  15. init () ؛
  16. }
  17. }
  18. }]) ؛
  19. وظيفة () {
  20. jQuery (وثيقة). ready (function () {
  21. $ ('body'). prepend ('HelloWorld!') ؛
  22. }) ؛
  23. }
  24. //]]> </script>

2. دعم النسخة السفلية أي مخططات 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) |! (أي)]> <!-> <!-<! [endif]->

هذا عبارة عن بيان تنسيق مشروط لتصفية التصفية المسموح بها في HTML. من خلال التصفية ، يمكننا تحقيق بعض الاختراقات CSS لإصدارات مختلفة من IE. يمكن قراءة هذا الجزء من المحتوى ودراسته في paulirish.com.

هناك العديد من الحلول لمخططات PNG شفافة. فيما يلي بعض المحاولات لتقديم قطاع رمز JS لحل PNG شفاف من خلال Modernizr. الرمز المحدد كما يلي:

  1. <scriptType = text/javaScript> // <! [cdata [
  2. modernizr.load ([[
  3. {
  4. تحميل: 'js/yepnope.ie_prefix.js' ، // تحميل yepnope's ie!
  5. أكمل: function () {
  6. yepnope ([{
  7. تحميل: 'IELT8! js/ie_png.js' ، // لا يمكن ترشيح المكون الإضافي إلا بعد تحميله بشكل طبيعي (تحميل ie_png.js للإصدارات أدناه ie8)
  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 ، // الحكم على ما إذا كان العميل الحالي يدعم المتغيرات ثلاثية الأبعاد والتحولات التدرجية
  5. نعم: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'،js/jquery.hoverfold.js']
  6. لا:
  7. رد الاتصال: وظيفة (url ، النتيجة ، المفتاح) {// محتوى رد الاتصال
  9. if (url === 'js/jquery.hoverfold.js') {// إذا كان مسار آخر ملف JS الذي تم تحميله هو نفسه ، التطبيق
  10. $ ('#grid'). hoverfold () ؛
  11. }
  13. }
  14. }) ؛
  16. //]]> </script>

يتم قطع هذا الرمز من فقرة في وثيقة العرض التقديمي في تأثيرات تحوم المصغرة ثلاثية الأبعاد. من خلال تحليل وتجربة البرامج التعليمية التي ينتجها المؤلف ، لا يمكننا فقط تعلم بعض استخدام Modernizr ، ولكن أيضًا نواجه بعض الآثار القوية والمبهرة لـ CSS3.

لا يزال المحتوى أعلاه منظمًا تقريبًا ، والغرض من ذلك هو استخدامه لتعلم وفهم خصائص وطرق الاستخدام لـ Modernizr (Yepnope). في الوقت نفسه ، يجب علينا أيضًا تعزيز تعلم واهتمام CSS3 و HTML5.

النص كله قد انتهى.

مقالات ذات صلة