مع التطوير السريع لـ HTML5 و CSS3 ، تم تطبيق المزيد والمزيد من العلامات الدلالية والميزات الرائعة على تطوير تطبيقات الويب. بدأ مصنعو المتصفح الرئيسيون في دعم هذه الميزات الجديدة ، ويهتم مطورو الويب أيضًا بتجربة هذه الميزات الجديدة لتطوير تطبيقات أكثر ملونة ومثيرة للاهتمام. ومع ذلك ، فإن مشكلات التوافق في الإصدار الناتجة عن الدعم غير المتكافئ لهذه الميزات الجديدة (وخاصةً IE المثيرة للصداع) هي دائمًا كابوس يبقى في عقول المطورين. إن عادات الاستخدام التقليدية تجعل من الصعب علينا التخلي عن الإصدارات القديمة من المتصفحات ، ويمكن للمطورين اختيار الاختبار اليدوي الممل والاختبار ثم الاختبار.
من أجل حل هذه المشكلة ، جاء Modernizr إلى حيز الوجود. يبدو اسمه يشبه التحديث إلى حد ما ، وبالفعل ، نشأ الاسم من الغرض من جعل تجربة التطوير أكثر حداثة ، ولكنه ليس محاولة لتحديث المتصفح القديم ، أي أنه يدعم هذه الميزات الجديدة (على الرغم من أنه يمكنك بالفعل جعل المتصفح يدعم بعض الميزات الجديدة التي لا تدعمها إضافة SHIM/Polyfill ، كما سيتم تغطيتها لاحقًا).
Modernizr هي مكتبة JS مفتوحة المصدر تكتشف دعم المتصفحات لميزات HTML5 و CSS3. يعتمد موقع توافق متصفح HTML5/CSS3 الشهير FindMeByip على هذا الإطار. يمكننا استخدامه لاكتشاف ما إذا كان المتصفح يدعم بعض الميزات الجديدة ، وحتى تحميل البرامج النصية بالإضافة إلى تلبية احتياجاتك لتحميل ملفات JS المختلفة ديناميكيًا وفقًا لمواقف مختلفة لتقليل التنزيلات وتحسين الأداء.
يوفر Modernizr نسختين: التنمية والإنتاج. يتضمن إصدار التطوير اكتشاف جميع ميزات HTML5 و CSS3 الجديدة ، وهي مناسبة للتعلم والاختبار. للمبتدئين الذين بدأوا للتو في استخدام Modernizr ، توصي Bella باستخدام هذا الإصدار. بمجرد أن تكون على دراية بمبدأ العمل لـ Modernizr ، يمكنك استخدام الإصدار المخصص للإنتاج. يمكنك تنزيل فقط العديد من الميزات التي تحتاجها لاكتشافها لتقليل عدد التنزيلات بشكل كبير ، والتي يمكن أن تحسن بشكل طفيف من أداء البرنامج إلى حد ما. يمكنك تنزيل هذين الإصدارين على http://modernizr.com/download/ ، انقر على رابط إصدار التطوير على الصفحة لتنزيل إصدار التطوير ، أو شاهدت صفحة عرض الميزة التالية
يمكنك التحقق من أي ميزة HTML5 أو CSS3 التي تريد اختبارها ، ولكن بشكل افتراضي ، سيتم تحديد الفئة الإضافية على النحو التالي:
A) HTML5 Shiv V3.6: يضيف نصًا-html5 shim يجبر IE6-8 لتصميم وطباعة عناصر HTML5 بشكل صحيح. إذا كنت تخطط لاستخدام علامات HTML5 الدلالية الجديدة ، مثل <Header> ، <tower> ، <vic> ، <section> ، <article> ، وما إلى ذلك ، فأنت بحاجة إلى تحديد هذا الخيار.
ب) Modernizr.load (yepnope.js): يضيف محمل نص اختياري غير مدرج في إصدار التطوير. يزيد 3 كيلو بايت من التنزيلات ، لذلك إذا لم تكن بحاجة إليها ، فيمكنك التخلي عن اختياره.
ج) إضافة فئات CSS: يضيف فئة Modernizr إلى علامة البداية. إذا كنت ترغب في اكتشاف دعم ميزات CSS3 ، فيجب عليك تحديد هذا الخيار.
طريقة استخدام Modernizr بسيطة للغاية. بعد تنزيل إصدار التطوير ، تحتاج فقط إلى تقديم ملف مكتبة JS في الصفحة ، مثل:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
بعد إضافة مرجع Modernizr ، عند تشغيل برنامج JS ، سيضيف مجموعة من أسماء فئة CSS إلى عنصر HTML. علامة أسماء الفصول هذه التي تتميز بالدعم والتي لا تدعم الميزات في المتصفح الحالي. إذا كان يدعمه ، فسيتم عرض اسم الميزة المقابلة. إذا لم يدعمه ، فسيتم عرض اسم عدم الميزة. على سبيل المثال ، إذا كان المتصفح المكتشف يدعم BoxShadow CSS3 ، فسيضيف Modernizr فئة BoxShadow إلى العلامة ، وإلا ، فسيتم إضافة فئة عدم وجود boxshadow. يوضح الشكل أدناه دعم ميزات HTML5 و CSS3 الجديدة على Chrome 23.0.1271.64.
بعد ذلك ، تحتاج فقط إلى تحديد معلومات النمط المقابلة في ورقة نمط CSS الخاصة بك ، يمكنك تحديدها كما هو أدناه:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px black solid ; |
8 | } |
نظرًا لأن المتصفح يتجاهل ميزة CSS3 غير المدعومة ، إذا كان إصدار المتصفح الحالي لا يدعم خاصية BoxShadow ، فسيتجاهل فئة BoxShadow وبدلاً من ذلك إلى الأنماط المحددة في فئة No-BoxShadow ، مما يوفر لك المنطق المزعج لاكتشاف اسم المستعرض في برنامج JS.
بالطبع ، عندما يتطلب منك سيناريو التطبيق تحديد ما إذا كانت ميزة جديدة مدعومة في البرنامج وإعطاء منطق معالجة مختلف ، يمكنك أيضًا استخدام Modernizr لإصدار الأحكام بسهولة. في هذا الوقت ، تحتاج إلى استخدام كائن عالمي يسمى Modernizr الذي أنشأته Modernizr. المحتوى عبارة عن قائمة بالنتائج المنطقية المقدمة لكل ميزة تم اكتشافها. إذا كان المتصفح يدعم خاصية BoxShadow ، فإن قيمة Modernizr.boxShadow صحيحة ، وإلا فإنها خاطئة. لذلك ، بعد تقديم ملف المكتبة ، يمكنك أيضًا استخدام هذه الطريقة لاكتشاف دعم المتصفح لهذه الميزة. يحتوي كائن JS أيضًا على معلومات أكثر تفصيلاً لوظائف معينة. على سبيل المثال ، سيخبرك Modernizr.Video.h264 ما إذا كان المتصفح يدعم برنامج الترميز الخاص هذا ، وسيخبرك Modernizr.InputTypes.Search ما إذا كان المتصفح الحالي يدعم نوع إدخال البحث الجديد.
بالإضافة إلى ذلك ، إذا كان Modernizr لا يحتوي على الميزات التي تحتاج إلى اكتشافها ، فيمكنك استدعاء وظيفة AddTest المغلفة Modernizr للاختبار. بالنسبة لميزات HTML5 و CSS3 المختلفة ، يمكننا العثور على العديد من وظائف AddTest المكتوبة بالفعل على Github (لسبب ما ، تم حظر Modernizr ، ويتم استضافة المشروع الآن على Github). دعونا نلقي نظرة على مثال بسيط. إذا كنت ترغب في اختبار ما إذا كان المتصفح يدعم GetUsermedia API (API في تقنية Webrtc الجديدة) ، يمكنك كتابة وظيفة AddTest التالية للاختبار:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
أعتقد أنه بعد مقدمة موجزة ، لقد واجهت بالفعل الراحة التي يمكن أن يجلبها Modernizr إلى التنمية. بعد فهم وظائف Modernizr وكيفية استخدام Modernizr ، يمكنك أيضًا تعلم الكثير من المعرفة الجديدة من خلال النظر إلى رمز المصدر الخاص بها وتعرفك على مبادئ التنفيذ. على الرغم من أن Bella هي صاعد في هذا الصدد ، إلا أنها لا تزال تشاركك بعض الخبرة في قراءة الكود المصدري.
ذكرت بيلا الكائن العالمي Modernizr في وقت سابق. كيف يتم إنشاؤها في Modernizr؟ دعونا نلقي نظرة على رمز المصدر التالي:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
يستخدم هذا الجزء من الكود وظيفة غير متزامنة لإنشاء مساحة اسم (على الرغم من عدم وجود مساحة اسم حقيقية في JS) ، وتُرجع الوظيفة كائن Modernizr ، والذي تم تعيينه إلى Window.MorderNizr ، بحيث يمكن لبرامج JS الأخرى استخدام Window.modernizr أو Codernizr. تشير المعلمة التي تم تمريرها عند استدعاء الوظيفة إلى بيئة سياق تنفيذ الوظيفة ، أي الكائن العالمي للنافذة.
كيف يختبر Modernizr مستوى الدعم للميزات الجديدة لـ CSS3؟ اتضح أن Modernizr سيقوم أولاً بإنشاء كائن DOM ، ثم استخدام سمات النمط تحت هذا الكائن لاختبار ما إذا كان يدعم ميزات CSS3 الجديدة. الرمز كما يلي:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
بالنسبة للمتصفح ، سواء كان بإمكانه التعرف على علامة HTML التي تم إنشاؤها حديثًا أم لا ، يمكننا تصميمها ، حتى نتمكن من تصميم العلامة التي تم إنشاؤها حديثًا هنا. لنفترض أننا نريد اختبار ما إذا كان المتصفح يدعم HSLA لتحديد الألوان في CSS ، يمكننا أولاً كتابة نمط باستخدام سمة HSLA المطبقة لوضعها تحت الملصق ، ثم تحقق مما إذا كانت قيمة النمط تحتوي على سلاسل HSLA. إذا لم يدعمه المستعرض ، فلن تكون هناك سلاسل HSLA (لأن إجراء وضع النمط مع سمة HSLA المطبقة على علامة Modernizr لن يكون لهيار المفعول على الإطلاق). يمكننا كتابة الرمز التالي:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
هنا ، نظرًا لأن بعض المتصفحات ستقوم بتحويل تدوين HSLA إلى RGBA ، فإننا نتحقق أيضًا مما إذا كان هناك سلسلة RGBA.
بالنسبة لسمات CSS مع بادئة البائع ، نحتاج إلى إعطاء علاجات مختلفة. بالعودة إلى خاصية BoxShadow ، سيختبر Modernizr ما إذا كان هناك خصائص Boxshadow أو WebKitboxShadow أو MozboxShadow أو Oboxshadow أو MsboxShadow أو KhtmlboxShadow تحت متغير Mstyle الذي تم إنشاؤه أعلاه. إذا كان الأمر كذلك ، فهذا يعني أن المتصفح يدعم هذه الخاصية. هنا نستخدم بشكل أساسي وظيفتين مغلفين في Modernizr ، أحدهما هو TestProp () والآخر هو TestAllProps (). يعيد Modernizr.TestProp (STR) ما إذا كان يمكن التعرف على خاصية نمط معينة ، في حين أن Modernizr.TestAllProps (STR) يعيد ما إذا كان يمكن التعرف على خاصية نمط معينة ، أو ما إذا كان يمكن التعرف على أي خاصية نمط مع بادئة البائع.
لمزيد من معرفة رمز المصدر ، سأقدمها لك بعد أن أجرى بيلا المزيد من الأبحاث المتعمقة في المستقبل. تعتقد بيلا أنه إذا كنت على دراية بمبادئ واستخدام Modernizr ، فسوف يساعدك بالتأكيد على تحسين كفاءة التنمية.
أخيرًا ، تلخص بيلا لفترة وجيزة بعض المواد للجميع للتعلم من Modernizr:
1. موقع Modernizr الرسمي: http://modernizr.com/docs/ يمكنك تعلم المعرفة الحديثة ، رمز المصدر وتنزيل Modernizr منه.
2. URL URL لجناح اختبار Modernizr: http://modernizr.github.com/modernizr/test/index.html يمكنك الاستعلام عن حالة دعم ميزات HTML5 و CSS3 لكل متصفح أعلاه. طريقة الاستعلام:
انقر فوق إظهار اختبارات المرجع من Caniuse و Modernizr في أسفل هذه الصفحة ، ثم انقر فوق أي من روابط الجدول لميزات HTML5 أو CSS3 التي تم اختبارها لرؤية دعم كل متصفح.
3. معلومات نصية/Polyfill ذات الصلة: https://github.com/modernizr/modernizr/wiki/html5-cross-browser-polyfills
4. تنزيل عناوين وظائف AddTest المختلفة التي تكتشف ميزات HTML5 و CSS3 الجديدة:
https://github.com/modernizr/modernizr/tree/master/feature-detects
هذه المقالة من مدونة Tencent Wuhan. يرجى الإشارة إلى المصدر عند إعادة الطباعة