Sintassi

Uso e ordinamento dei Layer

La direttiva @layer ti consente di organizzare il tuo CSS in "livelli" (layer) separati, in modo da migliorare la gestione dell'override e la struttura del codice. Puoi definire uno o più layer nel CSS e usarli per controllare la **priorità** delle regole applicate. L'ordine di dichiarazione dei layer è fondamentale:

• Ordine di applicazione: I layer vengono applicati in ordine di definizione. Il layer definito per **ultimo** ha la **priorità più alta**. @layer base, override;

• Definizione di un Layer: La sintassi è la seguente: @layer nome-layer { ... }

Conclusione:

Ordine dei layer: I layer vengono applicati in ordine di definizione (quello scritto per ultimo ha la priorità più alta).

Ordinamento manuale: Usare @layer base, component, override; permette di stabilire chiaramente quale layer debba avere la priorità.

Esempio Direttiva: @layer

Codice Esempio: @layer

CODE: CSS

1. /* Ordina i layer manualmente, dando priorità più alta a 'base' */

2. @layer component, override, base;

4. /* Definiamo i layer */

5. @layer base {

6.   .layer-example { color: red; }

7. }

9. @layer component {

10.   .layer-example { color: green; }

11. }

13. @layer override {

14.   .layer-example { color: blue; }

15. }

Contenuto Esempio: @layer

  
  <style>
/* Ordina i layer manualmente, dando priorità più alta a 'base' */
@layer component, override, base;

/* Definiamo i layer */
@layer base {
  .layer-example { color: red; }
}

@layer component {
  .layer-example { color: green; }
}

@layer override {
  .layer-example { color: blue; }
}
  </style>

  <h1 class="layer-example">Example Layer</hi>
  

Comportamento con l'uso di @import

Se vuoi importare dei layer da un altro file CSS, puoi specificare l'ordine dei layer in questo modo:

Codice Esempio: @import layer

CODE: CSS

1. @import url("component.css") layer(component);

2. @import url("base.css") layer(base);

Sintesi dell'ordine di applicazione

• I layer vengono applicati in base al loro ordine di registrazione: quello registrato per ultimo ha la priorità più alta. È possibile definirlo manualmente tramite @layer nome1, nome2, ....
• Le regole all'interno di un layer possono essere sovrascritte da regole presenti in layer con priorità superiore.
• Le regole CSS non inserite in alcun layer vengono automaticamente associate al layer implicito default, che ha priorità superiore rispetto ai layer dichiarati.

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser