مودرنيزر

📅 آخر تحديث: ١ أغسطس ٢٠٢٦
✍️ نُشر في: ١ أغسطس ٢٠٢٦
📷 يحتوي على 1 صور
الموسوعة الحرة

Modernizr هي مكتبة جافا سكريبت تكشف عن الميزات المتوفرة في متصفح المستخدم . وهذا يسمح لصفحات الويب بتجنب الميزات غير المدعومة عن طريق إعلام المستخدم بأن متصفحه غير مدعوم أو تحميل مكتبة بديلة (polyfill) . تهدف Modernizr إلى توفير كشف الميزات بطريقة متسقة وسهلة الاستخدام، مما يقلل من استخدام تقنيات فحص المتصفح المعرضة للأخطاء . [ 5 ]

ملخص

العديد من ميزات HTML5 و CSS3 مُدمجة بالفعل في متصفح رئيسي واحد على الأقل . يحدد Modernizr ما إذا كان متصفح المستخدم يدعم ميزة معينة. [ 6 ] [ 7 ] [ 8 ] [ 9 ] يتيح هذا للمطورين الاستفادة من الميزات الجديدة التي تدعمها المتصفحات، مع توفير حلول بديلة للمتصفحات التي لا تدعمها. في عامي 2010 و2011، فاز Modernizr بجائزة .NET لأفضل تطبيق مفتوح المصدر، وفي عام 2011، فاز أحد مطوريه الرئيسيين، بول آيرش، بجائزة مطور العام. [ 10 ]

وظيفة

يستخدم Modernizr تقنية الكشف عن الميزات، بدلاً من فحص خصائص المتصفح، لتحديد إمكانيات المتصفح وحدوده. ويعتبر Modernizr الكشف عن الميزات أكثر موثوقية، إذ قد لا يدعم محرك العرض نفسه بالضرورة نفس الميزات في متصفحين مختلفين يستخدمان هذا المحرك. إضافةً إلى ذلك، يقوم بعض المستخدمين بتغيير سلسلة وكيل المستخدم لتجاوز المواقع التي تحظر ميزات معينة للمتصفحات ذات إعدادات وكيل مستخدم محددة، على الرغم من امتلاك متصفحاتهم للقدرات اللازمة.

يُجري Modernizr اختبارات الميزات في المتصفح ويخزن النتائج في كائن JavaScript عام يُسمى Modernizr. كما يُضيف فئات مُطابقة إلى العنصر الجذر، بحيث يُمكن لـ JavaScript وCSS استخدام مسارات برمجية مُختلفة اعتمادًا على ما يدعمه المتصفح. [ 11 ] [ 12 ]<html>

تتطلب بعض اختبارات Modernizr أكثر من مجرد فحص بسيط للخصائص. في هذه الحالات، يمكن لـ Modernizr إنشاء عناصر مؤقتة أو حقن أنماط اختبارية، ثم التحقق من كيفية تعامل المتصفح معها. يتيح ذلك اكتشاف دعم الميزات التي لا تظهر إلا من خلال سلوك DOM أو CSS الفعلي. [ 13 ]

تأتي العديد من الاختبارات في الوثائق مصحوبة بعينة صغيرة من التعليمات البرمجية لتوضيح كيفية استخدام اختبار معين في سير عمل تطوير الويب .

جري

عند تشغيله، يُنشئ كائنًا عامًا يُسمى Modernizr يحتوي على مجموعة من الخصائص المنطقية لكل ميزة يمكنه اكتشافها. على سبيل المثال، إذا كان المتصفح يدعم واجهة برمجة تطبيقات Canvas، فستكون قيمة الخاصية Modernizr.canvas صحيحة. أما إذا كان المتصفح لا يدعم واجهة برمجة تطبيقات Canvas، فستكون قيمة الخاصية Modernizr.canvas خاطئة.

إذا كان ( Modernizr.canvas ) { // لنرسم بعض الأشكال...! } وإلا { // لا يوجد دعم أصلي للوحة الرسم :( }

القيود

المكتبة هي ببساطة طريقة لاكتشاف الميزات، وعلى هذا النحو، فهي لا تضيف وظائف مفقودة إلى المتصفحات القديمة . [ 14 ]

أمثلة

مثال جافا سكريبت لـ Modernizr

<!DOCTYPE html> < html class = " no -js" lang = " en" > <head> <title> Modernizr - مثال جافا سكريبت < / title > </head> <body> < p id = " result " > لن يعمل Modernizr إذا لم تكن جافا سكريبت مُفعّلة. < / p > </body> < script src = " path /to/modernizr.js" > </script> <script> elem = document.getElementById ( ' result ' ) ; if ( Modernizr.websockets ) { elem.innerHTML = ' متصفحك يدعم WebSockets . ' ; } else { elem.innerHTML = ' متصفحك لا يدعم WebSockets . ' ; } </script> </html>

مثال CSS

<!DOCTYPE html> < html class = " no-js" lang ="en"> <head> <title>Modernizr - مثال CSS</title> <style> .wsno, .wsyes, .js .no - js { display : none ; } / * سيضيف Modernizr أحد الفئات التالية إلى عنصر HTML بناءً على ما إذا كان متصفح المستخدم يدعم WebSockets أم  لا. */ .no - websockets .wsno , .websockets .wsyes { display : block ; } </style> </head> <body> < p class = " wsno " > متصفحك لا يدعم WebSockets. </p> < p class = "wsyes" > متصفحك يدعم WebSockets. </p> < p class = "no-js" > لن يعمل Modernizr إذا لم يتم تمكين جافا سكريبت . < / p > </p> </body> < script src = " path / to / modernizr.js " > </script> </html>​

انظر أيضاً

مراجع

  1. ^ فاروق أتيش (1 يوليو 2009). "نعلن بكل فخر عن التحديث" .
  2. ↑ "الإصدارات · Modernizr/Modernizr" . GitHub . تم الاطلاع عليه بتاريخ 6 ديسمبر 2024 .
  3. ↑ "Modernizr 1.5: ميزات جديدة، إضافة اختبارات الوحدة" . Modernizr. 14 يونيو 2010. تم الاطلاع عليه في 30 يوليو 2013 .
  4. ↑ "إزالة ترخيص BSD وتحسين ملف التعليمات" . GitHub . 15 سبتمبر 2012. تم الاطلاع عليه في 30 يوليو 2013 .
  5. ↑ "ما هو Modernizr؟" . تم الاطلاع عليه بتاريخ 25 ديسمبر 2019 .
  6. ↑ فاروق أتيش (22 يونيو 2010). "الاستفادة من HTML5 و CSS3 مع Modernizr" .
  7. ↑ جيل فينك (10 يناير 2011). "الكشف عن ميزات HTML5 باستخدام Modernizr" .
  8. ↑ دانيال سيلرغرين (فبراير 2011). "استخدام Modernizr لتحديد دعم HTML5 CSS3" . مؤرشف من الأصل بتاريخ 22 أغسطس 2013.
  9. ↑ ديفيد باورز. "استخدام Modernizr للكشف عن دعم المتصفح لـ HTML5 و CSS3" .
  10. ↑ جوائز .NET لعام 2011: #7. تطبيق العام مفتوح المصدر: Modernizr 2.0، #16. مطور العام: بول أيريش
  11. ↑ "ملف تعليمات Modernizr" . GitHub . Modernizr . تم الاطلاع عليه في 4 مايو 2026 .
  12. ↑ أتيش، فاروق (22 يونيو 2010). "الاستفادة من HTML5 وCSS3 مع Modernizr" . A List Apart . تم الاطلاع عليه في 4 مايو 2026 .
  13. ↑ "وثائق Modernizr" . Modernizr . تم الاطلاع عليه بتاريخ 4 مايو 2026 .
  14. ↑ "عناصر HTML 5 في متصفح إنترنت إكسبلورر" . تم الاطلاع عليه بتاريخ 14-06-2012 .