لا يتم استبدال المتصفحات التقليدية بالكامل في هذا الوقت ، مما يجعل من الصعب عليك تضمين أحدث ميزات CSS3 أو HTML5 في موقع الويب الخاص بك. جاء Modernizr إلى حل هذه المشكلة. كمكتبة JavaScript مفتوحة المصدر ، يكتشف Modernizr دعم المتصفح لميزات CSS3 أو HTML5. لا تحاول Modernizr إضافة ميزات غير مدعومة من قبل المتصفحات القديمة ، ولكنها تتيح لك تعديل تصميم الصفحة عن طريق إنشاء تكوينات نمط اختيارية. يمكن أيضًا محاكاة الميزات التي لا تدعمها المتصفحات القديمة عن طريق تحميل البرامج النصية المخصصة.
Modernizr بسيط للاستخدام ، ولكن ليس كليًا. يعتمد الاستخدام الناجح لـ Modernizr اعتمادًا كبيرًا على مهارات CSS و JavaScript الخاصة بك. يتيح لك هذا الدليل تعلم كيفية تعيين أنماط اختيارية للمتصفحات التي لا تدعم العمود أو الإسقاطات المتعددة. بالإضافة إلى ذلك ، يمكنك معرفة كيفية الحصول على المتصفحات القديمة للتحقق من صحة النماذج التي تستخدم أحدث خصائص HTML5 المطلوبة ، وكيفية تحميل ملفات البرنامج النصي بشكل انتقائي على وظيفة المتصفح.
Modernizr هي مكتبة JavaScript تستخدم لاكتشاف دعم وظائف المتصفح. حاليًا ، من خلال التحقق من معالجة المتصفح لسلسلة من الاختبارات ، يمكن لـ Modernizr اكتشاف 18 وظيفة CSS3 وأكثر من 40 وظيفة حول HTML5. إنه أكثر موثوقية من الطرق التقليدية للكشف عن أسماء المتصفح (استنشاق المتصفح). لا يستغرق وقت تنفيذ مجموعة كاملة من الاختبارات سوى عدد قليل من microseconds. بالإضافة إلى ذلك ، يستخدم موقع Modernizr نصوصًا مخصصة للكشف عن عناصر ذات أهمية فقط ، وبالتالي تحقيق تحسين الكفاءة.
عند استخدام Modernizr للكشف عن دعم CSS3 ، لا تحتاج إلى أي معرفة JavaScript. تحتاج فقط إلى إدراج ملف في صفحة الويب ، وسيقوم بعد ذلك بإضافة مجموعة من الفئات إلى علامة <html> للصفحة وفقًا لوظيفة المتصفح. استوفت أسماء الفئات المقابلة متطلبات التقييس وسهلة الفهم. على سبيل المثال ، إذا كان المتصفح يدعم خاصية Box-Shadow ، فأنت بحاجة إلى إضافة فئة BoxShadow المقابلة ؛ خلاف ذلك ، أضف فئة بدون boxshadow. كل ما عليك فعله هو إنشاء جدول نمط يستخدم هذه الفئات لتوفير النمط المناسب للمتصفح المقابل.
يجعل Modernizr من السهل تنفيذ حلول JavaScript ، والمعروفة باسم polyfills - فهي تحاكي الميزات والتقنيات المتعلقة بـ HTML5 مثل تحديد الموقع الجغرافي. ومع ذلك ، تحتاج إلى فهم أساسي لـ JavaScript من أجل استخدام هذه الميزات والتقنيات. مصطلح Polyfill يأتي من علامة تجارية بريطانية من الطين تملأ الشقوق (أي مادة التعبئة المعروفة للأميركيين). هنا ، يتم استخدام polyfill لملء وظائف المتصفح. في بعض الأحيان يؤدي Modernizr هذه المهمة بسلاسة. ولكن في الأساس ، هذه مجرد وظيفة تصحيح ، لذلك لا يمكنك الاعتماد عليها لإنتاج نفس النتيجة التي حققها متصفح ضعيف.
مثل مكتبات JavaScript الأخرى ، يوفر Modernizr إصدارات التطوير والإنتاج. الفرق الوحيد مقارنة بمعظم المكتبات هو أنه تمت إزالة المساحات والتعليقات من إصدار الإنتاج ، مما يقلل من حجم التنزيلات. Modernizr يأخذ نهجا مختلفا. يمكن تسمية نسخة التطوير بالوعة في المطبخ بمعنى ما - يحتوي على كل شيء تقريبًا. يحتوي إصدار الإنتاج فقط على العناصر التي تختارها ، والتي يمكن أن تقلل بشكل كبير من التنزيلات. في كثير من الحالات ، يمكن تقليل إصدار الإنتاج إلى وعشذ حجم إصدار التطوير.
عند الاختبار مع Modernizr ، أوصيك بتنزيل إصدار التطوير. بمجرد إتقان كيفية عملها وقدراتها ، يمكنك تنزيل إصدار إنتاج مخصص للنشر على موقع الويب الخاص بك.
يحتوي ملف عينة لهذا البرنامج التعليمي على إصدار Development 2.0.6 من Modernizr ، لكنني أقترح عليك استبداله بأحدث إصدار محدث من موقع Modernizr.
ملاحظة: إذا قمت بالنقر فوق رابط التنزيل في قائمة التنقل الرئيسية عن طريق الخطأ ، فسترى عددًا كبيرًا من خانات الاختيار التي تظهر ، تطلب منك تحديد الأداة التي تريدها. تم تعيين هذا للنسخة المخصصة من الإنتاج. انقر فوق الرابط إلى إصدار التطوير في الجزء العلوي من اللوحة ، أو انقر فوق الزر "إعادة" في متصفحك للعودة إلى الصفحة الرئيسية وحدد زر التطوير الموضح في الشكل 1.
كما ذكرنا سابقًا ، لا تحاول Modernizr إضافة ميزات جديدة إلى المتصفحات القديمة ، ولكنها تتيح لك تعويض تلك الميزات المفقودة في أسلوبك. لإظهار كيفية عمل هذا ، يحتوي ملف المثال على صفحة تسمى css_support_begin.html. إذا قمت بتحميل هذه الصفحة في متصفح جديد ، فيجب أن يبدو الشكل 2.
الشكل 2. يعرض Firefox 5 الصفحة بتنسيق متعدد الأعمدة ويضيف الظلال إلى الصورة يتمثل نمط هذه الصفحة في استخدام خصائص column-count box-shadow لـ CSS3 لعرض النص بتنسيق متعدد الأعمدة وإضافة ظلال إلى الصورة. لا تدعم الإصدارات القديمة من المتصفحات أيًا من هذه الخصائص ، وبالتالي فإن نفس الصفحة في Internet Explorer (IE) 7 تبدو مثل الشكل 3.
في IE9 ، تعرض نفس الصفحة ظل الصورة ، لكن النص هو نفس التصميم الموضح في الشكل 3.
ما تأخذه في محاولة تعويض الميزات المفقودة يعتمد على متطلبات مخطط التصميم الخاص بك. سيتضمن الكثير من العمل لمحاولة جعل الصفحة تبدو متشابهة تمامًا في جميع المتصفحات ، ولكن يمكنك إجراء بعض التحسينات البسيطة ، مثل المحيط بالنص المحيط بالصورة ، وضبط الهوامش اليسرى للصورة على النص ، وإضافة حدود غامضة في الحواف السفلية واليمنى للصورة لجعلها تشعر وكأنها أكثر ثلاثية الأبعاد.
يستخدم Modernizr JavaScript للكشف عن الوظائف التي يدعمها المتصفح ، ولكن بدلاً من استخدام JavaScript لتحميل أوراق الأنماط المختلفة ديناميكيًا ، فإنه يستخدم تقنيات بسيطة للغاية لإضافة فئات إلى علامة <HTML> للصفحة. ثم كمصمم ، فإن الأمر متروك لك لتقرر استخدام غلاف CSS لتوفير النمط المناسب للعناصر المستهدفة. على سبيل المثال ، إذا كانت الصفحة تدعم خاصية box-shadow ، فسيضيف Modernizr فئة boxshadow . إذا لم يكن مدعومًا ، فسيتم إضافته مع فئة no-boxshadow كبديل.
نظرًا لأن المتصفحات تتجاهل خصائص CSS التي لا يمكنهم التعرف عليها ، يمكنك استخدام خاصية box-shadow بثقة وفقًا لقواعد الأسلوب الأساسية الخاصة بك ، ومع ذلك فأنت بحاجة إلى إضافة محدد سليدي منفصل للمتصفحات القديمة بالتنسيق التالي:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } فقط المتصفحات التي لا تدعم box-shadow سيكون لها فئة no-boxshadow ، لذلك لن تطبق المتصفحات الأخرى قاعدة النمط هذه.
دعنا نضيف Modernizr إلى صفحة العينة والتحقق من الفصول التي تضيفها إلى علامة <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>يعتمد Modernizr على JavaScript الممكّن في المتصفح. عند تمكينه ، يتم حذف هذه الفئة ديناميكيًا. ومع ذلك ، في حالات نادرة ، لا يزال JavaScript موجودًا في HTML Makup عندما لا يتم تمكينه ، مما يتيح لك إنشاء قواعد نمط خاصة لهؤلاء الزوار إذا لزم الأمر.
</style> <script src=js/modernizr.js></script> </head> ملاحظة: إذا كنت تستخدم لوحة Insert أو قائمة Insert ، فسيضيف DreamWeaver type=text/javascript إلى علامة <script> الأولية. لم يعد هذا مطلوبًا في HTML5 ، لكن الحفاظ عليه لن يسبب أي ضرر.
ملاحظة: إذا كان إصدار DreamWeaver الخاص بك لا يحتوي على رمز مباشر (أو كنت تستخدم محرر HTML مختلف) ، فيمكنك التحقق من الكود الذي تم إنشاؤه باستخدام أدوات التطوير التي توفرها معظم المتصفحات الجديدة أو Firebug التي توفرها متصفحات Firefox.
كما هو مبين في الشكل 4 ، تم استبدال فئة no-js بفئة js ، مما يشير إلى أنه تم تمكين JavaScript.
يسرد الجدول 1 أسماء الفصول التي تستخدمها Modernizr للإشارة إلى دعم CSS3. إذا كانت الوظيفة لا تدعمها ، فسيكون اسم الفئة المقابلة مسبوقة no- .
الجدول 1. وظائف CSS3 التي تم اكتشافها بواسطة Modernizr
ميزات CSS | فئة Modernizr (الخصائص) |
@font-face | fontface |
::before و ::after العناصر الزائفة | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
الرسوم المتحركة CSS | cssanimations |
CSS 2D التحولات | csstransforms |
CSS 3D التحولات | csstransforms3d |
انتقالات CSS | csstransitions |
تصميم مرنة مرنة | flexbox |
التدرجات | cssgradients |
hsla() | hsla |
تخطيط متعدد العمود | csscolumns |
خلفيات متعددة | multiplebgs |
opacity | opacity |
انعكاس | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
بغض النظر عن المكان الذي يتم فيه اختبار سمة CSS محددة ، فإن اسم الفصل واسم الخاصية هما نفسه ، ولكن هذا يتطلب إزالة أي واصلة أو قوسين. تتم تسمية فصول أخرى على بعد وحدة CSS3 التي يشيرون إليها.
انظر الجدول 1 ، يمكنك أن ترى أن Modernizr يستخدم boxshadow و csscolumns لإظهار الدعم لخصائص box-shadow والتخطيط متعدد العمود ، على التوالي. لذلك ، يمكنك استخدام فصول no-boxshadow و no-csscolumns لإنشاء قواعد نمط خاصة للمتصفحات التي لا تدعم هذه الميزات.
لضمان أن يكون التوجيه بسيطًا ، سأعرض مثالًا على إعلانات CSS فقط. يمكنك كتابتها مباشرة في عرض الكود أو استخدام مربع حوار قاعدة CSS الجديد.
.no-boxshadow img . #8A8A8A ). يجب أن تبدو قواعد الأسلوب الناتجة هكذا:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }هذا ليس جذابًا مثل الظلال الشفافة ، ولكن على الرغم من ذلك ، فإنه لا يزال يسمح للصورة بالتردد قليلاً من الخلفية.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . القاعدتان لهما نفس الخصوصية ، لذلك إذا تم عكسهما ، فإن الهامش الأيسر 10 بكسل من .columns img القاعدة الجديدة التي أنشأتها للتو. يمكنك إعادة تسمية .no-csscolumns img إلى .no-csscolumns .columns img لمنحها خصوصية أعلى ، ولكن من الأفضل التأكد من أن المحدد أبسط ، كلما كان ذلك أفضل. (بالمناسبة ، إذا لم تكن متأكدًا من الخصوصية ، تحقق من المقالة التي كتبها Adrian Senior ، فهم الخصوصية. لقد تم نشرها لفترة طويلة ، لكنها ذات قيمة.) في هذا المثال البسيط ، قمت بإنشاء أنماط خاصة للإصدارات الأقدم من المتصفحات باستخدام الفصل المسبق فقط مع no- . ومع ذلك ، من خلال قدرتها ، لا يوجد أي جدوى على الإطلاق لاستخدام كلا الفئتين (مع أو بدون بادئات) لإنشاء أنماط مختلفة لمتصفحك. على سبيل المثال:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }في بعض الأحيان يكون هذا النهج معقولًا ، على سبيل المثال ، إذا كنت ترغب في إنشاء تصميم مختلف تمامًا لكل مستوى من المستويات. ولكن إذا كانت مجرد مسألة توفير أنماط يمكن اختيارها للمتصفحات القديمة ، فلا تنس أن المتصفح يتجاهل الخصائص التي لا يتعرفون عليها. إذا كنت تستخدم فئة Modernizr لجميع الأنماط ، فستكون صفحتك غير معاق تمامًا في متصفح JavaScript.
يضيف Modernizr اسم الفصل لعلامة البداية <html> للعب غرض مزدوج. عندما يتم تحميل الصفحات ، فهي أيضًا أسماء خصائص JavaScript التي تم إنشاؤها بواسطة كائن Modernizr. يسرد الجدول 1 أسماء الفئات والسمات المتعلقة بـ CSS. يسرد الجدول 2 الفئات والسمات المتبقية المتعلقة بـ HTML5 والتقنيات ذات الصلة ، مثل المواقع الجغرافية.
الجدول 2. الميزات المتعلقة بـ HTML5 التي اكتشفها Modernizr
ميزات HTML5 ذات الصلة | فئة Modernizr (الخصائص) |
ذاكرة التخزين المؤقت للتطبيق | applicationcache |
صوتي | audio. type (ogg, mp3, wav, m4a) |
قماش | canvas |
نص قماش | canvastext |
سحب وإسقاط | draganddrop |
شكل سمات الإدخال | input. attributeName |
شكل عناصر الإدخال | inputtypes. elementName |
تحديد الموقع الجغرافي | geolocation |
حدث hashchange | hashchange |
إدارة التاريخ | history |
فهرسة | indexeddb |
مضمنة SVG | inlinesvg |
التخزين المحلي | localstorage |
المراسلة | postmessage |
تخزين الجلسة | sessionstorage |
ابتسم | smil |
SVG | svg |
مسارات مقطع SVG | svgclippaths |
لمس الأحداث | touch |
فيديو | video. type (ogg, webm, h264) |
WebGL | webgl |
مآخذ الويب | websockets |
قاعدة بيانات الويب SQL | websqldatabase |
عمال الويب | webworkers |
في معظم الحالات ، جميع السمات المدرجة في الجدول 1 والجدول 2 إرجاع true أو false . لذلك ، يمكنك اختبار التخزين المحلي باستخدام JavaScript كما هو موضح أدناه:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } ومع ذلك ، من حيث audio video ، فإن قيمة الإرجاع هي سلسلة تشير إلى أن المتصفح قادر على التعامل مع نوع معين من مستوى الثقة. وفقًا لمواصفات HTML5 ، تعني السلسلة الفارغة أن النوع غير مدعوم. إذا تم دعم هذا النوع ، فربما تكون قيمة الإرجاع أو ربما. على سبيل المثال:
if (Modernizr.video.h264 == ) { // h264 is not supported } يضيف HTML5 العديد من خصائص النماذج الجديدة ، مثل autofocus ، والذي يضع المؤشر تلقائيًا في حقل محدد عند تحميل الصفحة لأول مرة. هناك required إلى خاصية مفيدة أخرى ، والتي ستمنع متصفحات HTML5 المتوافقة مع النماذج المقدمة إذا تم ترك حقل مطلوب فارغًا (انظر الشكل 6).
هذا رائع ، لكنه سيتركك مع سؤال: ماذا يجب أن تفعل مع الإصدارات القديمة من متصفحك؟
أحد الحلول هو تجاهلهم وتركهم في وظيفة التحقق من جانب الخادم للتحقق النهائي. إذا لم يتعرف المتصفح على السمة required ، فإن طريقة أخرى سهلة الاستخدام للتعامل مع هذا الموقف هي إنشاء برنامج نصي صغير للتحقق من الحقول المطلوبة. توضح التعليمات التالية كيفية تنفيذ العمليات المقابلة بمساعدة Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> منفصلة ، وإنشاء معالج أحداث بمجرد تحميل الصفحة لتسهيل تنفيذ الكود:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus والخصائص required . طريقة التعامل مع autofocus بسيط:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } يختبر هذا الشرط Modernizr.input.autofocus ، إذا لم يتم دعم autofocus ، فإن القيمة التي تم إرجاعها false . ومع ذلك ، يمكن للمشغل المنطقي لا (علامة تعجب) عكس المعنى ، لذلك إذا لم يتم دعم autofocus ، فإن نتيجة التقييم لهذا الشرط true ، inputs[0].focus() يضع المؤشر في حقل الإدخال الأول.
required غير مدعوم ، أضف الآن رمزًا لتسهيل التحقق من الحقول المطلوبة. الرمز الكامل لمعالج الأحداث هو كما يلي:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } ينتج الرمز الجديد وظيفة عند إرسال النموذج ، يمكنه التكرار من خلال جميع عناصر الإدخال للعثور على الحقول ذات السمات required . عندما يجد حقلًا ، فإنه يزيل الفراغات في البداية وتنتهي من القيمة ، وإذا كانت النتيجة عبارة عن سلسلة فارغة ، فإنها تضيف النتيجة إلى الصفيف required . بعد فحص جميع الحقول ، إذا تم تضمين بعض العناصر في الصفيف ، يعرض المتصفح تحذيرًا يتعلق باسم الحقل المفقود ويمنع تقديم النموذج.
ملاحظة: ذكر Safari 5.1 بشكل غير صحيح أنه يدعم الخاصية required ، لذلك يقدم النموذج دون التحقق من التحقق من الحقول المطلوبة. هذا عيب في رحلات السفاري ، ولكن في Modernizr غير موجود.
عندما تكون مستعدًا لنشر موقع الويب الخاص بك ، يوصى بإنشاء إصدار منتج مخصص من Modernizr يحتوي فقط على العناصر التي تحتاجها بالفعل. هذا يمكن أن يقلل من حجم مكتبة Modernizr من 44 كيلو بايت إلى 2 كيلو بايت وفقًا للوظائف التي حددتها. يظهر نطاق الخيارات الحالية في الشكل 8.
الشكل 8. صفحة تنزيل Modernizr تتيح لك تحديد تلك الميزات التي تحتاجها فقطيمكن تجميع الخيارات بسهولة في الفئات التالية: CSS3 و HTML5 و MISC (Elly) و Extra. انقر فوق زر التبديل بجوار العناوين الثلاثة الأولى لتحديد أو تجاهل جميع خانات الاختيار في فئة التحديد.
بشكل افتراضي ، ستحدد الفئة الإضافية الإدخالات الثلاثة التالية:
إذا قمت بتحديد أي خيار في فئة CSS3 ، فسيتم أيضًا تحديد الخيارات في الفئة الإضافية التالية:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()لا تغيب عن هذه الخيارات. سيؤدي ذلك تلقائيًا إلى إلغاء أي خيارات حددتها في فئة CSS3.
أضاف MQ Polyfill (revieD.JS) في الفئة الإضافية نصًا يسمح باستعلامات الوسائط في IE 6-8 للحصول على دعم محدود. عند تحديد هذا الخيار ، يقوم تلقائيًا بتحديد استعلامات الوسائط و Modernizr.TestStyles (). لمعرفة المزيد حول استفسارات الوسائط polyfill (revieD.js) ، تفضل بزيارة https://github.com/scottjehl/respond.
سوف يهتم المستخدمون المتقدمون فقط بالخيارات الأخرى في الفئة الإضافية. لمزيد من التفاصيل حول ما هي وكيفية استخدامها ، راجع قسم التوسيع في وثائق Modernizr.
يصف الوصف التالي كيفية إنشاء إصدار منتج مخصص من Modernizr لملف العينة. هذا الإصدار المخصص مطلوب للتمارين اللاحقة ، والتي ستوضح كيفية تحميل ملفات JavaScript الخارجية باستخدام Modernizr.load() .
عند إنشاء نسخة إنتاج مخصصة من Modernizr ، يجب تحديد الخيار الذي يحتوي على Modernizr.load() افتراضيًا. Modernizr.load() هو الاسم المستعار لـ yepnope() ، وهو محمل نص مستقل تم تطويره بشكل متزامن مع Modernizr. لتوضيح كيفية استخدامه ، أقدم مثالًا بسيطًا. لقد قمت بنقل البرنامج النصي المقابل من المطلوبة. html إلى check_required.js وقامت بثلاثة تغييرات طفيفة لتسهيل إزالة اختبارات Modernizr وتعيينه إلى متغير يسمى init . يبدو البرنامج النصي المنقح هكذا:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; تتمثل ميزة كبيرة في Modernizr.load() في أنه يمكنها تحميل البرامج النصية بشكل مشروط بناءً على نتائج إمكانيات متصفح الاختبار - ولهذا السبب كان يطلق عليه yepnope() في البداية. يمكنه تحميل البرامج النصية الخارجية بشكل غير متزامن - بمعنى آخر ، يمكنه تحميل البرامج النصية الخارجية بعد أن قام المتصفح بتحميل نموذج كائن المستند (DOM) - لذلك يمكن أن يساعد في تحسين أداء موقع الويب الخاص بك.
بناء الجملة الأساسي لـ Modernizr.load() هو تمرير كائن مع السمات التالية إليه:
test : خاصية Modernizr التي تريد اكتشافها. yep : إذا نجح الاختبار ، فإن موقع البرنامج النصي الذي تريد تحميله. استخدم مجموعة متعددة النصوص. nope : إذا فشل الاختبار ، فإن موقع البرنامج النصي الذي تريد تحميله. استخدم مجموعة متعددة النصوص. complete : وظيفة يتم تشغيلها بمجرد تحميل البرنامج النصي الخارجي (اختياري). كل من yep و nope اختياريان ، طالما أنك تقدم واحد منهم.
من أجل تحميل وتنفيذ البرامج النصية في check_required.js ، تحتاج إلى إضافة كتلة <script> التالية بعد أن تم إرفاق Modernizr.adc.js بالصفحة (يوجد الرمز في المطلوبة. load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> هذا هو نفسه بالضبط كما كان من قبل ، ولكن يمكن أن يقلل من تحميل المستعرضات التي تدعم بالفعل السمة required .
لاختبار شروط متعددة ، يمكنك تمرير مجموعة من الكائنات إلى Modernizr.load() . لمزيد من التفاصيل ، راجع البرنامج التعليمي Modernizr.load () على وثائق Modernizr.
تعد Modernizr أداة قوية ومفيدة ، لكن هذا لا يعني أنه يجب عليك استخدامه. ليست كل الحالات مطلوبة لاستخدام Modernizr لتوفير أنماط متعددة للمتصفح. إذا كان تركيزك الرئيسي هو Internet Explorer ، ففكر في استخدام التعليقات الشرطية. يمكنك أيضًا استخدام مكدس CSS للكتابة فوق بعض الأنماط. على سبيل المثال ، استخدم اللون السداسي عشر أولاً ، ثم تجاوزه مع rgba() أو hsla() . ستستخدم الإصدارات القديمة من المتصفحات القيمة الأولى وتجاهل القيمة الثانية.
يصبح Modernizr حقيقة واقعة عندما يتم دمجها مع البوليفيات وغيرها من JavaScript. ولكن تذكر أنه من السهل عادة إنشاء اختباراتك الخاصة المناسبة لدعم الميزات. على سبيل المثال ، ما يلي هو كل الرمز الذي تختبره ما إذا كان المتصفح يدعم السمة required (يوجد الرمز في المطلوبة _nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }غطى هذا البرنامج التعليمي جميع الميزات الرئيسية لـ Modernizr. لمزيد من المعلومات حول هذه الميزات ، يرجى الرجوع إلى الوثائق الرسمية المقابلة ، والتي تقع في http://www.modernizr.com/docs/. بالإضافة إلى ذلك ، يمكنك العثور على الموارد المفيدة التالية:
yepnope() ، والتي تم دمجها في Modernizr.load() في Modernizr. +