إضافة الأنماط إلى الطبقات

يمكنك إضافة الأنماط إلى طبقة مباشرةً (داخل كتلة @layer) أو عبر @import (لتعيين ورقة أنماط مستوردة إلى طبقة).

ضع القواعد داخل كتلة @layer تتضمن اسم الطبقة:

يمكنك الإضافة إلى طبقة عبر كتل @layer منفصلة متعددة. تُدمج جميع التصريحات في الطبقة نفسها:

تنشئ كتلة @layer من دون اسم طبقة مجهّلة. ولا يمكن إضافة أنماط إلى الطبقات المجهّلة لاحقًا، كما أنها توجد في الموضع الذي تظهر فيه:

عيّن ورقة أنماط مستوردة كاملة إلى طبقة:

في مشروع معياري، يضيف كل ملف مكوّن أنماطه إلى طبقة components:

يعمل كل من Sass وPostCSS جنبًا إلى جنب مع @layer. ويمكنك تعريف الطبقات في ملف الإدخال الرئيسي واستخدام @use أو @import لتضمين الملفات الجزئية للمكوّنات التي تضيف أنماطها إلى تلك الطبقات.

لا تتأثر الأنماط المضمّنة (السمة style="") بالطبقات، بل تفوز دائمًا على أنماط أي طبقة. ولا يمكن وضع قواعد أوراق الأنماط (بما في ذلك كتل <style>) إلا داخل الطبقات.

يعرض Chrome DevTools حدود الطبقات في لوحة Styles. وتظهر قواعد الطبقة ذات الأولوية الأقل التي تتجاوزها طبقة أعلى مشطوبة، مع تحديد الطبقة الفائزة.

تتعامل المتصفحات التي لا تدعم @layer مع جميع كتل @layer بوصفها كتل CSS عادية (فتعرض كل شيء). ويختلف سلوك التتالي، لكن الأنماط لا تفقد. وللأمان، ضع التعليمات البرمجية المعتمدة على هذه الميزة داخل @supports (@layer selector).

استراتيجية الترحيل:

1. عرّف الطبقات في أعلى ملف CSS الرئيسي
2. ضع كل قسم CSS موجود داخل كتلة الطبقة المقابلة له
3. اختبر أي مشكلات في الأولوية تظهر وأصلحها
4. أزل تدريجيًا المحددات غير الضرورية ذات الخصوصية العالية

كيف تضيف أنماطًا من كتل @layer منفصلة متعددة إلى الطبقة المسماة نفسها؟

أضف الأنماط إلى الطبقات باستخدام كتل @layer name { } المسماة، التي يمكن تقسيمها عبر الملفات وستُدمج جميعها. عيّن أوراق الأنماط المستوردة إلى الطبقات باستخدام @import layer(). ولا يمكن إعادة فتح الطبقات المجهّلة. وتتجاوز الأنماط المضمّنة دائمًا الأنماط المعرّفة داخل الطبقات.