بودكاست CSS - 004: The Cascade
الاختصار CSS يعني أوراق الأنماط المتتالية. الشلال هو خوارزمية لحل التعارضات حيث تنطبق قواعد CSS متعددة على عنصر HTML. هذا هو سبب ظهور نص الزر بتنسيق CSS التالي باللون الأزرق.
button {
color: red;
}
button {
color: blue;
}
ويساعدك فهم خوارزمية الشلال في فهم الطريقة التي يحل بها المتصفح تعارضات مثل هذه. تنقسم خوارزمية الشلال إلى 4 مراحل منفصلة.
- موضع وترتيب الظهور: ترتيب ظهور قواعد CSS
- الدقة: خوارزمية تحدّد أداة اختيار لغة CSS الأكثر تطابقًا.
- المصدر: ترتيب ظهور CSS ومصدره، سواء كان ذلك نمط المتصفح أو CSS من إضافة متصفح أو CSS التي أنشأتها
- الأهمية: يتم ترجيح بعض قواعد CSS أكثر من غيرها،
خصوصًا مع نوع القاعدة
!important
موضع الظهور وترتيبه
تراعي السلسلة المتتالية ترتيب ظهور قواعد CSS وكيفية ظهورها بينما تحسب درجة دقة التعارض.
يعد العرض التوضيحي مباشرةً في بداية هذا الدرس هو المثال الأكثر وضوحًا للموضع. هناك قاعدتان تحتويان على أدوات اختيار متطابقة تمامًا، وبالتالي، يتم الفوز بالقاعدة الأخيرة التي يتم الإعلان عنها.
ويمكن أن تأتي الأنماط من مصادر مختلفة على صفحة HTML،
مثل علامة <link>
وعلامة <style> مضمّنة
وCSS مضمَّنة كما هو محدّد في سمة style للعنصر.
إذا كان لديك <link> يتضمّن CSS في أعلى صفحة HTML،
سيكون هناك <link> آخر يتضمن CSS في أسفل صفحتك: العنصر <link> السفلي في الجزء السفلي سيكون الأكثر تحديدًا.
ويحدث ذلك أيضًا مع عناصر <style> المضمَّنة.
تصبح أكثر تحديدًا، كلما تنقلت إلى أسفل الصفحة.
<link />.
قاعدة CSS التي تم ضبطها لتكون داكنة هي في ورقة أنماط مرتبطة ثانية
ويتم تطبيقها بسبب موضعها اللاحق.ينطبق هذا الترتيب أيضًا على عناصر <style> المضمّنة.
وإذا تم الإعلان عنها قبل <link>،
سيتم توفير أقصى درجات الدقة في CSS لورقة الأنماط المرتبطة.
<style> في <head>،
بينما يتم الإعلان عن العنصر <link /> في <body>.
هذا يعني أنّه أكثر تحديدًا من العنصر <style>.إنّ السمة style المضمّنة التي تتضمّن CSS المضمّنة فيها ستلغي جميع سمات CSS الأخرى،
بغض النظر عن موضعها، ما لم يتم تحديد !important في البيان.
ينطبق الموضع أيضًا بترتيب قاعدة CSS.
في هذا المثال، ستكون خلفية العنصر أرجوانية لأنه تم الإعلان عن السمة background: purple في النهاية.
بما أنّه قد تم تحديد الخلفية الخضراء قبل الخلفية الأرجوانية، سيتجاهلها المتصفّح الآن.
.my-element {
background: green;
background: purple;
}
يمكن أن تكون القدرة على تحديد قيمتَين للسمة نفسها طريقة بسيطة لإنشاء عناصر احتياطية للمتصفحات التي لا تتيح قيمة معيّنة.
في هذا المثال التالي، تم الإعلان عن font-size مرتين.
إذا كان المتصفّح يتيح استخدام clamp()،
سيتم تجاهل بيان font-size السابق.
إذا كان المتصفّح غير متوافق مع clamp()،
سيتم الالتزام بالبيان الأولي وسيكون حجم الخط 1.5 ميل
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
التحقّق من استيعابك
اختبر معلوماتك عن الشلال
إذا كان لديك ترميز HTML التالي على صفحتك:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<button>I am a button</button>
<style>
button {
background: pink;
}
</style>
</body>
</html>
في styles.css، توجد قاعدة CSS التالية:
button {
background: yellow;
}
ما لون خلفية الزر؟
<style> المضمَّن في أسفل الصفحة عن العلامة <link>، لذلك على الرغم من أنّ قيمة button هي نفسها، يمكنك تحقيق ذلك من خلال موضع قاعدة النمط.
الدقة
الدقة هي خوارزمية تحدّد أداة اختيار لغة CSS الأكثر تحديدًا، باستخدام نظام ترجيح أو نظام جمع النتائج لإجراء هذه العمليات الحسابية. من خلال جعل القاعدة أكثر تحديدًا، يمكنك تطبيقها حتى لو ظهرت لاحقًا بعض CSS الأخرى التي تطابق أداة الاختيار في CSS.
في الدرس التالي، يمكنك معرفة تفاصيل عن كيفية احتساب الدقة، إلا أنّ وضع بعض الأمور في الاعتبار سيساعدك على تجنب الكثير من مشاكل الخصوصية.
إنّ استهداف CSS لفئة معيّنة على عنصر ما سيجعل هذه القاعدة أكثر تحديدًا،
وبالتالي يُعتبَر تطبيقها أكثر أهمية من استهداف CSS للعنصر وحده.
وهذا يعني أنّه في لغة CSS التالية،
سيتم تلوين علامة h1 باللون الأحمر على الرغم من تطابق القاعدتين مع توفُّر قاعدة أداة الاختيار h1 لاحقًا في ورقة الأنماط.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
تجعل id خدمة CSS أكثر تحديدًا،
لذا ستحل الأنماط المطبّقة على المُعرّف محل تلك الأنماط المطبَّقة بالعديد من الطرق الأخرى.
لهذا السبب، من غير المستحسن بشكل عام إرفاق الأنماط بالسمة id.
قد يؤدي ذلك إلى صعوبة استبدال هذا النمط بشيء آخر.
الدقة تراكمية
كما ستعرف في الدرس التالي، يتم منح كل نوع من المحددات نقاطًا تشير إلى مدى خصوصيتها،
وتتم إضافة النقاط لجميع المحددات التي استخدمتها لاستهداف عنصر معًا.
وهذا يعني أنّه إذا استهدفت عنصرًا باستخدام قائمة أدوات اختيار مثل a.my-class.another-class[href]:hover، سيصعب استبداله بأخرى CSS.
لهذا السبب، وللمساعدة في جعل CSS أكثر قابلية لإعادة الاستخدام،
ننصحك بجعل أدوات الاختيار بسيطة قدر الإمكان.
استخدم الخصوصية كأداة للحصول على العناصر عند الحاجة،
ولكن فكر دائمًا في إعادة بناء قوائم المحددات الطويلة والمحددة، إن أمكن.
الأصل
لا تكون CSS التي تكتبها هي CSS الوحيدة التي يتم تطبيقها على الصفحة. يأخذ الشلال في الاعتبار أصل CSS. ويتضمّن هذا المصدر ورقة الأنماط الداخلية للمتصفِّح، والأنماط التي تمت إضافتها من خلال إضافات المتصفّح أو نظام التشغيل، وصفحات الأنماط المتتالية (CSS) التي كتبتها. في ما يلي ترتيب خصوصية هذه الأصول، من الأقل تحديدًا إلى الأكثر تحديدًا:
- الأنماط الأساسية لوكيل المستخدم: هذه هي الأنماط التي يطبقها المتصفح على عناصر HTML افتراضيًا.
- أنماط المستخدمين المحليين: يمكن أن تأتي هذه الإعلانات من مستوى نظام التشغيل، مثل حجم الخط الأساسي، أو تفضيل الحركة المخفّضة. ويمكن أن يكون مصدرها إضافات المتصفّح أيضًا، مثل إضافة متصفّح تتيح للمستخدم كتابة لغة CSS مخصّصة لصفحة ويب.
- CSS الذي تم إنشاؤه. خدمة مقارنة الأسعار (CSS) التي تنشئها
- تاريخ التأليف:
!important. أي!importantتتم إضافتها إلى البيانات التي تم إنشاؤها: - أنماط المستخدمين المحليين
!important: أي علامة!importantتأتي من مستوى نظام التشغيل أو CSS على مستوى إضافة المتصفّح. - وكيل المستخدم
!important. أي!importantيتم تحديدها في خدمة مقارنة الأسعار (CSS) التلقائية التي يوفّرها المتصفّح.
إذا كان لديك نوع قاعدة !important في خدمة مقارنة الأسعار (CSS) التي كتبتها وكان المستخدم لديه نوع قاعدة !important في CSS المخصّص له، من الأفضل CSS؟
التحقّق من استيعابك
اختبِر معلوماتك حول أصول الشلال
اختبِر معلوماتك حول أصول التسلسلات، وفكِّر في قواعد الأنماط التالية من مصادر مختلفة:
نمط وكيل المستخدم
h1 { margin-block-start: 0.83em; }
حذاء طويل
h1 { margin-block-start: 20px; }
أنماط مؤلف الصفحة
h1 { margin-block-start: 2ch; }
@media (max-width: 480px) {
h1 { margin-block-start: 1ch; }
}
النمط المخصص للمستخدم
h1 { margin-block-start: 2rem !important; }
بعد ذلك، ضع في الاعتبار محتوى HTML التالي:
<h1>Lorem ipsum</h1>
ما هو آخر margin-block-start من h1؟
!important يتضمّن المصدر الأكثر تحديدًا.مدى الأهمية
لا يتم احتساب جميع قواعد CSS بشكل متطابق مع بعضها البعض، أو تُعطى نفس الدقة مثل بعضها البعض.
يكون ترتيب الأهمية، من الأقل أهمية إلى الأكثر أهمية، كما يلي:
- نوع القاعدة العادي، مثل
font-sizeأوbackgroundأوcolor - نوع قاعدة واحد (
animation) - نوع قاعدة
!important(يتبع ترتيب المصدر نفسه) - نوع قاعدة واحد (
transition)
تكون أنواع قواعد النقل والرسوم المتحركة النشطة أهمية أكبر من القواعد العادية.
في حال الانتقالات ذات أهمية أعلى من !important نوع من القواعد.
وذلك لأنه عندما تصبح الرسوم المتحركة أو الانتقال
نشطين، فإن سلوكها المتوقع هو تغيير الحالة المرئية.
استخدام أدوات مطوري البرامج لمعرفة سبب عدم تطبيق بعض CSS
ستعرض "أدوات مطوري البرامج في المتصفّح" عادةً جميع صفحات CSS التي يمكن أن تطابق عنصرًا ما، مع تلك التي لا يتم استخدامها المشطوبة.
إذا لم تظهر CSS التي توقعت تطبيقها على الإطلاق، فهذا يعني أنّها لا تطابق العنصر. في هذه الحالة، ستحتاج إلى البحث في مكان آخر، ربما يكون هناك خطأ إملائي في اسم فئة أو عنصر أو بعض CSS غير صالح.
التحقّق من استيعابك
اختبر معلوماتك عن الشلال
يمكن استخدام The Cascade مع...