@layer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

A regra at (at-rule) @layer é utilizada para definir uma camada de cascata, também definindo a ordem de prioridade quando temos mais de uma camada.

Experimente

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

Sintaxe

css
@layer nome-da-camada {regras}
@layer nome-da-camada;
@layer nome-da-camada, nome-da-camada, nome-da-camada;
@layer {regras}

Sendo que:

nome-da-camada

Define o nome da sua camada de cascata.

regras

São as regras CSS utilizadas dentro da camada.

Descrição

Adicionar regras CSS numa camada de cascata possibilita aos desenvolvedores web um controle maior sobre a cascata. Qualquer estilo fora de uma camada são agrupados numa camada anônima posicionada após todas as camadas declaradas, nomeadas ou anônimas. Isso significa que quaisquer estilos declarados fora de uma camada vão sobrescrever os estilos declarados em camadas, seja qual for seu grau de especificidade.

Podemos criar uma camada de cascata com a regra at @layer de três maneiras.

A primeira é criando uma camada de cascata nomeada, inserindo as regras CSS dentro deste bloco.

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

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

A segunda maneira é criando uma camada de cascata nomeada sem inserir nenhuma regra CSS, como no exemplo abaixo:

css
@layer utilitarios;

Múltiplas camadas podem ser definidas de uma só vez; como, por exemplo:

css
@layer temas, layout, utilitarios;

Isto pode ser útil pois a ordem inicial na qual as camadas são declaradas definem qual camada tem preferência. Assim como declarações, a última camada a ser definida terá preferência se declarações concorrentes forem encontradas em múltiplas camadas. Aplicando ao exemplo anterior, se uma regra conflitante estiver nas camadas temas e utilitarios, a regra encontrada no utilitarios é a vencedora e será aplicada.

A regra definida no utilitarios será aplicada mesmo se tiver especificidade mais baixa que a regra em tema. Isso ocorre, pois uma vez que a ordem das camadas é estabelecida, especificidade e ordem de aparição das regras são ignoradas. Isso nos permite criar seletores CSS mais simples, já que você não precisa se preocupar tanto se um seletor CSS terá especificidade alta o suficiente para sobrescrever regras concorrentes, você só precisa verificar se a sua regra está localizada em uma camada definida posteriormente.

Nota: Ao declarar o nome de suas camadas e sua ordem, você pode adicionar regras CSS para a camada re-declarando seu nome. Os estilos serão incluídos na camada e a ordenação das camadas não será modificada.

A terceira opção de criação de camada são as camadas anônimas, como no exemplo abaixo:

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

Esta camada funciona da mesma maneira que as camadas nomeadas; porém, não poderão ser atribuídas novas regras a esta camada depois. O seu grau de preferência segue a ordem de declaração das camadas, anônimas ou não, sendo menor do que as regras definidas fora de camada.

Outra maneira de criar uma camada de cascata é utilizando o @import. Neste caso, as regras serão as da folha de estilo importada. Lembre-se que a regra at @import deve vir antes dos outros tipos de regras, com exceção das regras @charset e @layer.

css
@import "tema.css" layer(utilitarios);

Aninhando camadas

Camadas podem ser aninhadas (nested), como no exemplo abaixo:

css
@layer framework {
  @layer layout {
  }
}

Para juntas as regras da camada layout dentro de framework, junte os dois nomes com um ..

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

Sintaxe formal

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*

Exemplos

Exemplo simples

No exemplo seguinte, duas regras CSS são criadas. Uma para o elemento <p> fora de qualquer layer, e outra em uma camada chamada tipo com o seletor .caixa p.

Sem camadas, o seletor .caixa p teria a maior especificidade, então o texto 'Olá, mundo!' seria mostrado em verde. Mas como a camada tipo vem antes da camada anônima criada para agrupar todos as regras sem camada definida, o texto será mostrado roxo.

Perceba também a ordem. Mesmo se declararmos um estilo sem camada primeiro, ele ainda é aplicado depois dos estilos com camada.

HTML

html
<div class="caixa">
  <p>Olá, mundo!</p>
</div>

CSS

css
p {
  color: rebeccapurple;
}

@layer tipo {
  .caixa p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Resultado

Declarando regras para camadas pré-existentes

No exemplo seguinte, duas camadas são criadas sem regras definidas, e depois são aplicadas regras CSS para as duas camadas. A camada base define as propriedades color, border, font-size e padding. A camada especial define um valor de color diferente. Como o especial vem depois na definição das camadas, a cor que ele carrega é utilizada e o texto será mostrado com a cor rebeccapurple. Todas as outras regras da camada base ainda são aplicadas.

HTML

html
<div class="item">
  Eu estou sendo mostrado com <code>color: rebeccapurple</code> pois a camada
  <code>especial</code> vem depois da camada <code>base</code>. Minha borda
  verde, font-size, e padding vem da camada <code>base</code>.
</div>

CSS

css
@layer base, especial;

@layer especial {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

Resultado

Especificações

Specification
CSS Cascading and Inheritance Level 5
# layering

Compatibilidade de Navegadores

Veja também