@layer
======

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
CSS @-правило **`@layer`** используется для объявления каскадного слоя, а также позволяет задать приоритеты при наличии нескольких каскадных слоёв.

Интерактивный пример
--------------------

Синтаксис
---------


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


где:

*layer-name*

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

*rules*

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

Описание
--------

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

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

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


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

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


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


```css
@layer utilities;
```


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


```css
@layer theme, layout, utilities;
```


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

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

**Примечание:** Объявив имена слоёв и установив их порядок, вы можете добавить CSS-правила в слой, повторно объявив его имя. Таким образом стили добавятся к слою, и порядок слоёв не изменится.

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


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


Это создаёт *анонимный каскадный слой*. Такой слой работает так же, как и именованные слои, однако ему нельзя позже присвоить правила. Порядок приоритета для анонимных слоёв определяется порядком их объявления, с именем или без, и ниже стилей, объявленных вне слоя.

Ещё один способ создать каскадный слой — использовать `@import` (en-US). В этом случае правила будут находиться в импортированном файле стилей. Помните, что @-правило `@import` должно предшествовать всем другим типам правил, за исключением правил `@charset` и `@layer`.


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

### Вложение слоёв

Слои могут быть вложенными, например:


```css
@layer framework {
  @layer layout {
  }
}
```


Для добавления правил в слой `layout`, который находится внутри `framework`, используйте запись через точку.


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

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

@layer =   
  @layer <layer-name>? (en-US) { <rule-list> }  | (en-US)  
  @layer <layer-name># (en-US) ;                  
  
<layer-name> =   
  <ident> (en-US) [ (en-US) '.' <ident> (en-US) ] (en-US)\* (en-US)    
  
```

Примеры
-------

### Простой пример

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

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

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

#### HTML


```html
<div class="box">
  <p>Привет, мир!</p>
</div>
```


#### CSS


```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


```html
<div class="item">
  Я отображаюсь фиолетовым цветом, потому что слой <code>special</code> идёт
  после слоя <code>base</code>. Значения свойств border, font-size и padding
  берутся из слоя <code>base</code>.
</div>
```


#### CSS


```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;
  }
}
```


#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # layering |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `@import` (en-US)
* `CSSLayerBlockRule` (en-US)
* `CSSLayerStatementRule` (en-US)
* `!important` (en-US)
* `revert-layer` (en-US)
* Введение в каскадность CSS (en-US)
* Каскад, специфичность и наследование
* Cascade layers (en-US)
* The future of CSS: Cascade layers на bram.us