تصحيح مشكلات YUI Reset CSS: كيفية الحفاظ على <em> مائل و <strong> عريض

عند العمل في تطوير الويب، قد تجد نفسك تستخدم YUI’s Reset CSS كنقطة انطلاق متسقة عبر المتصفحات. بينما يمكن أن يكون هذا مفيدًا، فقد يؤدي أيضًا إلى سلوك غير متوقع في تنسيق النصوص. تنشأ مشكلة شائعة فيما يتعلق بطريقة تعديل Reset CSS لعلامات <em> و <strong>، مما يجعلها لا تعرض كما هو مقصود.

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

فهم المشكلة

يعيد YUI’s Reset CSS كتابة تنسيق المتصفح الافتراضي، مما قد يؤدي أحيانًا إلى تعقيدات:

ما الذي يحدث؟

السطر المحدد في YUI Reset CSS الذي يسبب المشكلة هو:

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}

نتيجة لذلك، تفقد كل من علامات <em> و <strong> تنسيقها الافتراضي:

• تظهر علامات <em>، التي من المفترض أن تكون مائلة، كنص عادي.
• تظهر علامات <strong>، التي من المفترض أن تكون بخط عريض، أيضًا بوزن خط عادي.

التعارض

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

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

تتفاقم المشكلة عند استخدام كلا العلامتين معًا. على سبيل المثال:

<strong>هذا نص عريض، <em>وهذا نص مائل، ولكنه ليس عريضًا</em></strong>

هنا، رغم أن قاعدة التنسيق الخاصة بك لعلامة <strong> تعمل، فإن قاعدة Reset CSS العالمية تعيد تعيين علامة <em> وتلغي تأثير المائل.

الحل

لضمان أن أسلوبك المخصص يتفوق على YUI Reset CSS، سيتعين عليك تعديل قواعد CSS الخاصة بك. إليك كيفية القيام بذلك:

الخطوة 1: إعادة الكتابة مع خصوصية عالية

يمكنك زيادة خصوصية قواعد التنسيق الخاصة بك كما يلي:

strong, b, strong *, b * { 
  font-weight: bold; 
}

em, i, em *, i * { 
  font-style: italic; 
}

يضمن هذا التعديل أن العناصر <strong> و <b> ليست فقط مصممة بشكل مناسب، ولكن أي عناصر متداخلة داخلها ستحمل نفس التنسيق.

الخطوة 2: فرض الأنماط باستخدام !important

إذا كنت لا تزال تدعم المتصفحات القديمة مثل IE7، قد تحتاج إلى فرض أنماطك باستخدام !important. يمكن القيام بذلك كما يلي:

strong, b, strong *, b * { 
  font-weight: bold !important; 
}

em, i, em *, i * { 
  font-style: italic !important; 
}

الخطوة 3: اختبار أنماطك

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

إليك مثال سريع يمكنك تجربته:

مثال على CSS

/* أنماط YUI */
address, caption, cite, code, dfn, em, strong, th, var {
  font-style: normal;
  font-weight: normal;
}

/* أنماطك */
strong, b, strong *, b * {
  font-weight: bold;
}

em, i, em *, i * {
  font-style: italic;
}

مثال على HTML

<strong>عريض</strong> - <em>مائل</em> - <strong>عريض و <em>مائل</em></strong>

الخاتمة

باتباع الخطوات الموضحة في هذه المدونة، يمكنك بنجاح إعادة كتابة السلوك الافتراضي الذي تم تقديمه بواسطة YUI’s Reset CSS، والحفاظ على تنسيق علامات <em> و <strong> بشكل صحيح.

إذا واجهت مشكلات مثل هذه في المستقبل، تذكر أن الخصوصية وتوجيه !important يمكن أن تكون أدوات قوية في صندوق أدوات تنسيق CSS الخاص بك.

تمنياتنا بالتوفيق في البرمجة!