Con @layer, possiamo identificare aree di contesto CSS, in cui vengono applicate specifiche regole e poi elaborate a seconda dell'ordinamento assegnato sulla pagina.
Abbiamo anche la possibilità di creare regole @layer annidate, i cui nomi dei layer risultanti sono una combinazione degli identificatori esterni e interni, separati da un punto.
@layer default { p { max-width: 70%; } } @layer framework { @layer main { p { margin-block: 0.75em; } } /*senza nome*/ p { margin-bottom: 1em; } @layer theme { p { color: #222; } } } /*senza nome*/ @layer { p { max-width: 100%; } }
I layer e l'ordine risultanti sono:
- default
- framework.main
- framework.theme
- framework *senza nome*
- *senza nome*
Come sintassi abbreviata, i layer annidati possono essere descritti anche combinando gli identificatori in una singola regola, velocizzandone la modifica:
@layer default { @layer framework.theme { p { line-height: 10px; } }
Una regola importante da ricordare è che, utilizzando i layer annidati, il layer interno otterrà automaticamente la nomenclatura relativa al suo parent, rendendo così impossibile referenziare layer con scope più ampio. Nell'esempio seguente vediamo come il layer default, benchè dichiarato tre volte, assume un significato differente a seconda del punto in cui viene scritto.
@layer default { @layer default; @layer framework { @layer default { /* framework.default */ } @layer theme.default { /* framework.theme.default */ } }
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Eseguire query verso tipi non mappati in Entity Framework Core
Utilizzare Tailwind CSS all'interno di React: primi componenti
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare un numero per gestire la concorrenza ottimistica con SQL Server ed Entity Framework
Criptare la comunicazione con mTLS in Azure Container Apps
Usare un KeyedService di default in ASP.NET Core 8
Potenziare Azure AI Search con la ricerca vettoriale
Miglioramenti agli screen reader e al contrasto in Angular
Inizializzare i container in Azure Container Apps
Sfruttare al massimo i topic space di Event Grid MQTT