الدقة

The CSS Podcast - 003: Specificity

لنفترض أنّك تعمل على HTML وCSS التاليَين:

<button class="branding">Hello, Specificity!</button>

.branding {
  color: blue;
}

button {
  color: red;
}

هناك قاعدتان تستهدفان العنصر نفسه هنا. يحتوي كل قاعدة على تعريف يريد ضبط لون الزر: يحاول أحدهما تلوين الزر باللون الأحمر ويحاول الآخر تلوينه باللون الأزرق. أيّ تعريف يتم تطبيقه على العنصر؟

إنّ فهم خوارزمية التحديد في CSS هو المفتاح لفهم كيفية اتّخاذ CSS قرارًا بين التعريفات المتنافسة.

تُعدّ الخصوصية إحدى المراحل المميّزة في سلسلة التتالي، وقد تم تناولها في الوحدة الأخيرة حول سلسلة التتالي.

تسجيل نتائج الدقة

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

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

الدقة ليست عددًا عشريًا، بل هي ثلاثية تتألف من ثلاثة عناصر: A وB وC.

• ‫A: دقة تحديد الهوية
• ‫B: درجة التحديد المشابهة للفئة
• ‫C: عنصر يشبه الخصوصية

ويتم تمثيله غالبًا باستخدام الرمز (A,B,C). على سبيل المثال: (1,0,2). يُستخدَم أيضًا بشكل شائع الترميز البديل A-B-C.

كيفية مقارنة الخصائص

تتم مقارنة مستويات التحديد من خلال مقارنة المكوّنات الثلاثة بالترتيب التالي: يكون مستوى التحديد الذي يتضمّن قيمة A أكبر أكثر تحديدًا. إذا كانت قيمتا A متساويتَين، يكون مستوى التحديد الذي يتضمّن قيمة B أكبر أكثر تحديدًا. إذا كانت قيمتا B متساويتَين أيضًا، يكون مستوى التحديد الذي يتضمّن قيمة C أكبر أكثر تحديدًا. إذا كانت جميع القيم متساوية، يكون مستوى التحديد متساويًا.

على سبيل المثال، يُعدّ (1,0,0) أكثر تحديدًا من (0,4,3) لأنّ قيمة A في (1,0,0) (وهي 1) أكبر من قيمة A في (0,4,3) (وهي 0).

تؤثر أدوات الاختيار في درجة التحديد

يبدأ كل جزء في ثلاثية التحديد بقيمة 0، لذا فإنّ التحديد التلقائي هو (0,0,0). يزيد كل جزء من أداة الاختيار من درجة التحديد، ما يؤدي إلى زيادة قيمة A أو B أو C، وذلك حسب نوع أداة الاختيار.

أداة اختيار جميع أنواع العناصر

لا يضيف المحدّد العام (*) أي تحديد، ما يترك قيمته عند التحديد الأولي (0,0,0).

* {
  color: red;
}

محدِّد العناصر أو العناصر الزائفة

يضيف محدّد العنصر (النوع) أو العنصر الزائف تحديدًا يشبه العنصر، ما يؤدي إلى زيادة المكوّن C بمقدار 1.

تتضمّن الأمثلة التالية مستوى تحديدًا إجماليًا يبلغ (0,0,1).

أداة اختيار النوع

div {
  color: red;
}

أداة اختيار العناصر الزائفة

::selection {
  color: red;
}

أداة اختيار الفئة أو الفئة الصورية أو السمة

يضيف محدّد الفئة أو الفئة الزائفة أو السمة تحديدًا يشبه الفئة، ما يؤدي إلى زيادة المكوّن B بمقدار 1.

تحتوي الأمثلة التالية على درجة تحديد (0,1,0).

أداة اختيار الفئة

.my-class {
  color: red;
}

أداة اختيار الفئة الصورية

:hover {
  color: red;
}

أداة اختيار السمات

[href='#'] {
  color: red;
}

محدّد رقم التعريف

يضيف محدّد المعرّف تحديدًا مشابهًا للمعرّف يزيد المكوّن A بمقدار 1، طالما أنّك تستخدم محدّد المعرّف (#myID) وليس محدّد السمة ([id="myID"]).

في المثال التالي، تكون درجة التحديد (1,0,0)

#myID {
  color: red;
}

أدوات الاختيار الأخرى

تحتوي CSS على العديد من أدوات الاختيار. ولا يضيف بعضها أي تفاصيل. على سبيل المثال، لا يضيف الفئة الزائفة :not() أي قيمة إلى عملية احتساب التحديد.

يتم استبدال درجة التحديد الخاصة بالفئة الزائفة :not() بدرجة التحديد الخاصة بالمحدّد الأكثر تحديدًا في وسيطة المحدّدات المفصولة بفواصل، ما يوفّر درجة التحديد نفسها كما لو كانت مكتوبة :not(:is(argument)).

div:not(.my-class) {
  color: red;
}

لا تضيف الفئة الزائفة :is() أيضًا إلى عملية حساب التحديد. مثل :not()، يأخذ هذا النوع من الدوال دقة وسيطته الأكثر تحديدًا.

:is(h1, h2, h3) {
  color: blue;
}

تبلغ درجة التحديد في هذه العيّنة (0,0,1) لأنّها تتضمّن نوعًا واحدًا فقط من أدوات الاختيار (type).

مع إضافة id، تزداد الخصوصية إلى (1,0,0).

:is(h1, h2, h3, #my-heading) {
  color: blue;
}

تختلف الفئة الصورية :where(). وبغض النظر عن مدى تحديد أي من وسيطاتها، فإنّ لها دائمًا قيمة تحديد تبلغ (0,0,0).

:where(h1, h2, h3, #my-heading) {
  color: blue;
}

تتيح لك الأنماط ذات الخصوصية المنخفضة التي يتم تطبيقها باستخدام :where() إلغاء هذه الأنماط باستخدام أدوات اختيار أساسية في وقت لاحق في ورقة الأنماط:

:where(#my-content) {
   color: red;
}

p {
   color: blue;
}

على الرغم من أنّ :where() يتضمّن id في قائمة وسيطاته، إلا أنّه لا يزال يتضمّن قيمة تحديد (0, 0, 0) فقط، لذا فإنّ أداة الاختيار الأساسية p تلغيها وسيكون النص blue.

اختبِر معلوماتكَ

اختبِر معلوماتك حول تسجيل نقاط الخصوصية

<div style="color: red"></div>

.my-class {
  color: red !important;
  color: white;
}

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

<a class="my-class another-class" href="#">A link</a>

a {
  color: red;
}

a.my-class {
  color: green;
}

a.my-class.another-class {
  color: rebeccapurple;
}

a.my-class.another-class[href] {
  color: goldenrod;
}

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

<button class="my-button" onclick="alert('hello')">Click me</button>

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}