Nel CSS abbiamo la possibilità di definire, attraverso le media query, degli stili che verranno applicati in base alla dimensione della pagina. Ma possiamo rifarci anche a container, che così come le media query sono CSS at-rule: regole che impongono un determinato comportamento nel CSS.
Diversamente dalle media query, i container applicano regole sulla base della dimensione del container a cui sono applicati.
<div class="post"> <div class="card"> <h2>Card title</h2> <p>Card content</p> </div> </div>
.post { container-type: inline-size; } /* Quando la dimensione è inferiore ai 650px */ @container (width < 650px) { .card { width: 50%; color: white; background-color: black; font-size: 0.8em; } }
La proprietà container-type: inline-size permette al runtime di applicare ogni stile che intercetti una proprietà di tipo width. Se volessimo utilizzare sia l'altezza che la larghezza, dovremo invece scrivere container-type: size.
Una limitazione alla propagazione delle regole consiste nel nominare il container e richiamarlo all'interno della classe a cui andrà applicato tramite la proprietà container-name.
.post { container-name: mycard; container-type: inline-size; } .post1 { container-type: inline-size; } @container mycard (width < 650px) { .card { width: 50%; color: white; background-color: black; font-size: 0.8em; } }
Anche se la classe .post1 è abilitata a ricevere le modifiche provenienti da @container, sull'interfaccia non verrà applicata alcuna modifica, dato che per applicare tali stili occorrerà definire il container-name: mycard, così come specificato all'interno di .post
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Creare una libreria CSS universale: i bottoni
Disabilitare le run concorrenti di una pipeline di Azure DevOps
Utilizzare l nesting nativo dei CSS
Creare agenti facilmente con Azure AI Agent Service
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Ottimizzare le pull con Artifact Cache di Azure Container Registry
Utilizzare i variable font nel CSS
Anonimizzare i dati sensibili nei log di Azure Front Door
Change tracking e composition in Entity Framework
La gestione della riconnessione al server di Blazor in .NET 9
Gestione dell'annidamento delle regole dei layer in CSS