Dagli script passati sappiamo che l'ordine dei layer è definito prima del primo utilizzo e qualunque altro stile, non inserito in un layer, verrà inserito in un layer implicito finale.
Come vengono però valutate le regole definite come !important? Così come ogni regola viene valutata nell'ordine e nel rispetto del layer in cui viene dichiarata, anche per important, il layer di appartenenza è una discriminante importante.
Gli stili non stratificati normalmente sovrascrivono gli stili stratificati, ma la situazione si inverte quando parliamo di stili importanti, in modo che il flag !important mantenga lo stesso scopo semantico in entrambi i contesti. Ne consegue che gli stili non stratificati hanno la priorità più alta nell'origine normale e la più bassa nell'origine !important.
Ad esempio, il seguente CSS:
@layer reset url(reset.css); @layer base url(base.css); @layer patterns url(pattern.css); @layer components url(library.css); /* stili non stratificati */ @layer reset { /* possibili sovrascritture */ }
Ne risulta che l'ordine di elaborazione sarà il seguente:
- Layer reset importante
- Layer base importante
- Layer patterns importante
- Layer components importante
- Stili non stratificati importanti
- Stili non stratificati
- Layer components
- Layer patterns
- Layer base
- Layer reset
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestione dei nomi con le regole @layer in CSS
Creare una libreria CSS universale: Clip-path
Sostituire la GitHub Action di login su private registry
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Cambiare la chiave di partizionamento di Azure Cosmos DB
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Filtering sulle colonne in una QuickGrid di Blazor
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Creare una libreria CSS universale: i bottoni
Disabilitare automaticamente un workflow di GitHub
Evitare il flickering dei componenti nel prerender di Blazor 8