باستخدام Normalize.css للتنمية متجانسة

يعد توافق المتصفح جزءًا كبيرًا من إمكانية الوصول على الويب. المطورين بحاجة إلى النظر في اختلاف جمهورها وإصدارات المتصفح التي تتطلب الدعم. على الرغم من أن إعادة تعيين CSS تعد خيارًا ، إلا أن معظم المطورين يفضلون Normalize.css لبساطته وتوافقه المتبادل في جميع متصفحات الويب الحديثة.

في هذا المنصب سأغطي أساسيات Normalize ومقارنتها بإعادة تعيين CSS العامة. هذه ليست مكتبة معقدة ويجب ألا يستغرق الأمر أكثر من بضع ساعات لفهمها. لكن مفتاح التطبيع هو التعلم ماذا لتنفيذه بشكل صحيح وحكيم.

إعادة ضبط المتصفح مقابل التطبيع

لسنوات ، استخدمت نسخة مخصصة من إعادة تعيين CSS لإريك ماير. كانت هذه كافية لمعظم مشاريعي ولم تسبب أي مشاكل كبيرة. ومع ذلك ، غيّر Normalize وجهة نظري لإعادة التعيين لأنه يعمل بشكل مختلف عن إعادة تعيين CSS. من المهم أن تفهم الاختلافات.

التفكير في تطبيع باعتباره الملابس المطبقة باستمرار على جميع المتصفحات, والتفكير في إعادة تعيين CSS كإنفجار نووي حراري عبر جميع المتصفحات.

قم بتطبيع الأنماط وتنسيقات العناوين والفقرات والألقاب والعناصر الشائعة بحيث تبدو متطابقة (أو قريبة بما فيه الكفاية) في جميع المتصفحات المدعومة. إعادة تعيين CSS تمامًا لمسح اللوح النظيف تمامًا لا الافتراضات من اجل اي شي.

مع إعادة تعيين CSS ، يمكن أن تبدو عناوينك بنفس شكل فقراتك ؛ لا تحتوي العناصر على حشوة أو هوامش أو تباعد من أي نوع. مع إعادة تعيين CSS يجب عليك توفير رمز جديد لتعزيز الاسلوب. مع تطبيع تحصل على نمط المصممة مسبقا والتي يمكن البناء عليها.

فهل واحدة من هذه أفضل من الآخر؟ إنه موضوع مثير للجدل ، على الرغم من أن نقطة واحدة من الحجة تنص على أن التطبيع يعمل بشكل أفضل من أجل التوافق وينتج أحجام ملفات أصغر.

“أود أن أقول إن التطبيع أفضل من إعادة الضبط. سينتج عن ذلك نقل عدد أقل من CSS عبر السلك ، وتحسين استخدام افتراضيات UA ، وفهم أفضل لكيفية العناصر مقصود لعرضهم.”

سواء كنت تحبّ التطبيع أو تفضل إعادة ضبط نموذجي ، من المهم أن تفهم كلا الجانبين على الأقل وتختار ما يناسبك. يبدأ عدد قليل جدًا من المطورين في الترميز من البداية ، لذا فإن التطبيع أو إعادة تعيين CSS مطلوب تقريبًا لتطوير الواجهة الأمامية الحديثة.

إذا كنت ترغب في تجربة إعادة تعيين CSS ، فإليك بعض الخيارات الشائعة:

إريك ماير إعادة تعيين
إعادة تعيين HTML5
إعادة تعيين HTML5

تطبيع التكوين

كتب تطبيع المبدع نيكولاس غالاغر مقالة تمهيدية تؤدي بهذا البيان:

“Normalize.css هو ملف CSS صغير يوفر تناسقًا مستعرضًا أفضل في التصميم الافتراضي لعناصر HTML. إنه بديل HTML5 حديث ، جاهز لإعادة ضبط CSS التقليدية.”

على مر السنين نمت هذه لتصبح مكتبة موثوق بها تستخدم من قبل المطورين في جميع أنحاء العالم. وقد استخدم تطبيع إلى حد ما في Bootstrap و Pure CSS.

هناك طريقتان لاستخدام "التطبيع" في مشروع: تحرير المصدر لتخصيص ورقة أنماط "تطبيع" الخاصة بك ، أو استخدامها كقاعدة وإضافة أنماط في الأعلى.

السابق هو استراتيجية انتقاء واختيار يمكنك من خلالها الانتقال إلى ملف Normalize.css وحذف كل ما لا تحتاجه لإنشاء ورقة أنماط مخصصة خاصة بك. هذا هو الأفضل على أساس كل مشروع للحفاظ على حجم ملف منخفضة.

بدلاً من ذلك ، يقوم بعض المطورين بتضمين ملف Normalize.css بأكمله وإنشاء ورقة أنماط خاصة بهم أعلى ذلك. تمتد ورقة أنماط Normalize الكاملة على أكثر من 420 سطرًا من التعليمات البرمجية والتي تعادل ~ 6.8 كيلو بايت غير مضغوطة.

لا تعد أي من الطريقتين أفضل من الأخرى ، ويستحق اتباع كل ما هو أفضل لكل مشروع ، أو سير العمل المفضل لديك.

للبدء ، قم بتنزيل نسخة من Normalize من GitHub أو استضافتها من CDN خارجي. يمكنك أيضًا سحب أحدث إصدار من Normalize مباشرة من NPM كما يلي:

تثبيت npm - حفظ normalize.css

إذا كنت لا ترغب في تنزيل أي ملفات ، يمكنك إنشاء مشروع CodePen جديد يمكنه إلحاق Normalize بنقرة زر واحدة.

نظرًا لأن Normalize هو وحدات ، يمكنك إزالة المقاطع مؤقتًا أو حتى إنشاء البنية المخصصة لـ Normalize. ثم يمكنك بدء كل مشروع بأجزاء محددة مثل عناصر عرض HTML5 أثناء إزالة الأنماط للمحتوى المدمج.

تحتوي كل قاعدة تطبيع على تعليق CSS مطابق يشرح ما تقوم به وما هي المشكلات / الأخطاء التي يحلها. بعضها واضح مثل الإعداد العرض محجوب على عناصر HTML5 الأحدث.

البعض الآخر أقل وضوحًا مثل رمز SVG الذي يخفي تجاوز السعة في Internet Explorer:

svg: not (: root) overflow: hidden؛

أوصي بشدة بتقسيم ورقة الأنماط لمعرفة كيفية عملها بالضبط ومعرفة ما إذا كان التطبيع مناسبًا لمشروعك.

Normalize.css في تصميم المواقع

يوفر أحدث إصدار من Normalize v4.0 دعمًا واسعًا للمتصفح.

Chrome (الأخيران)
الحافة (الأخيران)
فايرفوكس (الأخيران)
Firefox ESR
انترنت اكسبلورر 8+
أوبرا (الأخيران)
سفاري 6+

بناءً على ما يمكنني قوله ، قد يدعم Normalize الإصدارات القديمة من المتصفحات مع تحديثات مستمرة مثل Firefox. لكن ال “الرسمية” لا يتضمن الدعم سوى أحدث إصدارين من Chrome / Edge / FF / Opera.

وأيضًا IE6 + و Safari 4+ مدعومين مع Normalize v1 ، لكن لم يعد يتم تحديث هذا الإصدار.

من الأهمية بمكان أن تتحقق من إصدارات المتصفح باستخدام أداة مثل Google Analytics. سيعطيك هذا فكرة أفضل عما إذا كان Normalize يمكن أن يكون أداة مفيدة لأعمال تصميم الويب الحديثة.

مزيد من الموارد

لا يوجد الكثير لتعليمه حول تطبيع على وجه التحديد حتى يحدث معظم التعلم عن طريق العمل.

وبصراحة ، لا يوجد الكثير لشرح أنه لا يمكنك التقاط القراءة من خلال ورقة الأنماط ونسخ / تغيير التعليمات البرمجية حسب الحاجة. ولكن إذا كنت تبحث عن معلومات أخرى ذات صلة فقد أضفت بعض الروابط أدناه.

مقدمة الفيديو