تصريح @layer وترتيبه
صرّح بطبقات التتالي المسماة وتحكّم في ترتيب أولويتها باستخدام عبارات @layer.
تصريح @layer وترتيبه درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هي @layer؟
توفر طبقات التتالي في CSS (@layer) آلية للتحكم صراحةً في أولوية قواعد CSS ضمن التتالي، بصورة مستقلة عن الخصوصية. وتخسر الطبقات ذات الأولوية الأقل حتى عندما تحتوي على محددات ذات خصوصية أعلى.
أهمية @layer
من دون الطبقات، تتنافس كل قاعدة CSS باستخدام الخصوصية وترتيب المصدر. ويؤدي ذلك إلى صراعات الخصوصية عندما تتنافس أنماط إعادة الضبط والمكوّنات والأدوات المساعدة على الأولوية. وتمنح الطبقات كل مجموعة أولوية ثابتة يمكن التنبؤ بها.
تعريف الطبقات
عرّف الطبقات مسبقًا في تصريح واحد. يحدد ترتيب التعريف الأولوية، إذ تتغلب الطبقات اللاحقة على الطبقات السابقة.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>موضع تعريف الطبقات
ينبغي أن يكون تعريف @layer في أعلى ملف الأنماط (أو ملف الاستيراد الرئيسي). ويمكنك إضافة الأنماط إلى الطبقات بأي ترتيب بعد التعريف، إذ يحدد ترتيب التعريف الأولوية، لا الموضع الذي أُضيفت فيه الأنماط.
لماذا لا يهم ترتيب المصدر في الطبقات
بما أن أولوية الطبقة تتحدد وقت تعريفها، يمكنك إضافة الأنماط إلى طبقة في أي موضع، بل وحتى قبل تعريفها عبر الإشارة إليها مسبقًا. فالترتيب المعرّف هو المهم.
قاعدة أولوية الطبقات
يفوز التصريح الموجود في طبقة لاحقة دائمًا على التصريح الموجود في طبقة سابقة، بصرف النظر عن الخصوصية:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>الأنماط غير الموضوعة ضمن طبقة
تُسمى الأنماط الموضوعة خارج أي طبقة غير موضوعة ضمن طبقة. وتتمتع بأعلى أولوية، حتى أعلى من آخر طبقة معرّفة. استخدمها للتجاوزات الطارئة التي ينبغي أن تفوز دائمًا.
ترتيب الأولوية
ترتيب الأولوية الكامل (من الأعلى إلى الأدنى لأنماط المؤلف):
- الأنماط غير الموضوعة ضمن طبقة (خارج أي @layer)
- آخر طبقة معرّفة (مثل utilities)
- الطبقة قبل الأخيرة (مثل components)
- الطبقات الأقدم (base وreset)
عكس !important في الطبقات
يُعد استخدام !important في الطبقات أمرًا دقيقًا، إذ يعكس ترتيب الطبقات لذلك التصريح. يفوز !important في أقدم طبقة على !important في الطبقات اللاحقة. وهذا يطابق سلوك التتالي الأصلي لأنماط المستخدم مقابل أنماط المؤلف.
الطبقات المتداخلة
يمكن تداخل الطبقات باستخدام تدوين النقاط:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>مثال على إعداد عملي
إعداد واقعي لطبقات المشروع:
<p>A realistic project layer order — see the CSS panel.</p>تحقق سريع
عُرّفت الطبقات كما يلي: @layer base, components, utilities. أي طبقة تفوز أنماطها عند حدوث تعارض؟
خلاصة
ينشئ @layer طبقات تتالٍ مرتبة صراحةً. عرّف أسماء الطبقات بترتيب الأولوية، بدءًا بالأدنى. تفوز الطبقات اللاحقة دائمًا على الطبقات السابقة، بصرف النظر عن الخصوصية. وتتمتع الأنماط غير الموضوعة ضمن طبقة بأعلى أولوية. ويعكس !important ترتيب أولوية الطبقات لذلك التصريح.
الأسئلة الشائعة
هل درس «تصريح @layer وترتيبه» مجاني؟
نعم — نص درس «تصريح @layer وترتيبه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تصريح @layer وترتيبه»؟
صرّح بطبقات التتالي المسماة وتحكّم في ترتيب أولويتها باستخدام عبارات @layer. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «تصريح @layer وترتيبه»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تصريح @layer وترتيبه
- إضافة الأنماط إلى الطبقات
- أولوية الطبقات وتفاعل !important
- الطبقات في تعليمات برمجية من جهات خارجية