حساب أولوية تطبيق محددات CSS

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

عند إعادة كتابة قواعد التنسيق يجب أخذ مجموعة من القواعد بعين الاعتبار للحصول على النتيجة المطلوبة أو لتوقع النتيجة بشكل دقيق.

حساب وزن محددات CSS

ترتيب المحددات الزائفة (Pseudo-classes) للروابط

يجب كتابة المحددات الزائفة للروابط كما يلي:


a:link {color:#FF0000}  /* unvisited link */
a:visited {color:#00FF00}  /* visited link */
a:hover {color:#FF00FF}  /* mouse over link */
a:active {color:#0000FF}  /* selected link */

تغيير هذا الترتيب قد يعكس التأثير المطلوب. إذاً فالقواعد هنا كما يلي:

  • a:hover يجب أن تأتي بعد a:link و a:visited.
  • a:active يجب أن تأتي بعد a:hover.
  • المحددات الزائفة ليست حساسة لحالة الأحرف (case-insensitive).

تتالي المحددات

هل تساءلت يوماً ماذا سيحصل إذا استخدمت محددين لهما نفس الوزن مرتين كما في المثال التالي؟


#wearethesame{
color:#FFF;
}
#wearethesame{
color:#000;
}

القاعدة هنا ببساطة: عند وجود محددين لهما نفس الوزن فإن المحدد الأخير هو الفائز. أي أن الأسود هو اللون الناتج في المثال (#000).

استخدام !important

تعتبر !important (إشارة التعجب في البداية) أداة قوية في CSS، وتستعمل كما يلي (لاحظ السطر المحدد):


#wearethesame{
color:#FFF !important;
}
#wearethesame{
color:#000;
}

لأننا استعملنا !important هنا سيكون الناتج هو اللون الأبيض (#FFF). أي أنها تستخدم لتحديد قيمة إجبارية لا تعاد كتابتها.

القاعدة هنا: عند استخدام !important في أحد محددين لهما نفس الوزن، فالمحدد الذي يحتويها هو الفائز، ولا يمكن إعادة كتابة القيمة إلا بإعادة استخدام !important أو استخدام محدد ذي وزن أعلى (سنتحدث عن ذلك خلال لحظات).

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

حساب وزن المحددات

لنبدأ بمثال عن أربع محددات مختلفة تؤثر على نفس العنصر.


#thislist{color: black;}
ul li ul li.thislist{color: green;}
li.thislist{color: red;}
li{color: blue;}

على اعتبار أن لدينا نص HTML التالي:


<ul>
  <li>
    <ul>
      <li class='thislist' id='thislist'>hello!</li>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

أي لون سيظهر؟ إذا جربت ستعرف أنه الأسود. ولكن كيف نعرف ذلك؟

تزداد قابلية المحدد للظهور كلما كان أكثر تحديداً. ولكن ما معنى هذا؟ يعنى أنه كلما كان نطاق تأثير المحدد أضيق نعتبره أكثر تحديداً، فاستعمال محدد (ID) أكثر تحديداً من محدد صنف (Class) لأنه في الحالة الطبيعية يشير لنطاق أضيق من العناصر (عنصر واحد غالباً)، ومحدد الصنف أكثر تحديداً من محدد الوسم (Tag).

لحسن الحظ، هناك طريقة لحساب وزن المحدد بشكل رقمي:

  1. نحسب عدد مرات ورود محدد (ID).
  2. نحسب عدد مرات ورود محدد صنف (Class).
  3. نحسب عدد مرات ورود محدد وسم (Tag).

ينتج من ذلك ثلاثة أرقام. نرتبها من اليسار إلى اليمين لينتج معنا ما يلي:


#thislist{color: black;} /*a: 1 b: 0 c: 0 = 100*/
ul li ul li.thislist{color: green;} /*a: 0 b: 1 c: 4 = 014*/
li.thislist{color: red;} /*a: 0 b: 1 c: 1 = 011*/
li{color: blue;} /*a: 0 b: 0 c: 1 = 001*/

حيث تقابل الأحرف a و b و c البنود المذكورة أعلاه بالترتيب. ومن هنا نحصل على معامل التحديد (specificity).


#thislist = 100
ul li ul li.thislist = 014
li.thislist = 011
li = 001

ومن هنا يكون المحدد ذو المعامل الأكبر هو الأكثر تحديداً، فينتج لدينا اللون الأسود في المثال.

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

كما يجدر بالذكر أن استخدام قواعد التنسيق ضمن العنصر (embedded) يتفوق على ما سبق. أي لو كان لدينا:


<ul>
  <li>
    <ul>
      <li class='thislist' id='thislist' style='color: pink'>hello!</li>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

فإن اللون سيكون زهرياً بغض النظر عن نتيجة الحساب السابقة.

في الختام

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

في حال كان لديكم ما تضيفونه حول الموضوع الرجاء ذكره في التعليقات.

مترجم بتصرف عن هذه المقالة.

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *