أولوية التنفيذ للمحددات Selectors في CSS

أولوية التنفيذ للمحددات Selectors في Selectors Prioritizing in CSS

ماذا يحدث عن إسناد أكثر من تنسيق الى عنصر واحد من عناصر الـ HTML بواسطة تعليمات الـ CSS أي من هذه أنماط التنسيقات سيكون له أولوية التنفيذ… وكيف يمكن التحكم بأولوية التنفيذ لأنماط التنسيقات في الـ CSS ..؟؟!! و ماهي Specificity في الـ CSS…؟! و ماهي القاعدة (!important) في CSS..؟؟!!

توفر CSS مجموعة واسعة من الخصائص والقواعد لتحديد التنسيقات والأنماط التي يجب تطبيقها على العناصر. ومع ذلك، قد يحدث تعارض بين الأنماط المحددة، مما يؤدي إلى التساؤل حول أي منها سيتم تطبيقه بالفعل. في هذا المقال، ستكتشف قواعد أولوية التنفيذ لأنماط التنسيق في CSS. سنتعرف على خوارزمية (Specificity) في CSS حيث ودورها في تحديد الأولوية بين الأنماط المتعارضة. وسنشرح أيضًا قاعدة "!important" في CSS وكيف يمكن استخدامها..لنبدأ...

في هذا المقال نتعرف على :

• أولوية التنفيذ المحددات Selectors في CSS.
• خوارزمية Specificity في CSS.
• ما هي القاعدة ( !important ).

أولوية التنفيذ المحددات Selectors في CSS

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

في CSS يتم تطبيق أنماط التنسيق على العناصر وفقًا لأولوية التنفيذ، والتي تحدد أي محدد سيسيطر على الآخر في حالة تعارض الأنماط. تتبع CSS قواعد محددة لتحديد أولوية التنفيذ وتسمى "قواعد التصادم" (Cascade Rules). وفيما يلي نظرة عامة على أولوية التنفيذ:

الأولوية بناءً على ترتيب القواعد (Rule Order):

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

1. أنماط التنسيق المكتوبة بطريقة Inline Style (الأنماط الموجودة في Style Attribute ) لها الأولوية الأعلى.
2. أنماط التنسيق المكتوبة بطريقة Internal Style (الأنماط الموجودة في Style Tag) لها الأولوية أقل من Inline Style .
3. أنماط التنسيق المكتوبة بطريقة External Style (الأنماط الموجود في مستند CSS خارجي مرتبط ) لها الأولوية الأقل.

هذه الطرق الثلاثة الإدراج كود الـ CSS في صفحة الـ HTML وتم شرحها بالتفصيل في مقال مقدمة إلى CSS.

الأولوية بناءً على نوع المحدد (Selector Type):

تتيح CSS امكانية تحديد أولوية التنفيذ لأنماط التنسيق بناءً على نوع المحدد Selector Type نفسه. بحيث يكون الترتيب كالتالي بدء من الأعلى الأولوية الى الأدنى:

1. محدد الهوية (ID Selector).
2. محدد الفئة (Class Selector)، محدد العنصر (Element Selector)، ومحدد الأخوة (Sibling Selector).
3. المحدد العام (Universal Selector) ومحدد النسل (Descendant Selector).

إذن محدد الهوية لديه أولوية أعلى، مما يعني أن أي أنماط تم تعريفها باستخدام محدد الهوية ستكون لها الأولوية الأعلى في التنفيذ.(تم شرح انواع المحددات في مقال Selectors في CSS)

الأولوية بناء على خوارزمية (Specificity):

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

1. عدد محددات الهوية (IDs) في المحدد.
2. عدد محددات الفئات (Classes) ومحددات العناصر (Elements) في المحدد.
3. عدد محددات النسل (Descendants) ومحددات الأخوة (Siblings) في المحدد.

على سبيل المثال، المحدد الذي يحتوي على محدد هوية خاص (ID selector) سيكون له أولوية أعلى من المحدد الذي يحتوي على محدد فئة (Class selector) أو محددعنصر (Element selector) أو نسل(Descendants selectors ).

الأولوية بناء على أهمية المحدد (Importance):

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

الأولوية بناء على الوراثة (Inheritance):

في حالة عدم تحديد أي أولوية تنفيذ وإذا لم يكن هناك تعارض مباشر بين الأنماط، فإن الأنماط ترث من العناصر الأسلاف. يعني ذلك أن الأنماط المحددة على عنصر والتي لم يتم تحديدها على عناصر فرعية ستنتقل إلى العناصر الفرعية.

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

خوارزمية Specificity في CSS

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

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

تتكون Specificity من أجزاء رئيسية هي :

1. قيمة الانتقاء الأعلى (Inline styles): تُعتبر أكثر أهمية وتحصل على أعلى قيمة Specificity.
2. العناصر المحددة بمحدد الهوية (ID selectors): تحصل على قيمة Specificity عالية.
3. الفئات والعناصر المحددة بـ (Class selectors و Attribute selectors و Pseudo-classes): تحصل على قيمة Specificity متوسطة.
4. العناصر مع نوع المحدد (Type selectors و Pseudo-elements): تحصل على قيمة Specificity منخفضة.
5. المحدد العام universal selector (*) والقيم الموروثة: لها خصوصية (Specificity ) تساوي 0 ، أي يتم تجاهل المحدد العام (*) والقيم الموروثة !

وللمزيد حول Pseudo-Elements و Pseudo-classes اطلع على مقال عن العناصر والفئات الزائفة في CSS.

ويوضح الشكل التالي القيم و طريقة حساب Specificity لأ هم المحددات :

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

وتتضح طريقة العمل مع خوارزمية Specificity أكثر مع الأمثلة التالية:

في هذا المثال، أضفنا محدد فئة Class selector بإسم "container"، وحددنا لونًا أزرق لهذه الـ class.سيصبح النص الآن باللون الأزرق (على الرغم من أننا حددنا لونًا أخضر لمحدد العنصر <p>). وذلك لأن Class selector يحظى بقيمة Specificity أكبر بتالي أولوية أعلى:

...........
<style> 
      .container {color: blue;}
      p {color: green;}
  </style>
</head>
<body>
  <p class="container">Hello World!</p>
</body>
...........

الـ Output للمثال:

في هذا المثال، أضفنا محدد ID (المسمى "header"). سيصبح النص الآن باللون الأحمر لأن محدد ID selector له قيمة الـ Specificity الأكبر بالتالي الأولوية الأعلى:

...........
<style> 
      .container {color: blue;}
      p {color: green;}
      #header {color: red;}
  </style>
</head>
<body>
  <p id = "header" class="container">Hello World!</p>
</body>
...........

الـ Output للمثال:

في هذا المثال، أضفنا نمطًا مضمّنًا (Inline-style) للعنصر <p>. سيصبح النص الآن باللون الرمادي نظرًا لأن النمط المضمّن Inline style له يحظى بأكبر قيمة Specificity لهذا له الأولوية القصوى:

...........
<style> 
      .container {color: blue;}
      p {color: green;}
      #header {color: red;}
  </style>
</head>
<body>
  <p style="color: gray;" id = "header" class="container" >Hello World!</p>
</body>
...........

الـ Output للمثال:

وفي حال كانت المحددات متساوية في قيم الـ Specificity: ستفوز القاعدة الأخيرة ( the latest rule wins)- إذا تمت كتابة نفس القاعدة مرتين أو كثر ، ستفوز القاعدة الأحدث. كما يتضح معنا في المثال التالي:

...........
<style>
      p {color: red;}
      p {color: blue;}
      p {color: green;}
  </style>
</head>
<body>
  <p >Hello World!</p>
</body>
...........

الـ Output للمثال:

تتميز محددات الهوية ID selectors بقيمة specificity أعلى من محددات السمات Attributes Selectors - انظر إلى أسطر التعليمات البرمجية الثلاثة التالية فالقاعدة الأولى أكثر تحديدًا specific من القاعدتين الأخريين، وبالتالي سيتم تطبيقها:

...........
  <style>
      p#header {color: lightgreen;}
      #header {color: blue;}
      p[id ="header"] {color:red}
  </style>
</head>
<body>
  <p  id = "header" >Hello World!</p>
</body
...........

الـ Output للمثال:

تعد المحددات السياقية Contextual selectors أكثر تحديدًا من محدد العنصر الفردي Single element selector - تكون ورقة الأنماط المضمنة أقرب إلى العنصر المراد تصميمه. لذلك في الحالة التالية سيتم تطبيق القاعدة في ملف الـ HTML

From external CSS file:

...........
p#header {color: lightgreen;}
...........

In HTML file:

...........
<style>
      p#header {color: lightblue;}
  </style>
</head>
<body>
  <p  id = "header" >Hello World!</p>
</body>
...........

الـ Output للمثال:

الأمثلة بالكامل لهذا الجزء على الرابط .

باستخدام CSS Specificity، يُمكنك تنظيم وتحديد أولويات قواعد CSS والتأكد من تطبيق أنماط التنسيقات المناسبة على العناصر المحددة بشكل صحيح.

ملاحظة : هناك استثناء واحد لهذه القاعدة: إذا استخدمت القاعدة !important، فإنها ستتجاوز جميع القواعد حتى الأنماط المضمّنة (inline style )

ما هي القاعدة (!important)

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

ويوضح المثال التالي طريقة استخدام قاعدة !important:

...........
 <style> 
      /*class solector specificity = 10 */
      .container {color: blue;}
      /*element selector specificity = 1 */
      p {color: green !important;} 
      /*ID selector specificity = 100*/
      #header {color: red;}
  </style>
</head>
<body>
  <!--inline style specificity = 1000 -->
  <p style="color: gray;" id = "header" class="container" >Hello World!</p>
</body>
...........

الـ Output للمثال:

ملاحظة : الطريقة الوحيدة لتجاوز قاعدة !important هي تضمين قاعدة !important أخرى في إعلان بنفس درجة Specificity أو أعلى في الكود المصدري - وهنا تبدأ المشكلة ! وهذا يجعل كود CSS غير مفهموم وسيكون تصحيح الأخطاء صعبًا، خاصة إذا كان لديك ورقة أنماط كبيرة (ملف CSS كبير )!

لا حظ / ي المثال التالي:

...........
 <style> 
      /*class solector specificity = 10 */
      .container {color: blue !important;}
      /*element selector specificity = 1 */
      p {color: green !important;} 
      p {color: gray !important;} 
      /*ID selector specificity = 100*/
      #header {color: red !important;}
  </style>
</head>
<body>
  <!--inline style specificity = 1000 -->
  <p style="color: gray;" id = "header" class="container" >Hello World!</p>
  </body>
  ...........

الأمثلة بالكامل لهذا الجزء على الرابط .

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

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