ورقة غش Modernizr

[!NOTE] ملاحظة الويب الحديث: كان Modernizr أساسياً خلال مرحلة الانتقال إلى HTML5 و CSS3. يعتمد التطوير الحديث عادةً على @supports في CSS وفحص الواجهات مباشرة ('fetch' in window) في JavaScript.

تكتشف مكتبة Modernizr مدى توفر ميزات الجيل التالي من HTML5 و CSS3 في متصفح المستخدم، مستبدلةً التحقق الهش من User-Agent بفحص موثوق للميزات.

كيف يعمل Modernizr

عند تحميل المكتبة، تُجري اختبارات الميزات وتقوم بما يلي:

1. تضيف فئات مثل .flexbox أو .no-flexbox إلى العنصر الجذر <html>.
2. توفر كائن Modernizr عاماً في JavaScript يحتوي على خصائص منطقية لكل اختبار.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

---

التنسيق الشرطي في CSS

استهدف المتصفحات الداعمة وغير الداعمة مباشرة في أوراق الأنماط:

/* Fallback layout for older browsers */
.no-flexbox .container {
  display: block;
  float: left;
}

/* Modern flexbox layout */
.flexbox .container {
  display: flex;
  justify-content: space-between;
}

---

اكتشاف الميزات في JavaScript

if (Modernizr.geolocation) {
  navigator.geolocation.getCurrentPosition(showMap);
} else {
  showAddressInputFallback();
}

if (Modernizr.localstorage) {
  localStorage.setItem('theme', 'dark');
}

if (Modernizr.webgl) {
  initialize3DCanvas();
}

---

الميزات الشائعة القابلة للاكتشاف

ميزات CSS

• flexbox, cssgrid
• opacity, rgba, hsla
• boxshadow, textshadow, borderradius
• cssanimations, csstransforms, csstransforms3d, csstransitions
• backgroundsize, borderimage, fontface

واجهات HTML5 والتخزين

• canvas, canvastext, webgl
• localstorage, sessionstorage, indexeddb
• geolocation, history, websockets, webworkers
• video, audio, svg, inlinesvg

---

المراجع

• الوثائق الرسمية لـ Modernizr
• MDN: استخدام اكتشاف الميزات