مقدمة وأفضل طريقة معالجة النمط الافتراضي للمتصفح

لقد قمت مؤخرًا بتعديل تنسيق صفحة الويب لتجد أن هناك دائمًا مساحة تبلغ حوالي 10 بكسل في أسفل صفحة الويب.

لقد وجد أن هناك هامش التون: 1EM ؛

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

لا تتوافق المتصفحات المختلفة مع النمط الافتراضي لنفس العنصر ، وهذا هو السبب في أن لدينا في بداية CSS* {padding: 0 ؛

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

لذلك ، عندما ننشئ قواعد نمط CSS ، فإن خطوة يجب أن تتمثل في إعادة تصميم النمط الافتراضي للمتصفح ، أي النمط الافتراضي للمتصفح. يختلف عن استخدام* {padding: 0 ؛

على سبيل المثال ، الفقرة التالية:

الخط المستخدم في هذا الرمز في Internet Explorer هو Times New Roman ، ويستخدم الخط الافتراضي للنظام في Firefox و Opera. لذلك ، يجب علينا تعيين نمط موحد لـ <h1> في CSS.

ومع ذلك ، إذا استخدمنا النمط من خلال -إذا استخدمنا* {padding: 0 ؛ ، وما إلى ذلك. ستتجاهل بعض المتصفحات إعادة تصميمها ، والأهم من ذلك ، أن هذا سيضر بشكل خطير بمظهر هذه العناصر ، لذلك عليك تعيين قيمة الحشو وقيمة الهامش يدويًا واحدًا تلو الآخر. لذلك يجب أن نتخلى ببساطة عن استخدام*، ولكن إعادة تشغيل العنصر الأول مع التناقضات الموجودة ، مثل الجسم ، DIV ، DL ، DT ، DD ، UL ، OL ، LI ، H2 ، H3 ، H4 ، H5 ، H5 ، H5 ، H6 ، قبل ، إلخ.

في الوقت نفسه ، قد يدمر النمط الافتراضي للعنصر مظهر الصفحة. على سبيل المثال ، ستقوم <B> بإعداد النصوص على النص ، وسيقوم <Lockquote> بمسافة مسافة بادئة في قسم كبير ، <em> سوف يميل النص ، وما إلى ذلك إذا كنت ترغب في طلب ظهور نص الصفحة. في الوقت نفسه ، في بعض الأحيان نطلب ظهور هذه العناصر كعنصر الأصل ، ويمكننا استخدام الوراثة مباشرة للوراثة من العنصر الأصل.

أما بالنسبة للعناصر التي يجب إعادة إعادةها؟ ياهو! وفقًا لاقتراح Yahoo ، تحتاج إلى وضع هذه القواعد في ملف يسمى Reset.css وحده (أوصي بهذه الطريقة):

 HTML {color: #000 ؛ ، td {margin: 0 ؛ ، var {font-font: normal ؛ حجم الخط: 100 ٪ ؛

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

ما سبق هو كل محتويات هذه المقالة.