جلبت HTML5 و CSS3 والتقنيات ذات الصلة مثل القماش ومآخذ الويب ميزات مفيدة للغاية يمكن أن تساعد برامج الويب الخاصة بنا على تحسين مستوى جديد. تتيح لنا هذه التقنيات الجديدة إنشاء صفحات متنوعة من النماذج التي يمكن أن تعمل على الأجهزة اللوحية والأجهزة المحمولة باستخدام HTML و CSS و JavaScript فقط. على الرغم من أن HTML5 يوفر العديد من الميزات الجديدة ، إلا أنه ليس من الواقعي استخدام هذه التقنيات الجديدة إذا لم نفكر في الإصدار القديم من المتصفح. تم استخدام الإصدار القديم من المتصفح لسنوات عديدة ، وما زلنا بحاجة إلى النظر في مشكلات التوافق في هذه الإصدارات. المشكلة التي يجب حلها في هذه المقالة هي: عندما نستخدم تقنية HTML5/CSS3 ، كيفية التعامل بشكل أفضل مع مشكلة المتصفحات القديمة التي لا تدعم ميزات HTML5/CSS3.
على الرغم من أنه يمكننا كتابة التعليمات البرمجية لأنفسنا لتحديد ما إذا كان المتصفح يدعم بعض ميزات HTML5/CSS3 ، إلا أن الكود ليس بسيطًا للغاية. على سبيل المثال: كتابة رمز لتحديد أن دفع المتصفح يدعم Canvans ، قد يكون رمزنا مشابهًا لما يلي:
<script> window.onload = function () {if (canvassupported ()) {Alert ('canvas suppored') ؛ }} ؛ وظيفة canvassupported () {var canvas = document.createElement ('canvas') ؛ return (canvas.getContext && canvas.getContext ('2d')) ؛ } </script>إذا كنت ترغب في تحديد ما إذا كانت التخزين المحلي مدعومًا ، فقد يكون الرمز مشابهًا للرمز أدناه ، ولكن من السهل التسبب في الأخطاء تحت Firefox.
<script> window.onload = function () {if (localStoragesUpported ()) {Alert ('Storage Local Storing') ؛ }} ؛ وظيفة localStoragesUpported () {try {return ('localStorage' in window && window ['localStorage']! = null) ؛ } catch (e) {} return false ؛ } </script>أول مثالين هما التحقق من ميزة ما. إذا كان هناك العديد من ميزات HTML5/CSS3 ، فيجب علينا كتابة نسخ متعددة من التعليمات البرمجية للحكم ، ولكن لحسن الحظ ، لا تعتمد هذه الرموز على الطلب. يتيح لك Modernizr تنفيذ الوظائف المعقدة أعلاه مع رمز صغير جدًا. لنلقي نظرة على بعض الميزات المهمة لـ Modernizr:
ابدأ مع Modernizrفي المرة الأولى التي سمعت فيها Modernizr ، اعتقدت أن ذلك يعني التحديث ، ويمكن أن تضيف بعض ميزات HTML5/CSS3 الجديدة إلى المتصفحات القديمة. في الواقع ، لا يقوم Modernizr بذلك ، فهو يساعدنا على تحسين ممارسات التطوير لدينا ، وذلك باستخدام طريقة غير تقليدية للغاية للمساعدة في اكتشاف ما إذا كان المتصفح يدعم بعض الميزات الجديدة ، وحتى تحميل البرامج النصية النصية الإضافية. إذا كنت مطور ويب ، فهو سلاح رائع للغاية بالنسبة لك.
الموقع الرسمي Modernizr: http://modernizr.com ، يمكنك استخدام كلا النوعين من البرامج النصية (إصدار التطوير وإصدار الإنتاج المخصص). يوفر موقع الويب أداة طلب مخصص لإنشاء ميزات الكشف التي تحتاجها فقط ، بدلاً من إصدار كبير وكامل يمكنه اكتشاف كل شيء ، مما يعني أنه يمكنك تقليل البرامج النصية الخاصة بك. الرقم التالي هو واجهة أداة توليد الموقع الرسمي. يمكنك أن ترى أنه يمكن اختيار العديد من HTML5/CSS3 والتقنيات ذات الصلة.
بعد تنزيل البرنامج النصي المخصص الخاص بك ، يمكنك الرجوع إليه مثل ملف JS العادي ، ثم يمكنك استخدامه.
<script src = scripts/modernizr.js type = text/javaScript> </script>عناصر Modernizr و HTML
بعد إضافة مرجع Modernizr ، فإنه يسري على الفور. عند التشغيل ، سيضيف مجموعة من أسماء فئة CSS إلى عنصر HTML. علامة أسماء الفصول هذه التي تتميز بالدعم والتي لا تدعم الميزات في المتصفح الحالي. ستعرض الميزات المدعومة مباشرة اسم ميزة اليوم كصف (على سبيل المثال: Canvas ، WebSockets). الفئة التي تعرضها الميزات غير المدعومة هي اسم لا تمول (على سبيل المثال: no-flexbox). الرمز التالي هو تأثير التشغيل في الكروم:
<html class = js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchang csstransforms3d csstransitions fontface internatedContent Video Audio LocalStorage SessionStorage Webworkers ApplicationCache SVG inlinesvg smil svgclippaths>
الرمز التالي هو تأثير التشغيل تحت IE9:
<html class = JS no-flexbox canvas canvas canvastext no-webgl no-touch no-touch postmessage no-websqldatabase no-indexeddb hashchang NO-CSSSANIMATES NO-CSSCOLURTS NO-CSSGRADIES NO-CSSREPLICES
باستخدام Modernizr ، قد يحدث الكود التالي (أضف اسم NO-JS إلى الفصل):
<html class = no-js>
يمكنك زيارة موقع (http://html5boilerplate.com) لعرض المحتوى المتعلق بـ html5 boilerplate ، أو (http://initializr.com) لعرض المحتوى الأولي للمحتوى ذي الصلة ، وإضافة فئة no-js إلى عنصر HTML ، الذي يخبر المطارق ما إذا كانت JavaScript قد تم دعمها. إذا لم يتم دعمه ، فسيتم عرض NO-JS. إذا تم دعمه ، فسيتم حذف NO-JS. رائع جدا ، أليس كذلك؟
استخدم مع ميزات HTML5/CSS3يمكنك استخدام اسم الفئة التي تم إنشاؤها بواسطة Modernizr مباشرة في عنصر <html> لتحديد السمات المقابلة في ملف CSS الخاص بك لدعم المتصفح الحالي. على سبيل المثال ، يمكن للرمز التالي عرض الظل في متصفح يدعم Shadow Shadow ، ويعرض حدود قياسية في المتصفحات التي لا تدعم:
.boxshadow #mycontainer {border: none ؛ -webkit-box-shadow: #666 1px 1px 1px ؛ -moz-box-shadow: #666 1px 1px 1px ؛} .no-boxshadow #mycontainer {border: 2px Solid Black ؛}لأنه إذا كان المتصفح يدعم المربع ، فسيضيف Modernizr فئة BoxShadow إلى عنصر <html> ، ويمكنك إدارته إلى معرف Div المقابل. إذا لم يكن مدعومًا ، فسيضيف Modernizr فئة عدم وجود boxshadow إلى عنصر <html> ، والذي يوضح حدودًا قياسية. وبهذه الطريقة ، يمكننا بسهولة استخدام ميزات CSS3 الجديدة على المتصفحات التي تدعم ميزات CSS3 ، والاستمرار في استخدام الطريقة السابقة على المتصفحات التي لا تدعمها.
بالإضافة إلى إضافة الفئة المقابلة إلى عنصر <html> ، يوفر Modernizr أيضًا كائنًا عالميًا لـ Modernizr JavaScript ، والذي يوفر خصائص مختلفة للإشارة إلى ما إذا كانت ميزة جديدة مدعومة في المتصفح الحالي. على سبيل المثال ، يمكن استخدام الرمز التالي لتحديد ما إذا كان المتصفح يدعم القماش والتخزين المحلي. من المفيد للغاية أن يتطور العديد من المطورين واختبارهم ضمن متصفحات متعددة النسخ ، ويمكن للجميع توحيد الرمز.
$ (document) .Ready (function () {if (modernizr.canvas) {// إضافة رمز canvas} if (modernizr.localStorage) {// إضافة رمز التخزين المحلي}}) ؛يمكن أيضًا استخدام كائن Modernizr العالمي لاكتشاف ما إذا كانت ميزة CSS3 مدعومة. يتم استخدام الكود التالي لاختبار ما إذا كانت تحويلات الحدود و CSS مدعومة:
$ (document) .Ready (function () {if (modernizr.borderradius) {$ ('#mydiv'). addClass ('BorderRadiusStyle') ؛} if (modernizr.csstransforms) {$ ('#mydiv'). addclass ('transformsstyle') ؛}}) ؛يمكن لبعض ميزات CSS3 الأخرى اكتشاف النتائج ، مثل العتامة ، RGBA ، النصوص النصية ، الرسوم المتحركة CSS ، تحولات CSS ، خلفيات متعددة ، إلخ.
تحميل البرامج النصية للنصوص مع Modernizrفي بعض المتصفحات التي لا تدعم الميزات الجديدة ، لا يوفر Modernizr الطريقة أعلاه لإخبارك ، ولكن أيضًا يوفر وظيفة الحمل للسماح لك بتحميل بعض البرامج النصية لـ Shim/Polyfill لتحقيق الدعم (للحصول على معلومات حول Shim/polyfill ، يرجى زيارة: https://github.com/modernizr/modernizr/wiki/html5-cross-prowser. يوفر Modernizr محمل نص لتحديد وظيفة ، وإذا لم يتم دعمه ، فسيتم تحميل البرنامج النصي المقابل. يمكن أيضًا العثور على نص منفصل على http://yepnopejs.com.
يمكنك استخدام وظيفة Load () Modernizr لتحميل البرنامج النصي ديناميكيًا. تشير سمة اختبار الوظيفة إلى ما إذا كانت مدعومة. إذا تم دعم الاختبار بنجاح ، يتم تحميل البرنامج النصي الذي تم تعيينه بواسطة سمة YEP. إذا لم يتم دعمه ، فسيتم تحميل البرنامج النصي الذي تم تعيينه بواسطة سمة NOPE. بغض النظر عما إذا كان مدعومًا أم لا ، سيتم تحميل البرنامج النصي الذي تم تعيينه بواسطة كلتا السمة. رمز المثال هو كما يلي:
Modernizr.load ({test: Modernizr.canvas ، yep: 'html5canvasavailable.js' ، nope: 'excanvas.js' ، كلاهما: 'mycustomcript.js'}) ؛في هذا المثال ، سيحدد Modernizr ما إذا كان المتصفح الحالي يدعم ميزة قماش. إذا كان مدعومًا ، فسيتم تحميل البرامج النصية html5canvasavailable.js و mycustomscript.js. إذا لم يكن مدعومًا ، فسيتم تحميل excanvas.js (المستخدم للإصدارات قبل IE9) لجعل المتصفح يدعم وظيفة القماش ، ثم تحميل البرنامج النصي myCustomscript.js.
نظرًا لأنه يمكن لـ Modernizr تحميل البرامج النصية ، يمكنك أيضًا استخدام استخدامات أخرى ، على سبيل المثال ، إذا فشل البرنامج النصي لجهة خارجية (مثل Google و Microsoft التي توفر خدمات CDN التي توفر استضافة jQuery) في تحميلها ، يمكنك تحميل ملفات بديلة. الرمز التالي هو مثال على تحميل jQuery الذي توفره Modernizr:
modernizr.load ([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js' ، كاملة: function () {if (! window.jquery) لتحميل و // تنفيذ إذا احتاج.سيقوم هذا الرمز أولاً بتحميل ملف jQuery من Google CDN. في حالة فشل التنزيل أو التحميل ، سيتم تنفيذ الوظيفة الكاملة. أولاً ، حدد ما إذا كان كائن JQeury موجودًا. إذا لم يكن موجودًا ، فسيقوم Modernizr بتحميل ملف JS الأصلي المحدد. إذا لم يتم تحميل الملفات في كاملة بنجاح ، فسيتم تحميل ملف الاحتياجات jquery.js.
تلخيص:تعد Modernizr أداة ضرورية بالتأكيد إذا كنت تستخدم أحدث HTML5/CSS3 لإنشاء برنامجك. باستخدامه ، يمكنك حفظ الكثير من التعليمات البرمجية واختبار العمل ، ويمكنك حتى تنفيذ الميزات الجديدة المقابلة عن طريق تحميل البرامج النصية لبعض المتصفحات التي لا تدعم الميزات الجديدة.
العنوان الأصلي: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx