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()
أيّ شيء إلى عملية احتساب النوعية.
ومع ذلك، تتم إضافة المحدّدات التي تم تمريرها كوسيطات إلى عملية احتساب النوعية.
div:not(.my-class) {
color: red;
}
يحتوي هذا العيّنة على درجة دقة (0,1,1)
لأنّه يحتوي على أداة اختيار نوع واحدة (div
) ودرجة واحدة داخل :not()
.
التحقّق من فهمك
اختبِر معلوماتك حول احتساب الدقّة
ما هي خصوصية a[href="#"]
؟
(0,1,0)
(0,0,1)
(0,1,1)
العوامل التي لا تؤثّر في النوعية
هناك بعض المفاهيم الخاطئة الشائعة حول العوامل التالية التي تؤثّر في التحديد.
سمات النمط المضمّنة
لا يؤثّر ملف CSS الذي يتم تطبيقه مباشرةً على سمة style
لعنصر ما،
في النوعية لأنّه خطوة مختلفة في التسلسل
التي يتم تقييمها قبل النوعية.
<div style="color: red"></div>
لإلغاء هذا البيان من داخل جدول أسلوب، عليك اللجوء إلى الحصول على بيان الفوز في خطوة سابقة من التسلسل.
على سبيل المثال، يمكنك إضافة !important
إليه،
لكي يصبح جزءًا من مصدر !important
الذي تم إنشاؤه.
!important
بيان
لا يؤثّر الرمز !important
في نهاية تعريف CSS في النوع المميّز
ولكنّه يضع التعريف في مصدر مختلف، وهو !important
من تأليف.
في المثال التالي، لا تكون النوعية المحدّدة لـ .my-class
ذات صلة بفوز بيان
!important
.
.my-class {
color: red !important;
color: white;
}
عندما يكون !important
لبيانَين، تُستخدَم السمة المحدّدة مرة أخرى،
لأنّ خطوة المصدر من التسلسل الهرمي لم تتمكّن من تحديد الفائز بعد.
.branding {
color: blue !important;
}
button {
color: red !important;
}
الدقة في السياق
عند استخدام أداة اختيار معقّدة أو مركبة، يساهم كل جزء من هذه الأداة في زيادة التحديد. إليك مثال على رمز HTML:
<a class="my-class another-class" href="#">A link</a>
يتضمّن هذا الرابط صفّين دراسيَّين.
تحتوي القاعدة في ملف CSS التالي على درجة تحديد (0,0,1)
:
a {
color: red;
}
إذا كنت تشير إلى إحدى الفئات في أداة الاختيار،
سيكون لها الآن درجة دقة تبلغ (0,1,1)
:
a.my-class {
color: green;
}
أضِف الفئة الأخرى إلى أداة الاختيار،
وأصبح لديها الآن درجة خصوصية (0,2,1)
:
a.my-class.another-class {
color: rebeccapurple;
}
أضِف سمة href
إلى أداة الاختيار،
وأصبحت الآن لها خصوصية (0,3,1)
:
a.my-class.another-class[href] {
color: goldenrod;
}
أخيرًا، أضِف فئة زائفة :hover
إلى كل ذلك،
وينتهي أداة الاختيار بنسبة تحديد (0,4,1)
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
التحقّق من فهمك
اختبِر معلوماتك حول احتساب الدقّة
أيّ من أدوات الاختيار التالية لها خصوصية (0,2,1)
؟
article:hover a[href]
article > section
article.card.dark
زيادة التحديد بشكل عملي
لنفترض أنّ لديك بعض تنسيقات CSS التي تبدو على النحو التالي:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
باستخدام رمز HTML الذي يبدو على النحو التالي:
<button class="my-button" onclick="alert('hello')">Click me</button>
يحتوي الزر على خلفية رمادية،
لأنّ المحدّد الثاني له درجة تحديد (0,1,1)
.
ويعود السبب في ذلك إلى أنّها تحتوي على أداة اختيار نوع واحدة (button
)،
وهي (0,0,1)
وأداة اختيار سمة واحدة ([onclick]
)، وهي (0,1,0)
.
تساوي القاعدة السابقة، .my-button
، (0,1,0)
لأنّها تحتوي على أداة اختيار فئة واحدة، وهي أقل تحديدًا من (0,1,1)
.
إذا أردت تحسين هذه القاعدة، يمكنك تكرار أداة اختيار الفئة على النحو التالي:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
سيظهر للزرّ الآن خلفية زرقاء،
لأنّ أداة الاختيار الجديدة تحصل على درجة تحديد (0,2,0)
.
في حال تساوي درجة التحديد، يتم الرجوع إلى الخطوة التالية في التسلسل.
لنبقى في مثال الزرّ الآن ولنبدِّل خدمة مقارنة الأسعار إلى ما يلي:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
يحتوي الزر على خلفية رمادية،
لأنّ كلتا أداتَي الاختيار تتضمّنان درجة تحديد متطابقة تبلغ (0,1,0)
.
إذا بدّلت القواعد بترتيب المصدر، سيظهر الزر باللون الأزرق.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
ويعود السبب في ذلك إلى أنّ كلا أداتَي الاختيار تتضمّنان التحديد نفسه. في هذه الحالة، يعود التسلسل إلى خطوة ترتيب الظهور.