الشلال

بودكاست CSS - 004: The Cascade

الاختصار CSS يعني أوراق الأنماط المتتالية. التتابع هو خوارزمية لحل التعارضات حيث تنطبق قواعد CSS متعددة على عنصر HTML. وهذا هو السبب في أن نص الزر المصمّم باستخدام CSS التالية سيظهر باللون الأزرق.

button {
  color: red;
}

button {
  color: blue;
}

ويساعدك فهم خوارزمية التتابع في فهم كيفية حل المتصفح لهذه التعارضات. تنقسم خوارزمية التتابع إلى 4 مراحل منفصلة.

  1. الموضع وترتيب الظهور: ترتيب ظهور قواعد CSS
  2. الدقة: خوارزمية تحدِّد أداة اختيار لغة CSS التي لها أقوى مطابقة
  3. المصدر: ترتيب ظهور CSS ومصدره، سواء كان نمط متصفّح CSS من إضافة متصفّح أو CSS التي أنشأتها
  4. الأهمية: يتم ترجيح بعض قواعد CSS بشكل أكبر من غيرها، خاصةً مع نوع القاعدة !important

الموضع وترتيب الظهور

ويؤخذ التتابع بعين الاعتبار الترتيب الذي تظهر به قواعد CSS وطريقة ظهورها. بينما يحسب حل الخلاف.

إن العرض التوضيحي في بداية هذا الدرس هو المثال الأكثر وضوحًا للموضع. هناك قاعدتان لهما محددات بنفس الدقة، لذلك فإن آخر سيتم إعلانه فاز.

يمكن أن تأتي الأنماط من مصادر مختلفة في صفحة HTML، مثل علامة <link> مع علامة <style> مضمّنة ومضمنة CSS كما هو موضح في سمة style للعنصر.

إذا كان لديك <link> يتضمن CSS أعلى صفحة HTML، ثم عنصر <link> آخر يتضمن CSS في أسفل الصفحة: سيكون لـ <link> السفلي الأكثر دقة. ويحدث الأمر نفسه مع عناصر <style> المضمّنة أيضًا. تكون أكثر تحديدًا، كلما انتقلنا إلى أسفل الصفحة.

يعرض الزر خلفية زرقاء كما هو موضح بواسطة CSS الذي يتضمنه عنصر <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.5rem

.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 هي نفسها، الموضع في قاعدة النمط يجعله فائزًا.
أصفر
إلى مستند HTML، ربما تمت قراءة خلفية الزر الأصفر. ولكن تم اكتشاف قاعدة أحدث بنفس الدقة في وقت لاحق، مما يجعل هذه القاعدة لا تنطبق على الزر.

الدقة

الدقة هي خوارزمية تحدّد أداة اختيار لغة 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 المكتوب. في ما يلي ترتيب خصوصية هذه المصادر، من الأقل تحديدًا إلى الأكثر تحديدًا:

  1. أنماط قاعدة وكيل المستخدم: هذه هي الأنماط التي يطبقها متصفّحك على عناصر HTML تلقائيًا.
  2. أنماط المستخدمين على الجهاز: يمكن أن تأتي هذه من مستوى نظام التشغيل، مثل حجم الخط الأساسي، أو تفضيل الحركة المنخفضة. يمكن أن تأتي أيضًا من إضافات المتصفح، مثل امتداد المتصفح الذي يتيح للمستخدم كتابة CSS مخصصة لصفحة الويب.
  3. محتوى CSS التأليف: تمثّل هذه السمة لغة CSS التي تؤلفها.
  4. تاريخ التأليف: !important أي سمة !important تضيفها إلى البيانات التي أنشأتَها
  5. أنماط المستخدم المحلي !important: أي !important تأتي من مستوى نظام التشغيل، أو CSS على مستوى إضافة المتصفح.
  6. وكيل المستخدم !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؟

20 بكسل
التمهيد هو جزء من الأصل المكتوب، والذي يفقد أهم أسلوب المستخدم المحلي.
0.83 م
يفقد أصل نمط وكيل المستخدم نمط المستخدم المحلي المهم.
2rem
يحتوي هذا النمط المخصّص لمستخدم "!important" على المصدر الأكثر تحديدًا.
وضعان
أسلوب المؤلف هذا هو جزء من الأصل المكتوب، والذي يفقد أسلوب المستخدم المحلي المهم.
قناة واحدة
أسلوب المؤلف هذا هو جزء من الأصل المكتوب، والذي يفقد أسلوب المستخدم المحلي المهم.

الأهمية

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

يشير ترتيب الأهمية، من الأقل أهمية، الأكثر أهمية هو على النحو التالي:

  1. نوع القاعدة العادي، مثل font-size أو background أو color
  2. نوع قاعدة واحد (animation)
  3. نوع قاعدة واحدة (!important) (باتّباع الترتيب نفسه المستخدَم في المصدر)
  4. نوع قاعدة واحد (transition)

تكون لأنواع قواعد الانتقال والرسوم المتحركة النشطة أهمية أكبر من القواعد العادية. في حالة الانتقالات، تكون الأهمية أكبر من أنواع القواعد !important. هذا لأنه عندما تصبح الرسوم المتحركة أو الانتقال نشط، سلوكه المتوقع هو تغيير الحالة المرئية.

استخدام أدوات مطوري البرامج لمعرفة سبب عدم تطبيق بعض صفحات CSS

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

صورة لـ &quot;أدوات مطوري البرامج&quot; في المتصفِّح مع رمز CSS مشطوب

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

التحقق من فهمك

اختبر معلوماتك حول الشلال

يمكن استخدام التتالي في...

حل التعارضات عند تطبيق أنماط متعددة على عنصر.
وهذا هو أحد أهدافها الأساسية، وهو حل النزاعات.
التأكد من وجود قيمة نمط واحدة فقط لكل خاصية في وقت الرسم.
يمكن أن يكون النص لونًا واحدًا فقط، والتتالي هو طريقة لتحديد أيه يجب أن يكون.
قواعد نمط تسجيل النتائج والترجيح
النتائج والأوزان هي جزء من مرحلة الفرز في The Cascade.
تصنيف سمات نمط الفرز والتصفية.
الفرز والتصفية هي مرحلتان من The Cascade للمساعدة في فهم جوانب حل النزاعات.

الموارد