@layer

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

где:

layer-name

Название каскадного слоя.

rules

Набор CSS-правил каскадного слоя.

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

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

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

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

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

Второй способ — создать именованный каскадный слой без стилей. Можно определить один слой:

@layer utilities;

Или несколько слоёв одновременно:

@layer theme, layout, utilities;

Это полезно, потому что первоначальный порядок объявления слоёв указывает на их приоритет. Если объявления найдены в нескольких слоях, то наивысшим приоритетом обладает последний слой. Таким образом, в предшествующем примере, если бы в слоях theme и utilities было найдено одинаковое правило, победу одержало бы правило из utilities и оно было бы применено.

Правило в слое utilities будет применено даже если у него меньшая специфичность, чем правило в слое theme. Это происходит потому, что после определения порядка слоёв игнорируются специфичность и порядок появления. Это позволяет создавать более простые селекторы в CSS, поскольку не нужно обеспечивать высокую специфичность селектора для переопределения конфликтующих правил, важно только, чтобы он появлялся в более позднем слое.

Третий способ — создать каскадный слой без имени:

@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>Привет, мир!</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>special</code> идёт
  после слоя <code>base</code>. Значения свойств border, font-size и padding
  берутся из слоя <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
• Каскад, специфичность и наследование
• Cascade layers
• The future of CSS: Cascade layers на bram.us