@layer

/* statement at-rules */
@layer layer-name;
@layer layer-name, layer-name, layer-name;

/* block at-rules */
@layer {rules}
@layer layer-name {rules}

где:

layer-name

Имя слоя каскада.

rules

Набор правил CSS в слое каскада.

Правила внутри слоя каскада каскадируются вместе, предоставляя разработчикам веб-сайтов больший контроль над каскадом. Стили, которые не определены в слое, всегда переопределяют стили, объявленные в именованных и анонимных слоях.

Следующая диаграмма показывает приоритеты слоёв, где слои объявлены в порядке 1, 2, ..., N.

Как показано на диаграмме выше, важные объявления, объявления со флагом !important, имеют приоритет над обычными объявлениями, или регулярными объявлениями без флага !important. Порядок приоритета среди важных правил — обратный порядку обычных правил. Переходы имеют наивысший приоритет. Далее следуют важные объявления пользователя (user agent), важные объявления пользователя (user declarations) и важные объявления автора (author declarations) в указанном порядке. Пользователи могут указывать стили с помощью настроек браузера, настроек операционной системы или расширений браузера. Их важные объявления имеют приоритет над объявлениями автора, или разработчика веб-сайта, важными объявлениями.

В стилях автора все важные объявления внутри слоёв CSS имеют приоритет над любыми важными объявлениями, объявленными вне слоя, в то время как все обычные объявления внутри слоёв CSS имеют меньший приоритет, чем объявления, объявленные вне слоя. Порядок объявления важен. Первый объявленный слой получает самый низкий приоритет, а последний объявленный слой — самый высокий приоритет. Однако приоритет меняется при использовании флага !important.

Правило @layer используется для создания слоя каскада одним из трёх способов.

Первый способ — использование блока @layer для создания именованного слоя каскада со стилями этого слоя внутри, как показано ниже:

@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, так как вам не нужно гарантировать, что селектор будет иметь достаточно высокую специфичность, чтобы переопределить конкурирующие правила; всё, что вам нужно убедиться, это что он появляется в более позднем слое.

Третий способ — создать анонимный слой, используя правило @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 <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

В следующем примере создаются два правила CSS. Одно для элемента <p> вне любого слоя и одно внутри слоя с именем type для .box p.

Без слоёв селектор .box p будет иметь наивысшую специфичность, и поэтому текст Hello, world! будет отображаться зелёным цветом. Так как слой type идёт перед анонимным слоем, созданным для хранения содержимого без слоя, текст будет отображаться фиолетовым цветом.

Обратите также внимание на порядок. Даже если мы объявили стиль без слоя первым, он всё равно применяется после стилей слоя.

HTML

<div class="box">
  <p>Hello, world!</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">
  I am displayed in <code>color: rebeccapurple</code> because the
  <code>special</code> layer comes after the <code>base</code> layer. My green
  border, font-size, and padding come from the <code>base</code> layer.
</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)