قاعدة @layer CSS

التعريف والاستخدام

CSS @layer يمكن استخدام القواعد لتحكم في ترتيب تقييم أنواع الطبقات الخاصة بالCSS (cascade layers).

يتم تحقيق ذلك عن طريق تحديد طبقة أولاً، ثم طوي مجموعة القواعد التي يجب تقييمها وفقًا لترتيب معين داخل هذه الطبقة.

@layer يمكن تعريفها بملف يحتوي على اسم أو بدون اسم

غير المسمى @layer تسمىطبقات غير المسمىطبقات غير المسمى تتم تقييمها وفقًا للترتيب المعلن (انظر الأمثلة أدناه). تتبعها التدرج الافتراضي (من الأعلى إلى الأسفل).

بملفين يحتويان على اسم فريد @layer تسمىطبقات المسمىمن خلال استخدام طبقات المسمى، يمكننا تحديد الترتيب المحدد المطلوب (انظر الأمثلة أدناه). يتم ترتيبها من الأقل تفصيلاً إلى الأكثر تفصيلاً، من اليسار إلى اليمين.

مثال

مثال 1

استخدام طبقات غير المسمى (وسيتم اتباع الترتيب الافتراضي للتدرج - من الأعلى إلى الأسفل):

/* طبقة 1 */
@layer {
  body {
    background: pink;
  }
}
/* طبقة 2 */
@layer {
  body {
    background: lightblue; /* طبقة الأعلى يتم تطبيقها */
  }
}

تجربة شخصية

مثال 2

استخدام طبقات المسمى (وتحديد الترتيب المحدد المطلوب):

/* تحديد ترتيب التدرج المحدد */
@layer bgblue, bgpink;
/* طبقة 1 */
@layer bgpink {
  body {
    background: pink; /* يتم التطبيق */
  }
}
/* طبقة 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

تجربة شخصية

قواعد اللغة الخاصة بالcss

@layer الاسم {
  declarations الخاصة بالcss;
}

قيمة الخاصية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم @ القاعدة بشكل كامل.