Con l'introduzione della regola @layer, la gestione degli stili in CSS diventa più organizzata e modulare. Questa regola permette di descrivere un layer esplicito, a cui assegnare un set di regole CSS, siano importate da url o scritte in blocchi.
/* Definizione di un layer reset */ @layer reset url(reset.css);
/* Definizione layer esplicito */ @layer typography { h1, h2 { line-height: 1.2; } }
Il nostro compito ora è stabilire l'ordine con cui ogni layer verrà valutato dal browser. È importante definire l'ordinamento prima una qualunque definizione di layer, sia esso importato o un blocco di codice.
/* Ordine di importanza dei layer */ @layer reset; @layer typography; @layer my-layer; /* Sintassi abbreviata */ @layer reset, typography, my-layer;
I vantaggi di questa tecnica sono indiscutibili: permette di ridefinire uno stile CSS indipendentemente dal punto in cui esso è stato definito, come nell'esempio seguente.
@layer reset, typography; @layer typography { h1, h2 { line-height: 1.2; } } @layer reset { h1, h2 { color: blue; } }
Benchè il colore sia stato definito successivamente all'altezza della linea, a livello di computazione, essendo stato definito nel layer reset, verrà valutato con priorità più elevata.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Disabilitare automaticamente un workflow di GitHub (parte 2)
Creare gruppi di client per Event Grid MQTT
La gestione della riconnessione al server di Blazor in .NET 9
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Migrare una service connection a workload identity federation in Azure DevOps
Usare le navigation property in QuickGrid di Blazor
Supportare la sessione affinity di Azure App Service con Application Gateway
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Combinare Container Queries e Media Queries
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework