بودكاست 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="#"]
؟
a
نقطة واحدة، بينما يساوي [href="#"]
10 نقاط.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
article:hover a[href]
تصور الخصوصية
في الرسوم البيانية والحاسبات للخصوصية، غالبًا ما يتم تصور الخصوصية على النحو التالي:
المجموعة اليمنى هي 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 أحدث. وللقيام بذلك، يجب أن يتطابق مع خصوصية محدد آخر يستهدف العنصر نفسه.