Regola CSS @layer

Definizione e uso

CSS @layer Le regole possono essere utilizzate per controllare l'ordine di valutazione dello stile dei livelli di sovrapposizione CSS (cascade layers).

Questo viene fatto definendo prima un livello e poi avvolgendo il set di regole da valutare in un ordine specifico in questo livello.

@layer possono essere definiti con o senza nome.

senza nome @layer chiamatiLivelli anonimi. I livelli anonimi vengono valutati nell'ordine di dichiarazione (vedi esempio sottostante). Seguono l'ordine di sovrapposizione predefinito (da alto a basso).

con nome univoco @layer chiamatiLivelli nominati. Tramite i livelli nominati, possiamo specificare l'ordine di sovrapposizione esatto richiesto (vedi esempio sottostante). L'ordine va da meno specifico a più specifico, da sinistra a destra.

Esempio

Esempio 1

Usare i livelli anonimi (seguiranno l'ordine di sovrapposizione predefinito - da alto a basso):

/* Livello 1 */
@layer {
  body {
    background: pink;
  }
}
/* Livello 2 */
@layer {
  body {
    background: lightblue; /* L'ultimo livello ha effetto */
  }
}

Prova tu stesso

Esempio 2

Usare i livelli nominati (e specificare l'ordine di sovrapposizione esatto richiesto):

/* Specificare l'ordine di sovrapposizione esatto */
@layer bgblue, bgpink;
/* Livello 1 */
@layer bgpink {
  body {
    background: pink; /* Attivo */
  }
}
/* Livello 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Prova tu stesso

Sintassi CSS

@layer name {
  declarazioni CSS;
}

Valore dell'attributo

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la regola @.