قيم Css الافتراضية لعناصر html. إعادة تعيين الأنماط باستخدام CSS Reset. تجنب أوصاف الخصائص المتكررة عند استخدام إعادة تعيين CSS

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

إعادة تعيين أو إعادة تعيين الإعدادات الافتراضية في CSS

إعادة تعيين CSS عبارة عن مجموعة من الأنماط التي تعيد تعيين بعض الإعدادات الافتراضية للمتصفح. يكتب كل مطور ويب هذا الملف لنفسه بشكل فردي ، ويأخذ شخص ما حلاً جاهزًا. هذا هو المكان الذي أقترح أن أبدأ فيه. هناك العديد من خيارات إعادة تعيين الأنماط الجيدة ، ولكن الخيار المفضل لدي هو خيار Eric Meyer:

/ * http://meyerweb.com/eric/tools/css/reset/
الإصدار 2.0 | 20110126
الترخيص: لا شيء (المجال العام)
*/
html ، body ، div ، span ، applet ، object ، iframe ،
h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ،
a ، اختصار ، اختصار ، عنوان ، كبير ، استشهد ، رمز ،
del ، dfn ، em ، img ، ins ، kbd ، q ، s ، samp ،
صغير ، إضراب ، قوي ، ثانوي ، سوب ، تي تي ، فار ،
ب ، ش ، أنا ، مركز ،
dl ، dt ، dd ، ol ، ul ، li ،
مجموعة الحقول ، النموذج ، التسمية ، وسيلة الإيضاح ،
طاولة ، تسمية توضيحية ، tbody ، tfoot ، thead ، tr ، th ، td ،
المقالة ، جانبا ، قماش ، التفاصيل ، التضمين ،
الشكل ، الشكل ، التسمية التوضيحية ، التذييل ، الرأس ، المجموعة ،
قائمة ، تنقل ، إخراج ، روبي ، قسم ، ملخص ،
الوقت ، العلامة ، الصوت ، الفيديو (
الهامش: 0؛
حشوة: 0 ؛
الحدود: 0؛
حجم الخط: 100٪
الخط: يرث ؛
محاذاة عمودية: خط الأساس ؛
}
/ * إعادة تعيين دور عرض HTML5 للمتصفحات الأقدم * /
المقالة ، جانبا ، التفاصيل ، figcaption ، الشكل ،
تذييل ، رأس ، مجموعة ، قائمة ، تنقل ، قسم (
العرض محجوب؛
}
جسم (
ارتفاع الخط: 1 ؛
}
أول ، ماي (
نمط القائمة: لا شيء ؛
}
blockquote ، q (
اقتباسات: لا شيء ؛
}
blockquote: قبل ، blockquote: بعد ،
س: قبل ، ف: بعد (
محتوى: ""؛
المحتوى: لا شيء ؛
}
طاولة(
انهيار الحدود: انهيار.
تباعد الحدود: 0 ؛
}

سوف أعلق على الكود قليلا. أولاً ، يقوم بإعادة تعيين الهوامش الداخلية والخارجية لجميع العناصر الضرورية. ثانيًا ، هناك دعم لعناصر HTML5. لديهم قاعدة تسمح لهم بالعرض بشكل صحيح في بعض إصدارات المتصفحات. ثالثًا ، الإعدادات النموذجية لـ عملية مريحةبجداول (تمت إزالة المسافات البادئة بين الخلايا والحدود المزدوجة). أيضًا ، تم إسقاط العلامات القياسية للقوائم والاقتباسات لعروض الأسعار. يجب إزالة هذه الأجزاء من الكود إذا كنت تريد استخدام التصميم الافتراضي.

كيفية إعادة تعيين إعدادات css بنفسك

مع حيازة css العادية إلى حد ما ، يمكنك محاولة كتابة بعض القواعد بنفسك. على سبيل المثال:

*{
الهامش: 0؛
حشوة: 0 ؛
}

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

مكان وضع قواعد إعادة تعيين Css

هنا أعلاه عرضت عليك الرمز ، ولكن أين أدخله؟ يوجد خياران هنا:

• الصقها في بداية صفحة الأنماط الرئيسية على موقعك
• أنشئ ملف css جديدًا على الخادم واحفظ الكود فيه ، ثم احفظ كل الصفحات واتصل بها قبلالجدول style.css الرئيسي.

لمزيد من المعلومات حول توصيل ورقة أنماط css بـ html ، انظر

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

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

من المؤلف:يمكن أن يكون إنشاء مواقع الويب على الويب مثل البناء على الرمال المتحركة. تفعل المتصفحات نفس الشيء ، لكن بين الحين والآخر تحصل على اختلافات مزعجة غير متوقعة. على سبيل المثال ، تحتوي جميع المتصفحات على "أوراق أنماط وكيل المستخدم" - وهي مجموعة من أنماط CSS الافتراضية لجعل العنوان يبدو كعنوان ، وما إلى ذلك ، حتى قبل تعيين الأنماط إلى page1. بالطبع ، يستخدم كل محرك متصفح مجموعات افتراضية مختلفة قليلاً.

أحد الأمثلة على ذلك هو أنماط القائمة الافتراضية ، حيث كانت في البداية في أوراق الأنماط الافتراضية للمتصفح متصفح الانترنتيحتوي كل من Opera و Opera على هامش قائمة من اليسار: 30 نقطة ، بينما أتى Firefox و KHTML مع padding-left: 40 بكسل ؛. إذا أردت تغيير المساحة المتروكة الافتراضية عن طريق تحديد ul (padding-left: 0 ؛) ، فقد أدى ذلك إلى نتائج مختلفة جدًا في المتصفحات.

إعادة تعيين إعدادات CSS

لتحقيق القليل من الاستقرار ، يقوم بعض المطورين بإعادة تعيين الهوامش والحشو باستخدام محدد عام:

* (الهامش: 0 ؛ المساحة المتروكة: 0 ؛)

* (الهامش: 0 ؛ المساحة المتروكة: 0 ؛)

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

الغرض من إعادة التعيين هو إعادة تعيين كل ما يمكنك ... [و] العمل كنقطة انطلاق لأنماطك الأساسية.- إريك ماير

html ، body ، div ، span ، applet ، object ، iframe ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ، a ، abbr ، اختصار ، address ، big ، cite ، code ، del ، dfn ، em ، img ، ins ، kbd ، q ، s ، samp ، صغير ، إضراب ، قوي ، فرعي ، sup ، tt ، var ، b ، u ، i ، مركز ، dl ، dt ، dd ، ol ، ul ، li ، fieldset ، شكل ، تسمية ، وسيلة إيضاح ، جدول ، تسمية توضيحية ، tbody ، tfoot ، thead ، tr ، th ، td ، مقالة ، جانب ، قماش ، تفاصيل ، تضمين ، شكل ، شكل ، تسمية توضيحية ، تذييل ، رأس ، hgroup ، قائمة ، تنقل ، إخراج ، روبي ، القسم ، الملخص ، الوقت ، العلامة ، الصوت ، الفيديو (الهامش: 0 ؛ المساحة المتروكة: 0 ؛ الحد: 0 ؛ حجم الخط: 100٪ ؛ الخط: الوراثة ؛ المحاذاة الرأسية: الخط الأساسي ؛)

html ، body ، div ، span ، applet ، object ، iframe ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ، a ، اختصار ، اختصار ، عنوان ، كبير ، استشهد ، رمز ، del ، dfn ، em ، img ، ins ، kbd ، q ، s ، samp ، صغير ، إضراب ، قوي ، ثانوي ، سوب ، تي تي ، فار ، ب ، ش ، أنا ، مركز ، dl ، dt ، dd ، ol ، ul ، li ، مجموعة الحقول ، النموذج ، التسمية ، وسيلة الإيضاح ، طاولة ، تسمية توضيحية ، tbody ، tfoot ، thead ، tr ، th ، td ، المقالة ، جانبا ، قماش ، التفاصيل ، التضمين ، الشكل ، الشكل ، التسمية التوضيحية ، التذييل ، الرأس ، المجموعة ، قائمة ، تنقل ، إخراج ، روبي ، قسم ، ملخص ، الوقت ، العلامة ، الصوت ، الفيديو ( الهامش: 0 المساحة المتروكة: 0 الحد: 0 حجم الخط: 100٪؛ الخط: يرث ؛ محاذاة عمودية: خط الأساس ؛

يقوم بإعادة تعيين بعض خصائص العديد (ولكن ليس كل) العناصر إلى مكافئها في النص العادي. نظرًا لأنه يتم إعادة تعيين العناصر المطابقة فقط ، فإن هذا يتحايل على بعض المشكلات * (الهامش: 0 ؛ المساحة المتروكة: 0 ؛). يمكننا بعد ذلك تصميم هذه الخصائص "غير المصممة" بشكل آمن مع العلم بأننا نبني على أساس مستقر عبر المستعرضات. يعمل تعيين النمط هذا أيضًا كإشارة للحاجة إلى تعيين أنماط مناسبة لهذه العناصر بوعي.

قضايا إعادة تعيين CSS

لقد كانت عمليات إعادة تعيين CSS منقذًا حقيقيًا ، ولكن الآن ، خاصة مع ظهور الإطارات السلكية ، غالبًا ما يتم استخدامها "كما هي". على سبيل المثال ، افترض إريك أن المطورين الآخرين سيبدأون في بناء مواقع على أنماط إعادة التعيين التي اقترحها ، وتجاوزها وفقًا لذلك ، وقد تضمن الإصدار الأول من Meyer Reset هذه القاعدة مؤقتًا:

/ * تذكر تحديد أنماط التركيز! * /: التركيز (المخطط التفصيلي: 0 ؛)

لسوء الحظ ، لم يحدد الجميع أنماط التركيز بالفعل ، وقام إريك بإزالتها من الإصدار الثاني.

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

بالنسبة لي ، أكبر مشكلة في عمليات إعادة التعيين هي الوراثة ، مما يؤدي إلى ظهور رسائل غير مرغوب فيها في أدوات المتصفح. عند محاولة تعقب مشكلة CSS لعنصر متداخل بعمق في كود شخص آخر ، لن يساعد ذلك:

قواعد إعادة تعيين CSS متكررة بسبب الوراثة

تطبيع. CSS

اتخذ نيكولاس غالاغر وجوناثان نيل نهجًا مختلفًا مع Normalize.css ، "ملف CSS صغير يضمن تناسقًا أفضل عبر المستعرضات في الأنماط الافتراضية لعناصر HTML." كما هو الحال مع عمليات إعادة تعيين CSS ، فإنه يعطينا نقطة بداية صلبة عبر المستعرض - السبب الرئيسي لإعادة التعيين في المقام الأول - لكن النهجين مختلفان فلسفيًا.

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

نظرًا لأن التغييرات في Normalize.css أكثر استهدافًا ، فلا يوجد تسلسل وراثي للقواعد المعاد كتابتها في أدوات التأليف المستندة إلى المستعرض. إليك نموذج ul بسيط: unstyled with Meyer Reset and Normalize.css الإصداران 1 و 2:

عنصر "غير منظم" لقائمة غير مرتبة

تطبيق إعادة تعيين ماير

تطبيق Normalize.css v1

تطبيق Normalize.css v2

هناك اختلاف واضح في الفلسفة حيث يظهر مثال Meyer Reset كسطر من نص عادي بدون هوامش أو حشو أو تعداد نقطي ، بينما أمثلة Normalize.css مشابهة للأنماط الافتراضية. يمكن أيضًا ملاحظة الاختلاف في التصميم المطبق على ul هذا بسهولة.

ومع ذلك ، فهذه ليست كل الأنماط المطبقة على ul. للمقارنة ، إليك نفس لقطة الشاشة "غير المصممة" ، ولكن مع أنماط وكيل المستخدم المرئية ، في Firefox 21 و Opera Next 15.

هذه المقالة هي الأولى في سلسلة حول ترويض CSS. اليوم سنلقي نظرة على التكنولوجيا إعادة تعيين CSS.

لماذا هذا مطلوب؟

يقوم كل متصفح بتعيين قيم النمط الافتراضية الخاصة به للعديد من عناصر HTML. باستخدام CSS Reset ، يمكننا تسوية هذا الاختلاف لضمان التصميم عبر المتصفحات.

على سبيل المثال ، أنت تستخدم العنصر أفي المستند الخاص بك. تضيف معظم المتصفحات ، مثل Internet Explorer و Firefox ، ارتباطًا لون ازرقو تسطير. ومع ذلك ، تخيل أنه بعد خمس سنوات قرر شخص ما إنشاء متصفح جديد (دعنا نسميه UltraBrowser). لم يحب مطورو المتصفح اللون الأزرق والتسطير كان مزعجًا ، لذلك قرروا إبراز الروابط بالأحمرو عريض. بناءً على ذلك بدقة ، إذا قمت بتعيين قيمة النمط الأساسي لعنصر أ، فمن المضمون أن تكون بالطريقة التي تريدها ، وليس كيف يفضل مطورو UltraBrowser عرضها.

لكن الآن ليس لدينا أي مسافات بادئة على الإطلاق ، بما في ذلك بين الفقرات الفردية! ما يجب القيام به؟ لا تكذب ولا تخاف: أسفل إعادة ضبطنا ، سنصف القاعدة التي نحتاجها. يمكن إنجازه طرق مختلفة: حدد المسافة البادئة أسفل الفقرة أو أعلاها ، وحددها بالنسبة المئوية أو البكسل أو em.

الأهم من ذلك ، أن المتصفح يلعب الآن وفقًا لقواعدنا ، وليس وفقًا لقواعده. قررت أن أفعل ذلك على النحو التالي:

* (الهامش: 0 ؛ الحشو: 0 ؛) ع (الهامش: 5 بكسل 0 10 بكسل 0 ؛)

نتيجة لذلك ، حصلنا على ما يمكن رؤيته في المثال الثالث.

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

لمساعدتك في اتخاذ القرار الصحيح ، إليك بعض الروابط الإضافية:

1. الأقل هو الأكثر - خياري لـ Reset CSS (Ed Elliot).

2. إعادة تعيين CSS الخاص بك هو أول شيء يجب أن يراه المتصفح

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

نعم ، أفهم أن الأمر بدا سخيفًا ، لكن هذا أحد الأخطاء الرئيسية للمطورين ، صغارًا وكبارًا. كثير من الناس ينسون ذلك ببساطة.

قد يسأل البعض سؤالا منطقيا: لماذا يحدث هذا؟ الإجابة بسيطة: القواعد المكتوبة في ملف CSS (وحتى في ترتيبها في المستند) تحل محل القواعد المعلنة سابقًا.

دعونا لا نحيد كثيرا عن الموضوع ونستمر. دعنا نطبق أنماط إريك ماير على مثالنا ، لكن بعدأوصاف ممتلكاتنا ، كما هو موضح في المثال 4. قد يقول علماء الرياضيات ما يلي: "هذا هو المطلوب إثباته".

3. استخدم مستند CSS منفصل لإعادة تعيين CSS

يجب علي (لا ، لم أجبر بأي حال من الأحوال) على ذكر هذه النصيحة. يعد استخدام ملف منفصل لـ CSS Reset ممارسة شائعة يدعمها رقم ضخمالمطورين.

في الواقع ، أنا أتخذ موقف الخلق ملف CSS كبيربسبب الأداء العالي لهذا النهج. لكن في هذه المسألة ، أميل إلى الاتفاق مع الأغلبية: يجب نقل CSS Reset إلى ملف منفصل(يشار إليه عادة باسم reset.css). في هذه الحالة ، يمكنك استخدامه في مشاريع مختلفة دون بذل أي جهد لفصله عن قواعد CSS الأخرى.

4. حاول تجنب استخدام المحدد العام

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

هذه النصيحة مهمة بشكل خاص عند تطوير حلول مثل سمات CMS. لا يمكنك التنبؤ مسبقًا بكيفية استخدامه وكيف سيتم تعديله. من الأفضل وصف قواعد CSS الأساسية لجميع العناصر بدلاً من استخدام آلية غير متوقعة (وإن كانت أصغر) للمحددات العامة لهذا الغرض.

5. تجنب أوصاف الخصائص الزائدة عند استخدام إعادة تعيين CSS

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

دعنا نعود إلى Eric's CSS Reset. يحدد القيم الافتراضية لارتفاع السطر ولون وخلفية عنصر ما جسمبالطريقة الآتية:

الجسم (ارتفاع الخط: 1 ؛ اللون: أسود ؛ الخلفية: أبيض ؛)

لنفترض أنك تعرف بالفعل كيف سيبدو العنصر. جسم:

1. لون الخلفية: #cccccc؛
2. اللون: # 996633 ؛
3. تريد تكرار صورة خلفية معينة أفقيًا.

في هذه الحالة ، ليست هناك حاجة لإنشاء محدد جديد لوصف خصائصك - يمكنك ببساطة تضمينها في CSS Reset. دعنا نقوم به:

الجسم (ارتفاع الخط: 1 ؛ اللون: # 996633 ؛ الخلفية: #ccc url (tiled-image.gif) تكرار x أعلى اليسار ؛)

لا تخف من تعديل CSS Reset نفسها.قم بتخصيصه من أجلك ، واجعله يعمل من أجلك. قم بالتعديل وإعادة البناء والإزالة والإضافة حسب الحاجة في حالتك الخاصة.

قال إريك ماير ما يلي حول هذا: "هذه ليست حالة حيث يجب على الجميع استخدام CSS Reset دون تغييرات."

CSS الافتراضي لعناصر HTML (2)

يختلف كل متصفح عن الآخر ، لذلك:

• Firefox (جيكو):. أو انتقل إلى المورد: // gre-resources / وانظر إلى html.css.
• Chrome / Safari (WebKit):
  • كروم (وميض):
• إنترنت إكسبلورر (ترايدنت)، الإصدارات السابقة: http://web.archive.org/web/20170122223926/http://www.iecss.com/

أين يمكنني العثور على CSS لـ CSS الافتراضي للمتصفح؟

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

لقد رأيت في أسئلة أخرى (أقدم بكثير) (مثل أوراق أنماط CSS الافتراضية في المتصفحات) التي تقدم حلاً لإعادة تعيين CSS. هذا الحل ليس ضروريًا في بعض الأحيان ، وغالبًا ما أرغب في الاحتفاظ ببعض الخصائص الأساسية (على سبيل المثال ، تمييز حقول الإدخال في Chrome). بعبارة أخرى: لا أريد التخلص من الأشياء لمجرد أنني لا أعرف ماذا يفعلون .

لذا، هل يوجد موقع يمكنه إعطائي كل هذه المعلومات (أو ربما معظمها)؟

يمكن العثور على مستودع GitHub لجميع مواصفات W3C HTML وأوراق أنماط CSS الافتراضية للمطورين

1.

2. الأنماط القياسية لبرنامج Internet Explorer

3.

4. الأنماط القياسية للأوبرا

5. الأنماط القياسية لـ HTML4 (مواصفات W3C)

6. الأنماط القياسية لـ HTML5 (مواصفات W3C)

على سبيل المثال ، وفقًا لمواصفات W3C HTML4 الافتراضية:

html ، address ، blockquote ، body ، dd ، div ، dl ، dt ، fieldset ، form ، frame ، frameset ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، noframes ، ol ، p ، ul ، center ، dir ، hr ، menu ، pre (display: block؛ unicode-bidi: embed) li (display: list-item) head (display: none) table (display: table) tr (display: table-row) thead (display: table-header- مجموعة) tbody (عرض: مجموعة صف الجدول) tfoot (عرض: جدول-تذييل-مجموعة) عمود (عرض: عمود-جدول) colgroup (عرض: جدول-عمود-مجموعة) td ، th (عرض: جدول-خلية) التسمية التوضيحية (عرض: جدول-شرح) ث (وزن الخط: أكثر جرأة ؛ محاذاة النص: المركز) التسمية التوضيحية (محاذاة النص: المركز) الجسم (الهامش: 8 بكسل) h1 (حجم الخط: 2em ؛ الهامش: .67em 0) h2 (حجم الخط: 1.5em ؛ الهامش: .75em 0) h3 (حجم الخط: 1.17em ؛ الهامش: .83em 0) h4 ، p ، blockquote ، ul ، fieldset ، form ، ol ، dl ، dir ، menu ( الهامش: 1.12em 0) h5 (حجم الخط: .83em ؛ الهامش: 1.5em 0) h6 (حجم الخط: .75em ؛ الهامش: 1.67em 0) h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، b ، blockquote قوي (وزن الخط: أكثر جرأة) (margin-left: 40px ؛ margin-right: 40px) i، cite، em، var، address (font-style: italic) pre، tt، code، kbd، samp (font-family: monospace) pre (white-space: pre) button ، textarea ، إدخال ، حدد (عرض: كتلة مضمنة) كبير (حجم الخط: 1.17em) صغير ، فرعي ، sup (حجم الخط: .83em) فرعي (محاذاة رأسية: فرعي) جدول sup (محاذاة عمودية: فائقة) ( تباعد الحدود: 2 بكسل ؛) thead ، tbody ، tfoot (محاذاة رأسية: وسط) td ، th ، tr (محاذاة رأسية: ترث) s ، إضراب ، del (زخرفة النص: سطر من خلال) hr (حد: 1 بكسل أقحم) ol ، ul ، dir ، menu ، dd (margin-left: 40px) ol (list-style-type: decimal) ol ul، ul، ul، ol ol (margin-top: 0؛ margin-bottom: 0) u ، ins (زخرفة النص: تسطير) br: قبل (المحتوى: "\ A" ؛ المسافة البيضاء: ما قبل السطر) المركز (محاذاة النص: المركز): الرابط ،: تمت الزيارة (زخرفة النص: تسطير ): التركيز (مخطط تفصيلي: انعكاس منقط رفيع) / * بدء إعدادات ثنائية الاتجاه (لا تتغير) * / BDO (الاتجاه: ltr ؛ unicode-bidi: تجاوز ثنائي الاتجاه) BDO (الاتجاه: rtl ؛ unicode-bidi: تجاوز ثنائي الاتجاه) * (الاتجاه: لتر ؛ unicode-bidi: embed) * (direction: rtl؛ unicode-bidi: embed)media print (h1 (فاصل الصفحة قبل: دائمًا) h1، h2، h3، h4، h5، h6 (فاصل الصفحات بعد: تجنب) ul ، ol ، dl (فاصل الصفحات قبل: تجنب))

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

أمثلة على البرنامج النصي لإعادة تعيين CSS

هناك رأي مفاده أن كل مشرف موقع يحترم نفسه يجب أن يكتب كود إعادة تعيين CSS الخاص به. لكنني مؤيد لنهج مختلف ، وأتخذ حلاً جاهزًا ، وأفهمه ، وأصححه إذا لزم الأمر.

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

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

/ * http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126 الترخيص: لا شيء (المجال العام) * / html ، body ، div ، span ، applet ، object ، iframe ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ، a ، abbr ، مختصر ، عنوان ، big، cite، code، del، dfn، em، img، ins، kbd، q، s، samp، small، Strike، strong، sub، sup، tt، var، b، u، i، center، dl، dt، dd، ol، ul، li، fieldset، form، label، legend، table، caption، tbody، tfoot، thead، tr، th، td، article، aside، canvas، details، embed، figure، figcaption، footer، header، hgroup ، menu ، nav ، output ، ruby ​​، ​​section ، abstract ، time ، mark ، audio ، video (margin: 0؛ padding: 0؛ border: 0؛ font-size: 100٪؛ font: inherit؛ vertical-align: baseline ؛) / * إعادة تعيين دور عرض HTML5 للمتصفحات الأقدم * / المقالة ، جانباً ، التفاصيل ، الشكل ، الشكل ، التذييل ، الرأس ، hgroup ، القائمة ، التنقل ، القسم (العرض: block ؛) الجسم (ارتفاع الخط: 1 ؛) ol ، ul (list-style: none ؛) blockquote ، q (الاقتباسات: لا شيء ؛) blockquote: before ، blockquote: after ، q: before ، q: after (content: "" ؛ content: none ؛) الجدول (الحدود- الانهيار: الانهيار. تباعد الحدود: 0 ؛ )

ياهو! (YUI 3) إعادة تعيين CSS

يعمل YUI 3 CSS Style Reset على التخفيف من التصميم المتضارب لعناصر HTML بواسطة المتصفحات تمامًا مثل أي برنامج نصي آخر لإعادة تعيين CSS لإنشاء أساس متين لبناء مواقع الويب وتطبيقات الويب.

/ * YUI 3.18.1 حقوق الطبع والنشر لعام 2014 لشركة Yahoo! شركة. كل الحقوق محفوظة. مرخصة بموجب رخصة BSD. http://yuilibrary.com/license/ * / / * سيحتاج TODO إلى إزالة الإعدادات الموجودة في HTML نظرًا لأنه لا يمكننا "مساحة الاسم. TODO بالبادئة ، هل يجب التجميع حسب المحدد أو الخاصية لتوفير الوزن؟ * / html ( color: # 000؛ background: #FFF؛) / * TODO إزالة الإعدادات على BODY نظرًا لأنه لا يمكننا "مساحة الاسم". * / / * اختبار TODO وضع فئة على HEAD. - فشل في FF. * / body ، div ، dl ، dt ، dd ، ul ، ol ، li ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، pre ، code ، form ، fieldset ، legend ، input ، textarea ، p ، blockquote ، th ، td (الهامش: 0 ؛ المساحة المتروكة: 0 ؛) الجدول (انهيار الحدود: الانهيار ؛ تباعد الحدود: 0 ؛) مجموعة الحقول ، img (الحدود: 0 ؛) / * TODO فكر في التعامل مع الوراثة بشكل مختلف ، وربما ترك IE6 يفشل قليلاً ... * / العنوان ، التسمية التوضيحية ، الاستشهاد ، الكود ، dfn ، em ، strong ، th ، var (نمط الخط: عادي ؛ وزن الخط: عادي ؛) ol ، ul (نمط القائمة: لا شيء ؛) التسمية التوضيحية ، th (محاذاة النص: يسار ؛) h1 ، h2 ، h3 ، h4 ، h5 ، h6 (حجم الخط: 100٪ ؛ وزن الخط: عادي ؛) q: قبل ، q: بعد (المحتوى: "" ؛) اختصار ، اختصار (حد: 0 ؛ متغير الخط: عادي ؛) / * للحفاظ على ارتفاع السطر ومظهر المحدد * / sup (محاذاة رأسية: أعلى النص ؛) فرعية (محاذاة رأسية: أسفل النص ؛) إدخال ، منطقة نصية ، حدد (نوع الخط: وراثة ؛ حجم الخط: وراثة ؛ وزن الخط: وراثة ؛ * حجم الخط: 100٪ ؛ / * لتمكين تغيير الحجم لـ IE * /) / * لأن الأسطورة لا ترث في IE * / legend (color: # 000؛) / * YUI CSS Detection Stamp * / # yui3-css-stamp.cssreset (عرض: لا شيء ؛ )

إعادة تعيين أنماط normalize.css

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

/ *! normalize.css v6.0.0 | ترخيص MIT | github.com/necolas/normalize.css * / / * المستند =================================== = ===================================== * / / ** * 1. صحح ارتفاع السطر في الكل المتصفحات. * 2. منع تعديلات حجم الخط بعد تغيير الاتجاه في * IE على Windows Phone و iOS. * / html (line-height: 1.15 ؛ / * 1 * / -ms-text-size-Adjust: 100٪ ؛ / * 2 * / -webkit-text-size-Adjust: 100٪ ؛ / * 2 * /) / * الأقسام ============================================== == ========================== * / / ** * أضف العرض الصحيح في IE 9-. * / مقالة ، جانباً ، تذييل ، رأس ، تنقل ، قسم (عرض: كتلة ؛) / ** * تصحيح حجم الخط والهامش في عناصر `h1` داخل سياقات` القسم` و * `مقالة` في Chrome و Firefox و سفاري. * / h1 (حجم الخط: 2em ؛ الهامش: 0.67em 0 ؛) / * تجميع المحتوى ============================= = =========================================== * / / ** * أضف العرض الصحيح في IE 9-. * 1. أضف العرض الصحيح في IE. * / figcaption، figure، main (/ * 1 * / display: block؛) / ** * أضف الهامش الصحيح في IE 8. * / figure (margin: 1em 40px؛) / ** * 1. أضف المربع الصحيح التحجيم في Firefox. * 2. إظهار الفائض في Edge و IE. * / hr (box-sizing: content-box؛ / * 1 * / height: 0؛ / * 1 * / overflow: مرئي ؛ / * 2 * /) / ** * 1. تصحيح الوراثة وقياس حجم الخط في جميع المتصفحات. * 2. قم بتصحيح حجم خط `em` الفردي في جميع المتصفحات. * / pre (font-family: monospace ، monospace ؛ / * 1 * / font-size: 1em ؛ / * 2 * /) / * دلالات مستوى النص =============== =================================================== = ======== * / / ** * 1. قم بإزالة الخلفية الرمادية من الروابط النشطة في IE 10. * 2. قم بإزالة الفجوات الموجودة في الروابط التي تحتها خط في iOS 8+ و Safari 8+. * / a (background-color: transparent؛ / * 1 * / -webkit-text-decoration-skip: object؛ / * 2 * /) / ** * 1. قم بإزالة الحد السفلي في Chrome 57- و Firefox 39- . * 2. أضف الزخرفة الصحيحة للنص في Chrome و Edge و IE و Opera و Safari. * / abbr (border-bottom: none؛ / * 1 * / text-decoration: underline؛ / * 2 * / text-decoration: underline dined؛ / * 2 * /) / ** * منع التطبيق المكرر لـ `أكثر جرأة `بالقاعدة التالية في Safari 6. * / b ، strong (font-weight: inherit؛) / ** * أضف وزن الخط الصحيح في Chrome و Edge و Safari. * / b، strong (font-weight: bolder؛) / ** * 1. تصحيح التوريث وقياس حجم الخط في جميع المتصفحات. * 2. قم بتصحيح حجم خط `em` الفردي في جميع المتصفحات. * / code، kbd، samp (font-family: monospace، monospace؛ / * 1 * / font-size: 1em؛ / * 2 * /) / ** * أضف نمط الخط الصحيح في Android 4.3-. * / dfn (font-style: italic؛) / ** * أضف الخلفية واللون الصحيحين في IE 9-. * / mark (background-color: # ff0؛ color: # 000؛) / ** * أضف حجم الخط الصحيح في جميع المتصفحات. * / small (font-size: 80٪؛) / ** * منع عناصر `sub` و` sup` من التأثير على ارتفاع السطر في * جميع المتصفحات. * / فرعي ، sup (حجم الخط: 75٪ ؛ ارتفاع الخط: 0 ؛ الموضع: نسبي ؛ محاذاة رأسية: خط الأساس ؛) فرعي (أسفل: -0.25em ؛) sup (أعلى: -0.5em ؛) / * محتوى مضمّن =============================================== == ======================== * / / ** * أضف العرض الصحيح في IE 9-. * / الصوت والفيديو (العرض: كتلة مضمنة ؛) / ** * أضف العرض الصحيح في iOS 4-7. * / الصوت: ليس () (العرض: لا شيء ؛ الارتفاع: 0 ؛) / ** * قم بإزالة الحدود على الصور داخل الروابط في IE 10-. * / img (border-style: none؛) / ** * إخفاء الفائض في IE. * / svg: not (: root) (overflow: hidden؛) / * Forms =============================== = ========================================== * / / ** * إزالة الهامش في Firefox و Safari. * / الزر ، الإدخال ، optgroup ، التحديد ، textarea (الهامش: 0 ؛) / ** * إظهار الفائض في IE. * 1. إظهار الفائض في Edge. * / زر ، إدخال (/ * 1 * / overflow: مرئي ؛) / ** * قم بإزالة وراثة تحويل النص في Edge و Firefox و IE. * 1. إزالة وراثة تحويل النص في Firefox. * / زر ، حدد (/ * 1 * / text-transform: none ؛) / ** * 1. منع خطأ WebKit حيث (2) يدمر عناصر التحكم في "الصوت" و "الفيديو" * في Android 4. * 2. تصحيح عدم القدرة على نمط الأنواع القابلة للنقر في iOS و Safari. * / button، html، / * 1 * /، (-webkit-المظهر: button؛ / * 2 * /) / ** * قم بإزالة الحد الداخلي والحشو في Firefox. * / زر :: - moz-focus-inner، :: - moz-focus-inner، :: - moz-focus-interior :: - moz-focus-inner (نمط الحدود: لا شيء ؛ الحشو: 0 ؛) / ** * استعادة أنماط التركيز التي لم يتم ضبطها بواسطة القاعدة السابقة. * / button: -moz-focusring ،: -moz-focusring ،: -moz-focusring ،: -moz-focusring (المخطط التفصيلي: 1px ButtonText ؛) / ** * 1. صحح التفاف النص في Edge و IE. * 2. قم بتصحيح وراثة اللون من عناصر "مجموعة الحقول" في IE. * 3. قم بإزالة المساحة المتروكة حتى لا يعلق المطورون عندما لا يستبعدون عناصر * `مجموعة الحقول` في جميع المتصفحات. * / legend (box-sizing: border-box؛ / * 1 * / color: ورث؛ / * 2 * / display: table؛ / * 1 * / max-width: 100٪؛ / * 1 * / padding: 0 ؛ / * 3 * / مسافة بيضاء: عادي ؛ / * 1 * /) / ** * 1. أضف العرض الصحيح في IE 9-. * 2. أضف المحاذاة الرأسية الصحيحة في Chrome و Firefox و Opera. * / التقدم (العرض: كتلة مضمنة ؛ / * 1 * / محاذاة رأسية: خط الأساس ؛ / * 2 * /) / ** * إزالة شريط التمرير العمودي الافتراضي في IE. * / textarea (overflow: auto؛) / ** * 1. أضف حجم الصندوق الصحيح في IE 10-. * 2. قم بإزالة الحشوة في IE 10-. * /، (box-sizing: border-box؛ / * 1 * / padding: 0؛ / * 2 * /) / ** * تصحيح نمط المؤشر لأزرار الزيادة والإنقاص في Chrome. * / :: - webkit-inner-spin-button ، :: - webkit-extra-spin-button (الارتفاع: تلقائي ؛) / ** * 1. صحح المظهر الغريب في Chrome و Safari. * 2. تصحيح نمط المخطط التفصيلي في Safari. * / (-webkit-المظهر: textfield؛ / * 1 * / outline-offset: -2px؛ / * 2 * /) / ** * قم بإزالة الحشو الداخلي وأزرار الإلغاء في Chrome و Safari على macOS. * / :: - زر إلغاء بحث webkit ، :: - webkit-search-decoration (-webkit-المظهر: لا شيء ؛) / ** * 1. صحح عدم القدرة على نمط الأنواع القابلة للنقر في iOS و Safari. * 2. قم بتغيير خصائص الخط إلى "ترث" في Safari. * / :: - webkit-file-upload-button (-webkit-المظهر: button ؛ / * 1 * / الخط: توريث ؛ / * 2 * /) / * Interactive ============ =================================================== = =========== * / / * * أضف العرض الصحيح في IE 9-. * 1. أضف العرض الصحيح في Edge و IE و Firefox. * / تفاصيل ، / * 1 * / menu (display: block؛) / * * أضف العرض الصحيح في جميع المتصفحات. * / Summary (display: list-item؛) / * Scripting =================================== = ==================================== * / / ** * أضف العرض الصحيح في IE 9- . * / canvas (display: inline-block؛) / ** * أضف العرض الصحيح في IE. * / template (display: none؛) / * Hidden ===================================== == =================================== * / / ** * أضف العرض الصحيح في IE 10-. */ ( عرض لا شيء؛ )

إعادة التعيين عبر محدد عالمي * (علامة النجمة)

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

* (الهامش: 0 ؛ المساحة المتروكة: 0 ؛)

لكن للأسف هذه ليست ممارسة جيدة. من الصعب جدًا (ويستغرق وقتًا طويلاً مقارنة بعمليات إعادة تعيين CSS الأخرى) للمتصفح تطبيق القواعد على كل عنصر في المستند ، خاصةً على صفحات الويب الكبيرة ، ويمكنه أيضًا كسر العديد من الأنماط الافتراضية الجيدة.

إعادة تعيين الأنماط و WordPress

إذا كنت تريد استخدام إحدى طرق إعادة التعيين المذكورة أعلاه أنماط CSSبالنسبة إلى موقع WordPress ، يمكن القيام بذلك بطريقتين.

الأول هو أنك تحتاج إلى نسخ رمز إعادة التعيين إلى أعلى ملف style.css لقالب WordPress الخاص بك (بعد الأسطر المتعلقة بالتأليف واسم السمة ، أي بعد النص الذي تم تأطيره بكسر وعلامة النجمة / * ... * / .

import "reset.css" ؛

إذا كان هناك توجيهimport في CSS ، فيجب أن يكون في بداية الجدول (قبل جميع القواعد). خلاف ذلك ، قد يتجاهلها المتصفح.

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

كما ترى ، فإن إعادة تعيين الأنماط في WordPress ليس شيئًا مميزًا.

شكرًا

تم استخدام المصادر التالية في كتابة هذا المقال.