الدقة

بودكاست CSS - 003: الخصوصية

لنفترض أنك تعمل باستخدام لغتَي HTML وCSS التاليتَين:

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

button {
  color: red;
}

.branding {
  color: blue;
}

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

الدقة هي إحدى المراحل الأربع المختلفة للشلال، والتي تم تناولها في الوحدة الأخيرة، في الشلال.

تقييم الدقة

تحصل كل قاعدة أداة اختيار على نتيجة. ويمكنك اعتبار الدقة نتيجة إجمالية، ويكسب كل نوع من أنواع المحدد نقاطًا للوصول إلى تلك النتيجة. يفوز أداة الاختيار التي سجّلت أعلى نتيجة.

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

تسجيل نتائج كل نوع أداة اختيار

يكسب كل نوع محدد نقاطًا. يمكنك إضافة جميع هذه النقاط لحساب الخصوصية الإجمالية للأداة المحدّدة.

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

أداة الاختيار العام (*) لا تكون محددة وتحصل على 0 نقطة. هذا يعني أن أي قاعدة تتضمن نقطة واحدة أو أكثر ستتجاوزها

* {
  color: red;
}

أداة اختيار العنصر أو العنصر غير الحقيقي

تحصل أداة اختيار العنصر (النوع) أو العنصر الكاذب على نقطة خصوصية واحدة .

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

div {
  color: red;
}

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

::selection {
  color: red;
}

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

تحصل أداة الاختيار class أو pseudo-class أو السمة على 10 نقاط خصوصية.

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

.my-class {
  color: red;
}

أداة اختيار من فئة زائفة

:hover {
  color: red;
}

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

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

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

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

سيحتوي هذا النموذج على 11 نقطة من الخصوصية لأنه يحتوي على محدِّد نوع واحد (div) وفئة واحدة داخل عنصر :not().

أداة اختيار المعرّف

تحصل أداة اختيار رقم التعريف على 100 نقطة خصوصية، طالما أنك تستخدم أداة اختيار المعرّف (#myID) وليس أداة اختيار السمات ([id="myID"]).

#myID {
  color: red;
}

سمة النمط المضمّن

عند تطبيق CSS مباشرةً على سمة style لعنصر HTML، يحصل على نتيجة خصوصية تبلغ 1,000 نقطة. وهذا يعني أنّه لتجاوزها في CSS، يجب كتابة أداة اختيار محدّدة للغاية.

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

قاعدة واحدة (!important)

وأخيرًا، تحصل قيمة !important في نهاية قيمة CSS على نتيجة خصوصية تبلغ 10,000 نقطة. هذه أعلى درجة من الدقة يمكن أن يحصل عليها عنصر واحد.

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

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

التحقّق من استيعابك

اختبر معلوماتك عن تقييم الخصوصية

ما هي درجة الدقة لـ a[href="#"]؟

1
يساوي a نقطة واحدة، بينما يساوي [href="#"] 10 نقاط.
5
يُرجى اختيار إجابة أخرى.
11
يساوي a نقطة واحدة، بينما يساوي [href="#"] 10 نقاط، وبذلك يكون مجموع النقاط هو 11 نقطة.

الدقة في السياق

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

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

يحتوي هذا الرابط على فئتين. أضِف خدمة CSS التالية، وهي تحصل على نقطة خصوصية واحدة:

a {
  color: red;
}

يمكنك الإشارة إلى إحدى الفئات في هذه القاعدة، وأصبحت الآن تتضمن 11 نقطة خصوصية:

a.my-class {
  color: green;
}

أضف الفئة الأخرى إلى أداة الاختيار، أصبحت الآن تضم 21 نقطة خصوصية:

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

أضِف السمة href إلى أداة الاختيار، فقد أصبحت الآن 31 نقطة خصوصية:

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

أخيرًا، أضِف فئة :hover غير الأصلية إلى كل ذلك، تنتهي أداة الاختيار بـ 41 نقطة خصوصية:

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

التحقّق من استيعابك

اختبر معلوماتك عن تقييم الخصوصية

أيّ من أدوات الاختيار التالية يساوي 21 نقطة؟

article > section
تساوي العناصر نقطة واحدة، وهناك عنصران في أداة الاختيار، ما يجعلها نقطتَين.
article.card.dark
تساوي العناصر نقطة واحدة، بينما تساوي الفئات 10 نقاط، ومع وجود فئتَين وعنصر واحد، تصبح أداة الاختيار هذه 21 نقطة.
article:hover a[href]
تساوي العناصر نقطة واحدة، بينما تساوي الفئات الزائفة والسمات 10 نقاط، وهناك نقطتان للعناصر، و20 نقطة للسمات والفئات، ما يجعل أداة الاختيار هذه 22 نقطة.

تصور الخصوصية

في الرسوم البيانية والحاسبات للخصوصية، غالبًا ما يتم تصور الخصوصية على النحو التالي:

رسم بياني يوضّح أدوات الاختيار الأكثر تحديدًا والأقل تحديدًا

المجموعة اليمنى هي id أداة اختيار. المجموعة الثانية هي أدوات اختيار الفئة والسمة والفئة الزائفة. المجموعة الأخيرة هي محددات العناصر والعناصر الزائفة.

أداة الاختيار التالية هي 0-4-1 كمرجع لك:

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

التحقّق من استيعابك

اختبار معرفتك بتصور الخصوصية

أيّ من أدوات الاختيار التالية هي 1-2-1؟

section#specialty.dark
يتم عرض أداة الاختيار هذه على أنّها 1-1-1.
#specialty:hover li.dark
🎉
[data-state-rad].dark#specialty:hover
يتم عرض أداة الاختيار هذه على أنّها 1-3-0.
li#specialty section.dark
يتم عرض أداة الاختيار هذه على أنّها 1-1-2.

زيادة الخصوصية بشكل عملي

لنفترض أن لدينا بعض صفحات CSS التي تبدو على النحو التالي:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

باستخدام تنسيق HTML الذي يبدو على النحو التالي:

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

تظهر على الزر خلفية رمادية، لأن أداة الاختيار الثانية تحصل على 11 نقطة خصوصية (0-1-1). وذلك لأنّها تحتوي على محدِّد نوع واحد (button)، وهو نقطة واحدة وأداة اختيار السمات ([onclick])، وهي 10 نقاط.

تحصل القاعدة السابقة، .my-button، على 10 نقاط (0-1-0)، لأنها تحتوي على أداة اختيار واحدة للفئة.

إذا كنت تريد تعزيز هذه القاعدة، فكرِّر أداة اختيار الفئة على النحو التالي:

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

button[onclick] {
  background: grey;
}

أما الآن، فستكون للزر خلفية زرقاء، لأن أداة الاختيار الجديدة تحصل على نتيجة خصوصية قدرها 20 نقطة (0-2-0).

وتشهد نتيجة الخصوصية المطابِقة فوز المثيل الأحدث.

لنلقِ نظرة على مثال الزر في الوقت الحالي ونغيّر CSS إلى ما يلي:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

تظهر خلفيّة الزرّ رمادية، لأنّ أداتَي الاختيار لهما نتيجة خصوصية متطابقة (0-1-0).

إذا بدّلت القواعد في ترتيب المصدر، سيكون الزر باللون الأزرق.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

المراجِع