أولوية CSS ، وخوارزمية التتابع (Cascade) ، والوراثة (Inheritance)

تُعد "خوارزمية التتابع" (Cascade Algorithm) العملية التي يستخدمها المتصفح لتحديد قواعد CSS الواجب تطبيقها عند وجود أنماط متعددة (multiple styles) تستهدف العنصر نفسه؛ فهي تضمن استخدام الأنماط الأكثر ملاءمةً استناداً إلى مجموعة من القواعد (rules) المحددة بوضوح.

تبدأ العملية بمبدأ الصلة أو الملاءمة؛ إذ يقوم المتصفح أولاً بتصفية جميع قواعد CSS لتحديد تلك التي تنطبق فعلياً على العنصر المعني. ويشمل ذلك مطابقة المُحدِّدات (selectors) ومراعاة استعلامات الوسائط (media queries) التي قد تكون سارية المفعول.

استعلام الوسائط (Media Query) هو تقنية في CSS تُستخدم لتطبيق أنماط بناءً على خصائص الجهاز أو منطقة العرض (viewport)، مثل العرض (width) أو الارتفاع (height) أو الاتجاه (orientation).

بعد ذلك، تأخذ الخوارزمية (algorithm) في الاعتبار المصدر والأهمية؛ إذ يمكن أن تأتي أنماط CSS من مصادر مختلفة: الأنماط الافتراضية للمتصفح (user-agent)، والأنماط التي يحددها المستخدم (user)، والأنماط التي يكتبها المؤلف (أنت).

بعد النظر في المصدر، تُقيِّم الخوارزمية (algorithm) أهمية كل قاعدة، مانحةً الأولوية (priority) للقواعد المحددة بالوسم !important ؛ إذ تتفوق هذه القواعد على غيرها بغض النظر عن مصدرها.

بعد التصفية (filtering) بناءً على المصدر والأهمية، ينظر الخوارزمي (algorithm) في مستوى التحديد (أو الخصوصية). وعندما تنطبق قاعدتان لهما المصدر ومستوى الأهمية ذاتهما، يتم تطبيق القاعدة الأكثر تحديداً.

تُعد "الخصوصية" (Specificity) مقياساً لمدى تحديد المُحدِّد (selector) لعنصر معين، حيث تحظى المُحدِّدات الأكثر تخصيصاً بالأولوية على تلك الأكثر عمومية.

وأخيراً، عند تساوي جميع العوامل الأخرى، يلعب ترتيب (order) الظهور دوراً في الأمر؛ فعندما تتساوى قاعدتان في درجة التحديد، يتم تطبيق القاعدة التي تظهر في النهاية ضمن ملف CSS.

ولهذا السبب، قد يؤثر أحياناً الترتيب الذي تكتب به أنماطك (your styles) على النتيجة.

لنلقِ نظرةً على مثال.

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

<link rel="stylesheet" href="styles.css">

<p>فقرة نموذجية</p>
        

p  {
  color: blue;
}

p  {
  color: green;
}
        

معاينة:

تُعيّن القاعدة الأولى لون نص جميع عناصر الفقرة باللون الأزرق، بينما تُعيّن القاعدة الثانية لون نص جميع عناصر الفقرة باللون الأخضر.

إذن، أي لون سيتم تطبيقه؟ سيتم تطبيق اللون الأخضر على عناصر الفقرة.

من خلال مراعاة عوامل الأولوية (relevance)، والمصدر والأهمية، والتخصيص، وترتيب الظهور، تضمن "خوارزمية التتابع" (Cascade Algorithm) أن تتصرف شيفرة CSS الخاصة بك بطريقة يمكن التنبؤ بها، مما يتيح لك تصميم صفحات ويب أكثر تعقيداً وتفصيلاً.