Regra CSS @layer

Definição e uso

CSS @layer As regras podem ser usadas para controlar a ordem de avaliação do estilo nas camadas de sobreposição CSS (cascade layers).

Isso é feito primeiramente definindo uma camada e, em seguida, envolvendo o conjunto de regras que precisa ser avaliado em ordem específica dentro dessa camada.

@layer Pode ser definida com ou sem nome.

Sem nome @layer ChamadaCamada anônimaCamadas anônimas são avaliadas na ordem das declarações (veja os exemplos abaixo). Elas seguem a ordem padrão de sobreposição (de cima para baixo).

Com nome único @layer ChamadaCamada nomeadaPelo nome das camadas, podemos especificar a ordem exata de sobreposição necessária (veja os exemplos abaixo). A ordem vai da menos específica para a mais específica, de esquerda para direita.

Exemplo

Exemplo 1

Usar camadas anônimas (elas seguirão a ordem padrão de sobreposição - de cima para baixo):

/* Camada 1 */
@layer {
  body {
    background: pink;
  }
}
/* Camada 2 */
@layer {
  body {
    background: lightblue; /* Última camada aplicada */
  }
}

Experimente você mesmo

Exemplo 2

Usar camadas nomeadas (e especificar a ordem exata de sobreposição necessária):

/* Especificar a ordem exata de sobreposição */
@layer bgblue, bgpink;
/* Camada 1 */
@layer bgpink {
  body {
    background: pink; /* Aplicado */
  }
}
/* Camada 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Experimente você mesmo

Sintaxe CSS

@layer name {
  declarações css;
}

Valor do atributo

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a regra @.