تعرف على مكتبة Modernizr
بسم الله الرحمان الرحيم
أهلا وسهلا بكم في كلفين للمعلوميات
Modernizr هي مكتبة جافا سكريبت مصممة للكشف عن ميزات محددة من HTML و CSS في المتصفحات أي معرفة اذا كان المتصفح يدعم هذه المميزات أم لا. فيمكنك مثلا معرفة اذا كان المتصفح الذي يفتح موقعك يدعم ميزات CSS 3D, فيديو HTML5, ال Canvas, ميزة SVG … و حسب معرفتك بالميزة التي لا يدعمها المتصفح يمكنك ابدالها بأكواد أخرى أو تصحيح الأخطاء التي يمكن أن تنجر على ذلك.
كملاحظة فان Modernizr لا تقوم بتعويض النقص الناتج عن عدم دعم المتصفح لميزة ما من ميزات HTML5 و ِCSS3 و انما أنت عليك توليد أكواد لتجنب النقص حسب المعلومات التي توفرها Modernizr و طبعا يمكنك لتحقيق ذلك الاستعانة بمكتبات أخرى حسب الحاجة.
التحميل :
ما تحتاج لتحميله فقط هو ملف modernizr.js و الذي يمكنك تخصيصه من خلال اختيار الميزات التي تريد التأكد من توافقها مع المتصفحات. يمكنك ذلك من خلال اختيار production بعد التوجه لموقع Modernizr كما يظهر في الصورة التالية:
ثم عليك اختيار تلك الميزات كما هو موجود في الصورة التالية ثم اختيار بناء الملف, و هو ما يمكنك من تقليص حجم الملف مما يربحك سرعة أكبر في التحميل
طريقة استعماله :استعماله سهل فقط علبك ادراج ملف modernizr.js في الصفحة و سيقوم Modernizr بإنشاء كائن جافاسكربت عام (Global Object) تحت اسم Modernizr مما يسمح لك بالقيام باستعلامات حول مختلف خواص properties المتعلقة به و ذلك عبر مناداته ب Modernizr.property فمثلا يمكنك القيام بمناداة Modernizr.canvas أو Modernizr.geolocation أو غيرها بحيث تعيد لك true أو false حسب دعم المتصفح لها أم لا.
في المثال التالي سأطرح كود بسيط يتم من خلاله التأكد اذا كان المتصفح يدعم HTML5 Canvas أم لا و سيظهر alert اذا كان المتصفح يدعمها, طبعا الغاية في مشاريعك ليست اظهار ال alert و لكن هنا للتجربة فقط.
1 |
لاحظ أيضا في السطر الأول في ملف HTML آنف الذكر وجود صنف no-js في وسم . يقوم Modernizr باستبدال هذا الصنف بصنف js والذي يُمكن أن يكون له فائدة في ملف CSS الخاص بك. إلى جانب صنف js يُضيف Modernizr أصنافا لكل الخواص التي يدعمها المتصفح، وللخواص التي لا يدعمها يُضيف أصنافا تُسبق أسماؤها بـ no-.
طبعا كانت هذه لمحة بسيطة عن طريقة التعامل مع modernizr و هناك عدة خصائص لم تذكر هنا و لكن هذا فقط درس تعريفي بهذه المكتبة و يمكنك مزيد التعرف عليها من خلال موقعها الرسمي كما أنه قد نتعرض لها في دروسنا التطبقة هنا على الموقع, فتابعونا
