CSS @layer رول

تعریف و استفاده

CSS @layer قوانین می‌توانند برای کنترل ترتیب ارزیابی استایل‌های لایه‌های قالب‌بندی CSS استفاده شوند.

این از طریق تعریف یک لایه و سپس بسته‌بندی مجموعه قوانین مورد نیاز برای ارزیابی دقیق در این لایه، انجام می‌شود.

@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 name {
  declarations css;
}

مقدار ویژگی

پشتیبانی مرورگر

جداول کا شمارا می‌گوید که نسخه مرورگر اولین کامل این @قوانین پشتیبانی می‌کند.