Правило CSS @layer

Определение и использование

CSS @layer Правила могут использоваться для управления порядком оценки стилей CSS каскадирования слоев (cascade layers).

Это достигается сначала определением слоя, а затем 包装 набора правил, которые необходимо оценить в определенном порядке, в этом слое.

@layer могут быть определены с именем или без него.

без имени @layer называютсяАнонимные слои. Анонимные слои оцениваются в порядке их объявления (см. примеры ниже). Они следуют стандартному порядку каскадирования (от верхнего к нижнему).

с уникальным именем @layer называютсяИменованные слои. Через именованные слои мы можем определить точный порядок каскадирования (см. примеры下方). Порядок идет от наименее конкретного к наиболее конкретному, слева направо.

Пример

Пример 1

Используйте анонимные слои (они будут следовать стандартному порядку каскадирования - от верхнего к нижнему):

/* Слой 1 */
@layer {
  body {
    background: pink;
  }
}
/* Слой 2 */
@layer {
  body {
    background: lightblue; /* Последний слой действует */
  }
}

Попробуйте сами

Пример 2

Используйте именованные слои (и указать точный порядок каскадирования):

/* Указать точный порядок каскадирования */
@layer bgblue, bgpink;
/* Слой 1 */
@layer bgpink {
  body {
    background: pink; /* Действует */
  }
}
/* Слой 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Попробуйте сами

CSS грамматика

@layer name {
  css declarations;
}

Значение свойства

Поддержка браузера

Числа в таблице указывают на версию браузера, которая полностью поддерживает этот @ правило.