@layer

Директива CSS @layer (шар) використовується для оголошення каскадного шару, а також може вживатися для визначення порядку пріоритету, коли каскадних шарів декілька.

Спробуйте його в дії

Синтаксис

/* директиви-інструкції */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* директиви-блоки */
@layer {rules}
@layer layer-name {rules}

де:

layer-name

Це назва каскадного шару.

rules

Це набір правил CSS у каскадному шарі.

Опис

Правила в межах одного каскадного шару каскадують разом, надаючи веброзробникам більше контролю над каскадом. Стилі, визначені поза шарами, завжди перемагають стилі, оголошені в названих і анонімних шарах.

Наступна діаграма показує пріоритетність шарів, причому шари оголошені послідовно, 1, 2, ..., N.

Порядок оголошення – важливий. Перший оголошений шар отримує найнижчий пріоритет, а останній – найвищий. Проте така пріоритетність перекидається на зворотну, коли вживається позначка !important.

Директива @layer вживається для створення каскадного шару одним із трьох способів.

Перший спосіб – за допомогою директиви-блоку @layer створити названий каскадний шар із правилами CSS для цього шару всередині, як показано нижче:

@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

Другий спосіб – скористатися директивою-інструкцією @layer, аби створити один або кілька розділених комами каскадних шарів, не присвоюючи їм жодних стилів. Це може бути один шар, як показано нижче:

@layer utilities;

Можна зразу визначити декілька шарів, як показано нижче:

@layer theme, layout, utilities;

Це корисно, тому що початковий порядок, у якому оголошуються шари, вказує на те, який шар має пріоритет. Як і для оголошень, останній шар у переліку перемагає, якщо оголошення знайдено в декількох шарах. Тому, у попередньому прикладі, якщо конкурентні правила знайдено в theme і utilities, то перемагає те, що в utilities, – воно й застосовується.

Правило в utilities буде застосоване, навіть якщо воно має меншу специфічність, ніж правило в theme. Бо коли сформовано порядок шарів, то специфічність і порядок появи ігноруються. Це дає змогу створювати простіші селектори CSS, оскільки немає потреби перевіряти, що селектор матиме достатньо високу специфічність, аби переважити конкурентні правила; все, що потрібно, – це переконатися, що воно з'являється в пізнішому шарі.

[!NOTE] Після оголошення назв шарів, задавши їх порядок, можна додати до шару правила CSS, повторно оголосивши його назву. Ці стилі будуть додані до шару, а порядок шарів не зміниться.

Третій спосіб – створити неназваний шар, скориставшись директивою-блоком @layer, не вказавши в ній назву для шару. Наприклад:

@layer {
  p {
    margin-block: 1rem;
  }
}

Це породжує анонімний каскадний шар. Такий шар діє так само, як і названі шари; проте йому не можна призначити правила пізніше. Порядок пріоритету для анонімних шарів – це порядок, у якому вони оголошені, незалежно від наявності в них назви, і цей порядок нижчий за стилі, оголошені поза шарами.

Іще один спосіб створити каскадний шар – скористатися @import. У цьому випадку правила будуть у підключеному списку стилів. Пам'ятайте, що директива @import повинна передувати правилам усіх інших типів, крім директив @charset і @layer.

@import "theme.css" layer(utilities);

Вкладені шари

Шари можна вкладати один в одного. Наприклад:

@layer framework {
  @layer layout {
  }
}

Щоб додати правила до шару layout всередині framework, необхідно об'єднати дві назви . (крапкою).

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

Формальний синтаксис

@layer [ <layer-name># | <layer-name>?  {
  <stylesheet>
} ]
де 
<layer-name> = <ident> [ \'.\' <ident> ]*

Приклади

Простий приклад

У наступному прикладі створюються два правила CSS. Одне для елемента <p> поза будь-яким шаром і одне всередині шару з назвою type для .box p.

Якби шарів не було, то селектор .box p мав би найвищу специфічність, а отже, текст Привіт, світе! виводився б зеленим кольором. Оскільки шар type стоїть перед анонімним шаром, створеним для зберігання нешарового вмісту, текст буде фіолетовим.

Також зверніть увагу на порядок. Навіть попри те, що нешаровий стиль оголошено першим, він все одно застосовується після шарових стилів.

HTML

<div class="box">
  <p>Привіт, світе!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Результат

Призначення правил наявним шарам

У наступному прикладі створюються два шари без правил, а потім до них застосовуються правила CSS. Шар base визначає color, border, font-size і padding. Шар special визначає інший колір. Оскільки special стоїть останнім при визначенні шарів, використовується колір, який він надає, і текст виводиться з використанням rebeccapurple. Всі інші правила з base все ж застосовуються.

HTML

<div class="item">
  Я виводжуся з <code>color: rebeccapurple</code>, тому що шар
  <code>special</code> стоїть після шару <code>base</code>. Мої зелена межа,
  розмір шрифту та внутрішній відступ надходять з шару <code>base</code>.
</div>

CSS

@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• @import
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Знайомство з Каскадом CSS
• Каскад, специфічність і успадкування
• Каскадні шари
• Майбутнє CSS – каскадні шари на bram.us (2021)