التسلسل: المصدر والترتيب
افهم كيف يحدّد مصدر ورقة الأنماط (المستخدم والمؤلف والمتصفح) وترتيب المصدر أولوية التسلسل
التسلسل: المصدر والترتيب درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما التتابع؟
التتابع هو الخوارزمية التي تستخدمها CSS لتحديد إعلان النمط الفائز عندما تستهدف عدة قواعد الخاصية نفسها في العنصر نفسه. وتأخذ الخوارزمية في الاعتبار المصدر والأهمية والخصوصية وترتيب المصدر.
مصادر التتابع
تأتي إعلانات CSS من ثلاثة مصادر، مرتبة حسب الأولوية:
- ورقة أنماط وكيل المستخدم — الإعدادات الافتراضية للمتصفح
- ورقة أنماط المستخدم — الأنماط المخصصة التي يحددها المستخدمون (لإمكانية الوصول)
- ورقة أنماط المؤلف — ملفات CSS الخاصة بك
أولوية مصدر التتابع (العادية)
في الإعلانات العادية، أي غير المهمة، تتجاوز أنماط المؤلف أنماط المستخدم، وتتجاوز أنماط المستخدم أنماط وكيل المستخدم. ولهذا تتغلب CSS الخاصة بك على الإعدادات الافتراضية للمتصفح.
أولوية مصدر التتابع (!important)
تؤدي إضافة !important إلى عكس ترتيب المصادر لذلك الإعلان:
!importantالخاص بوكيل المستخدم!importantالخاص بالمستخدم — الأولوية الأعلى (لإمكانية الوصول)!importantالخاص بالمؤلف
ولهذا لا يمكن التغلب على تجاوزات إمكانية الوصول الخاصة بالمستخدم، مثل الألوان المفروضة، باستخدام CSS الخاصة بالمؤلف.
بعد المصدر: الخصوصية
عندما تتنافس إعلانات من المصدر نفسه، تحدد الخصوصية الفائز. تفوز الخصوصية الأعلى، وهذا ما يفكر فيه المطورون أولًا عند تصحيح أخطاء CSS.
بعد الخصوصية: ترتيب المصدر
عندما تتمتع قاعدتان بالخصوصية نفسها، تفوز القاعدة التي تظهر لاحقًا في ورقة الأنماط. وهذه هي قاعدة «ترتيب المصدر». ولهذا يهم ترتيب عبارات @import وإعلانات @keyframe الخاصة بك.
@layer والمصدر
تضيف طبقات تتابع CSS، أي @layer، خطوة جديدة إلى التتابع بين المصدر والخصوصية. ويحدد ترتيب الطبقات الأولوية، ويفوز الإعلان الموجود في طبقة لاحقة على إعلان في طبقة سابقة بغض النظر عن خصوصيتهما.
الأولوية الكاملة للتتابع
ترتيب الأولوية الكامل، من الأعلى إلى الأدنى:
- المصدر + الأهمية (!important الخاص بالمستخدم، !important الخاص بالمؤلف)
- قيم الرسوم المتحركة
- طبقات CSS (تفوز الطبقات اللاحقة)
- الخصوصية
- ترتيب المصدر
- قيم الانتقالات
التوريث مقابل التتابع
يختلف التوريث عن التتابع. تأتي القيم الموروثة من النمط المحسوب للعنصر الأب. وتخسر هذه القيم أمام أي قيمة مطبقة مباشرةً، حتى إذا جاءت من قاعدة منخفضة الخصوصية.
استخدام ترتيب المصدر عمدًا
ضع أنماط المتغيرات، أي الأنماط الأكثر تحديدًا، بعد الأنماط الأساسية في ورقة الأنماط. ولهذا يجب استيراد ملفات المكونات بعد ملفات إعادة الضبط والملفات الأساسية.
تصحيح أخطاء التتابع
في لوحة Styles في DevTools، تُدرج القواعد من أعلى أولوية إلى أدناها. وتشير القواعد المشطوبة إلى خسارتها في التتابع. مرر المؤشر فوق القاعدة لعرض ملف المصدر ورقم السطر بهدف تصحيح الأخطاء.
اختبار سريع
تستهدف قاعدتان الخاصية نفسها وتتمتعان بالخصوصية نفسها. أيهما تفوز؟
مراجعة
يحسم التتابع تعارضات الأنماط باستخدام المصدر (المؤلف > المستخدم > المتصفح)، ثم الأهمية (تعكس !important الترتيب)، ثم ترتيب @layer، ثم الخصوصية، ثم ترتيب المصدر. يتيح لك فهم التتابع التنبؤ بالقاعدة الفائزة في أي تعارض بدقة، دون مزيد من التخمين.
الأسئلة الشائعة
هل درس «التسلسل: المصدر والترتيب» مجاني؟
نعم — نص درس «التسلسل: المصدر والترتيب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «التسلسل: المصدر والترتيب»؟
افهم كيف يحدّد مصدر ورقة الأنماط (المستخدم والمؤلف والمتصفح) وترتيب المصدر أولوية التسلسل تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «التسلسل: المصدر والترتيب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حساب الخصوصية: Inline وID وClass وElement
- التسلسل: المصدر والترتيب
- !important: متى ولماذا لا نستخدمها
- التوريث والخاصية all