بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
تكلمنا في درس سابق عن ملف reset.css وعلمنا بأن أهم ما فيه هو إعادة قيم padding و margin إلى القيمة 0 لأغلب العناصر البلوك ، وذلك لضمان ظهور التصميم بشكل سليم على كل المتصفحات.
ولكن هل هذه هي الطريقة الوحيدة لمعالجة الإعدادات الإفتراضية التي تختلف فيها المتصفحات ؟
هناك ملف آخر إسمه normalize.css ابتكره أحد المصممين كبديل لملف reset ، فما الفرق بين الإثنين ؟
الفرق بكل بساطة هو أن ملف normalize لا يلغي padding و margin إلا فقط للعنصر body ، ويعالج مشاكل المتصفحات وفي نفس الوقت يحافظ على الإعدادات الإفتراضية ، بينما reset يلغي كل شيء ويجعلك تبدأ في بناء كل شيء بنفسك.
أولا حمل الملفين معا برابط واحد : من هنا
ومن أجل تجربتهما ولمس الفرق بينهما عمليا أنشأنا ملف html التالي:
هكذا تبدو الصفحة على متصفح الفارفوكس:
إدراج ملف reset.css
بالطريقة المعروفة التي لا تحتاج إلى شرح ، ضمن العلامة link سنقوم بتحديد مسار ملف reset.css ، ثم نقوم بحفظ التغييرات ، والنتيجة هي كالتالي:
وكما ترى تم إلغاء padding و margin ، وليس هذا فقط ، النصوص كلها صارت متشابهة فلا فرق بين h1 و h6 و p و li وهذا يبدو سيئا .
إدراج ملف normalize.css
سنقوم الآن بإزالة إدراج ملف reset ونعوضه بملف normalize ، والنتيجة كالتالي:
هذا على متصفح firefox ، سنجرب على chrome :
والملاحظ هنا أن ملف normalize ضبط الأمور دون الحاجة إلى إلغاء كل شيء ، الخط أصبح sans serif و margin على اليسار تم إلغاؤه ، إلى غير ذلك ، دعنا نجرب على explorer 11 ربما تبدو بشكل مختلف :
وكما ترى لا فرق على المتصفحات الثلاث .
يفهم من هنا بأن ملف reset عندما يطبق يأتي مثل العاصفة على المتصفح ، بينما ملف normalize يريح المتصفح ويريح المصمم وكذلك المستخدم الذي يتوفر على صبيب نت ضعيف .
نعود للسؤال الذي طرحناه في البداية ، أيهما أفضل ؟
الأمر يعود إليك كمصمم لتحديد الأنسب إليك والأريح ، اعلم فقط بأن أكبر المواقع في العالم ومنها twitter تستخدم normalize ولا تستخدم reset .