قانون CSS @layer

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

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

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

@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 {
  تعریف‌های css;
}

مقدار ویژگی

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

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