الدقة

بودكاست 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;
}

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

فئة الفئة الزائفة أو تحصل أداة اختيار السمة على 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 لتقليل خصوصية أدوات الاختيار الأخرى.

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

دعنا نبقى مع مثال الزر في الوقت الحالي ونحول CSS إلى هذا:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

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

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

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

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

الموارد

• مواصفات CSS
• حاسبة الدقة
• دقة MDN
• معلومات مفصّلة حول تفاصيل خدمة مقارنة الأسعار (CSS)
• آلة حاسبة أخرى للدقة