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
Proteggere le risorse Azure con private link e private endpoints
Effettuare il refresh dei dati di una QuickGrid di Blazor
Creare una libreria CSS universale: Immagini
Creare alias per tipi generici e tuple in C#
Generare un hash con SHA-3 in .NET
Escludere alcuni file da GitHub Secret Scanning
Referenziare un @layer più alto in CSS
Eseguire operazioni sui blob con Azure Storage Actions
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Come EF 8 ha ottimizzato le query che usano il metodo Contains
Eseguire query manipolando liste di tipi semplici con Entity Framework Core