Aggiunta degli stili ai livelli

Può aggiungere gli stili a un livello inline (all'interno di un blocco @layer) oppure tramite @import (per assegnare un foglio di stile importato a un livello).

Inserisca le regole in un blocco @layer con il nome del livello:

Può aggiungere stili a un livello in più blocchi @layer separati. Tutte le dichiarazioni vengono unite nel livello:

Un blocco @layer senza nome crea un livello anonimo. I livelli anonimi non possono essere riaperti in seguito e restano nella posizione in cui compaiono:

Assegni un intero foglio di stile importato a un livello:

In un progetto modulare, ogni file di componente aggiunge stili al livello components:

Sass e PostCSS funzionano entrambi insieme a @layer. Può definire i livelli nel file principale di ingresso e usare @use o @import per includere i partial dei componenti che aggiungono stili a quei livelli.

Gli stili inline (attributo style="") non sono influenzati dai livelli: prevalgono sempre sugli stili di qualsiasi livello. Solo le regole dei fogli di stile, inclusi i blocchi <style>, possono essere inserite nei livelli.

Chrome DevTools mostra i confini dei livelli nel pannello Styles. Le regole di un livello con priorità inferiore, sovrascritte da un livello superiore, sono barrate e il livello vincente viene indicato.

I browser che non supportano @layer trattano tutti i blocchi @layer come normali blocchi CSS e li visualizzano tutti. Il comportamento della cascata è diverso, ma gli stili non vengono persi. Per maggiore sicurezza, racchiuda il codice che dipende da questa funzionalità in @supports (@layer selector).

Strategia di migrazione:

1. Dichiari i livelli all'inizio del file CSS principale
2. Racchiuda ogni sezione CSS esistente nel blocco del livello corrispondente
3. Esegua i test e risolva eventuali problemi di priorità
4. Nel tempo, rimuova i selettori con specificità elevata non necessari

Come si aggiungono stili provenienti da più blocchi @layer separati allo stesso livello con nome?

Aggiunga gli stili ai livelli usando blocchi @layer name { } con nome: questi blocchi possono essere suddivisi tra più file e verranno tutti uniti. Assegni i fogli di stile importati ai livelli con @import layer(). I livelli anonimi non possono essere riaperti. Gli stili inline sovrascrivono sempre gli stili dichiarati nei livelli.