Le Container Queries rappresentano una delle più importanti innovazioni nel mondo del CSS, offrendo una soluzione efficace per creare layout responsivi che si adattano alle dimensioni di un contenitore piuttosto che a quelle dell'intera viewport, come invece accade con le media query.
Questa caratteristica è particolarmente utile quando si sviluppano componenti indipendenti e riutilizzabili, perché gli stili si adatteranno dinamicamente allo spazio che occupano all'interno di un contenitore.
Per iniziare dobbiamo dichiarare un contenitore utilizzando la proprietà container.
.card { container: inline-size; width: 100%; }
Identificato l'elemento, aggiungiamo la regola che si applicherà solamente superata una specifica dimensione
@container (min-width: 600px) { .card { font-size: 1.5rem; background-color: lightblue; } }
Quando la larghezza del contenitore raggiunge o supera 600px, il componente .card avrà uno stile diverso.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
La gestione della riconnessione al server di Blazor in .NET 9
Ridurre il reflow cambiando il CSS
Gestione dell'annidamento delle regole dei layer in CSS
Ricevere notifiche sui test con Azure Load Testing
Combinare Container Queries e Media Queries
Generare la software bill of material (SBOM) in GitHub
Utilizzare WhenEach per processare i risultati di una lista di task
Gestione dei nomi con le regole @layer in CSS
Scrivere selettori CSS più semplici ed efficienti con :is()
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Creare una libreria CSS universale: Nav menu
Referenziare un @layer più alto in CSS