كما تعلم ، هناك الكثير لبناء مواقع سريعة الاستجابة بدلاً من العرض. تحتاج إلى مستشعرات تمنحك ملاحظات لتعديل المواقع استنادًا إلى عوامل أخرى.
أفضل طريقة لتحسين تعليقاتنا من مستشعر المستخدم الخاص بك ، أو المتصفح ، هي باستخدام مكتبة جافا سكريبت تسمى Modernizr. في هذا المقال سأشرح لماذا ، عندما تذهب إلى ما وراء العرض ، فإن Modernizr هي أداة لا تقدر بثمن.
في تطوير الواجهة الأمامية ، اعتاد المطورون على ضبط موقع ما ليناسب قيود محرك التصميم المستخدم بواسطة متصفح معين. في عام 2003 ، كان هناك ثلاثة متصفحات فقط: Netscape و Internet Explorer و Opera. تم إصدار Firefox و Safari وأول متصفح للجوّال ، Opera Mini ، بحلول عام 2005. لم يتم إصدار Chrome حتى عام 2008.
يوجد حاليًا خمسة متصفحات رئيسية ، لكل منها إصدارًا خاصًا به. عبر هذه المجموعة من المتصفحات ، هناك أيضًا إصدارات قديمة لم يسبق للمستخدمين ترقيتها. وبنفس الطريقة ، يصبح إنشاء تخطيطات متعددة لأحجام شاشات متعددة في نهاية المطاف لعبة ذات محصلة صفر ، وكذلك الأمر بالنسبة إلى إنشاء عدة نهايات أمامية لمتصفحات متعددة.
نحن نستخدم تصميم الويب سريع الاستجابة لاستيعاب متصفحات الجوال الجديدة والمتطورة. ولكن ، بينما تستوعب متصفحات جديدة ، من المهم عدم القيام بذلك على حساب المتصفحات القديمة.
من الناحية التاريخية ، جاء التحسين كمنتج لبناء موقع للمتصفحات الأكثر شعبية ومن ثم التغيير والتبديل لضمان أن الموقع يبدو نفسه على مجموعة من المتصفحات الشائعة. التصاميم يجب أن تستوعب قدرات جميع المتصفحات.
التحسين التدريجي هو استراتيجية واحدة للتعامل مع فشل المتصفحات في دعم الميزات الحديثة. هناك إغراء للبناء للحصول على أحدث الميزات ، ولكن ، في الويب المتجاوب ، يكون تصميم الموقع سياقًا للإطار الذي يتم عرضه من خلاله. أصبح تصميم الويب المتجاوب شائعًا لأنه يحل أكثر سياق تغيير واضحًا - حجم الإطار - ولكن سياق المتصفح يعمل بشكل أعمق من حجم إطار العرض.
يجعل SVG حلاً رائعًا لشاشات العرض عالية الدقة ، ولكن ماذا عن دعمها في المتصفحات القديمة؟ إنه غير مدعوم في IE 8 أو أقدم ، لذلك عليك بناء احتياطي إذا كنت تدعم هذا المتصفح. يمكنك التعرف على المتصفح وعرض الأنماط البديلة على هذا المتصفح ، ولكن عندئذٍ سيتعين عليك تقديم هذه الأنماط البديلة نفسها لكل متصفح لا يدعم SVG.
ألن يكون من الأسهل فقط كتابة نمط سيتم استخدامه ضد كل متصفح لا يدعم SVG؟ بهذه الطريقة ، لن تضطر إلى مواكبة تقارير الأخطاء من مستخدمي الإصدارات القديمة. هل يمكن فقط تعيين الاحتياط مرة واحدة وننسى ذلك.
تقليديًا ، تم اكتشاف الميزة من خلال اكتشاف وكيل مستخدم المتصفح. يتم ذلك من خلال JavaScript ، باستخدام كائن navigator. يرجع تاريخ كائن navigator إلى أيام Netscape ويستخدم كأداة أفضل مطور في التوافق عبر المتصفحات.
إذا كان لديك Chrome و مكنت DevTools ، فافتح مفتش الويب الخاص بالمتصفح بالنقر بزر الماوس الأيمن على الصفحة وتحديد Inspect Element. ثم ، انقر فوق "وحدة التحكم" ، وبعد علامة الإقحام ، اكتب "navigator.userAgent" ثم اضغط على Enter. سيؤدي هذا إلى إرجاع وكيل مستخدم المتصفح الحالي ، وهو عبارة عن سلسلة من النصوص المستخدمة لتحديد المتصفح قيد الاستخدام. يعرض Chrome ما يلي:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35في الكثير من الطرق ، فإن كائن المستكشف هو واحد من أفضل أجهزة الاستشعار المتوفرة لدينا لإبلاغ نظامنا بما يمكن أن يكون مستخدمنا قادرًا على القيام به ؛ ومع ذلك ، ليست صديقة في المستقبل. إنه يقوم بتشغيل مشغلات موقعك على الكثير من الافتراضات حول ما يفعله المتصفح ولا يدعمه. كما أنه غير موثوق لأنه يمكن للمستخدمين تكوينه للوصول إلى المواقع التي قد لا يتمكن المتصفح من دعمها.
Modernizr هي مكتبة جافا سكريبت تستخدم للكشف عن الميزات في المتصفح. يتم تحميله في رأس صفحتك ويعمل خلال تحميل الصفحة. إن إضافتها إلى موقعك بسيطة مثل إضافة أي مكتبة جافا سكريبت أخرى ، مثل jQuery ، ولكن بمجرد إضافتها ، تمنحك Modernizer قدرًا كبيرًا من التحكم في عرض صفحتك وضمان تقديم تجربة جيدة لكل مستخدم.
بعد تحميل ، يدير Modernizr سلسلة من الاختبارات ضد متصفح المستخدم لتحديد الميزات التي يدعمها المتصفح ويقوم بإنشاء كائن JavaScript الذي يمكنك استخدامه لاختباره. Modernizr لا يخلق الدعم لهذه الميزات ؛ ببساطة يعطيك وسيلة لتوفير الدعم الاحتياطي للميزات الحديثة. على سبيل المثال ، في حالة SVG ، تمكننا Modernizr من توفير صورة احتياطية للمتصفحات التي تفتقر إلى دعم SVG.
يطبق Modernizr أيضًا مجموعة من الفئات على علامة HTML ، مما يمنحك القدرة على تعديل CSS للصفحة باستخدام فئات CSS المقابلة. تتيح لك فصول CSS هذه استخدام أنظمة CSS لإنشاء محركات تعمل على تعديل صفحاتك للسماح بالتحسينات التقدمية المتوفرة للصفحة.
على عكس استخدام وكيل المستخدم ، يقوم Modernizr باكتشاف الميزات مباشرة عن طريق تشغيل سلسلة من اختبارات JavaScript التي تعرض القيم المنطقية (true أو false). يحدد هذا الفئات التي تم تعيينها إلى علامة html وتمنحك القدرة على استخدام JavaScript للكشف عن توفر الميزة.
إن تثبيت Modernizr بسيط مثل الارتباط بمكتبة JavaScript في رأس الصفحة ، لكن حيث تعقّد عملية التثبيت هو إنشاء الإصدار الذي تحتاجه. Modernizr متاح للتنزيل في نسختين ، إصدار التطوير وإصدار الإنتاج.
إصدار التطوير هو كامل 42 كيلو بايت ، ملف غير مضغوط. هذا الإصدار رائع إذا كنت على دراية جيدة بجافا سكريبت وترغب في إدخال بعض التعديلات على الاختبارات التي تقوم بها. نظرًا لأنه غير مضغوط ، فإنه سهل القراءة والتعزيز ، ولكن من الأفضل تركه للمطورين الذين لديهم فهم راسخ لجافا سكريبت.
لأولئك منكم الذين قد لا يكونوا ماهرين في جافا سكريبت ، أو يرغبون في بناء نسخة مخصصة من Modernizr بسرعة ، هذا هو المكان الذي تظهر فيه نسخة الإنتاج الخاصة بالمكتبة. تمنحك أداة إنشاء إصدار الإنتاج في الموقع القدرة على إنشاء إصدار باستخدام الاختبارات التي تحتاجها فقط.
يأتي هذا في متناول اليد عندما تعرف أنك تحتاج فقط إلى مجموعة معينة من الاختبارات. على سبيل المثال ، قد لا يستفيد موقعك من ظلال مربع CSS ، ولكنه قد يحتاج إلى دعم تدرجات CSS. باستخدام أداة الإنشاء ، يمكنك تضمين الاختبارات التي تحتاجها واستبعاد الاختبارات التي لا تحتاج إليها ، مع الحفاظ على تقليم شفرة المصدر ووقت التحميل الإجمالي للمستخدم.
على سبيل المثال ، سأعمل على إصدار التطوير. أجد أنه عندما أقوم بإنشاء موقع ، فمن الأفضل العمل مع النسخة الكاملة وبعد ذلك بمجرد معرفة الميزات التي ستستخدمها في موقعك ، قم بتقليص الإصدار إلى أسفل.
دعونا نفعل بعض الكشف عن ميزة بسيطة مع Modernizr. سنبدأ مع موقع عينة الخام.
دعونا نستخدم هذا الاختبار الصغير لاكتشاف ما إذا كان متصفحنا قادرًا على دعم SVG أم لا. من أجل البساطة ، سنقوم فقط بإضافة علامتي امتداد إلى الصفحة لاكتشاف الدعم.
Huzzah! You have SVG support.BOO! You don't have SVG support.إذا قمت باختبار ذلك في متصفح يدعم SVG ، فسترى الرسالة "Huzzah! لديك دعم SVG. "في حين إذا كان لديك متصفح يفشل في دعم SVG ، فستجد" BOO! ليس لديك دعم SVG. ". رسالة.
هذا المثال بدائي جدًا ، لكنه يعرض الفكرة الأساسية لاستخدام Modernizr لإصلاح مشكلات المتصفح المتقاطع. إذا كنا ننفذ هذا الإصلاح نفسه باستخدام طريقة وكيل المستخدم القديم ، فسيتعين علينا الحصول على ورقة أنماط لكل متصفح لا يدعم SVG وتغيير CSS لكل واحد. (بالنسبة إلى أي شخص مهتم ، فإن المتصفحات الرئيسية الوحيدة التي تفتقر إلى دعم SVG هي Internet Explorer 7 وتحته.)
من خلال إضافة فئة svg / no-svg إلى html في الصفحة ، يحتوي CSS الآن على محدد يمكن استخدامه لتجاوز قواعد CSS الموجودة. نظرًا لأنه في علامة الأصل ، يمكن استخدامه لتجاوز الفئات الأخرى في الصفحة.
لذا ، في هذه الحالة ، يتم إعطاء كل من علامات span: display ؛. إذا لم يكن هناك دعم SVG ، فإن العرض: الإعلان المضمن على علامة span مع الطبقة .no يتجاوز العرض: مخفيًا بفضل قاعدة no-svg في علامة html.
دعونا نجرب مثالا أكثر فائدة من نفس الفكرة. قد نرغب في الحصول على صورة خلفية SVG على الصفحة ، والتي تعود إلى PNG إذا لم يكن المستعرض يدعم SVG. بشكل افتراضي ، سنستخدم صورة PNG. بهذه الطريقة ، لا يتم عرض SVG إلا إذا كانت هناك حاجة إليه وتصبح تحسينًا تقدميًا.
الآن لدينا جمجمة SVG رائعة ستبدو رائعة وواضحة للمستخدمين الذين يتمتعون بشاشات عالية الدقة ، ولا تزال تبدو جيدة للمستخدمين الذين لديهم متصفحات قديمة.
هناك ثروة كبيرة من المعلومات التي يمكن تعلمها عن Modernizr. لقد أوضحنا لك كيفية قيامه بعمل إمكانيات عبر المتصفحات دون الحاجة إلى تذكر قائمة تشغيل من المتصفحات التي تدعم SVG أو الاحتفاظ بها.
وهو يعمل بشكل استثنائي كنظام لخدمة مشغلات المستخدم الخاصة بك لإنشاء مواقع ويب سريعة وعملية للغاية.
هل تستخدم Modernizr في مشاريعك؟ ما الطرق الأخرى التي استخدمتها لتقديم محتوى سريع الاستجابة؟ اسمحوا لنا أن نعرف في التعليقات.
صورة مميزة / صورة مصغرة ، صورة خطوط متباعدة عبر Shutterstock.