Правило CSS `@layer`

@layer CSS at-правило используется для объявления каскадного слоя, а также для определения порядка приоритета в случае нескольких каскадных слоёв.

Попробуйте

@layer module, state;

@layer state {
  .alert {
    background-color: brown;
  }
  p {
    border: medium solid limegreen;
  }
}

@layer module {
  .alert {
    border: medium solid violet;
    background-color: yellow;
    color: white;
  }
}

<p class="alert">Beware of the zombies</p>

Синтаксис

/* 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. Порядок приоритета важных правил обратен порядку обычных правил. Переходы имеют наивысший приоритет. Далее, от высшего приоритета к низшему, следуют важные объявления пользовательского агента, важные пользовательские объявления и важные авторские объявления. Пользователи могут задавать стили с помощью настроек браузера, настроек операционной системы или расширений браузера. Их важные объявления имеют приоритет над важными объявлениями, заданными автором, то есть веб-разработчиком.

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

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

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

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

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

Второй способ — использовать at-правило-объявление @layer для создания одного или нескольких разделённых запятыми именованных каскадных слоёв без назначения им стилей. Это может быть один слой, как показано ниже:

@layer utilities;

Можно определить сразу несколько слоёв, как показано ниже:

@layer theme, layout, utilities;

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

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

Третий способ — создать безымянный слой с помощью блочного at-правила @layer, не указывая имя слоя. Например:

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

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

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

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

Вложенные слои

Слои можно вкладывать. Например:

@layer framework {
  @layer layout {
  }
}

Чтобы добавить правила в слой layout внутри framework, соедините два имени с помощью ..

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

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

Примеры

Базовый пример

В следующем примере создаются два правила 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)