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
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Collegare applicazioni server e client con .NET Aspire
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Gestire il routing HTTP in Azure Container App
Gestione ciclo di vita in .NET Aspire
Creare una libreria CSS universale: Clip-path
Gestione degli eventi nei Web component HTML
Testare l'invio dei messaggi con Event Hubs Data Explorer
Bloccare l'esecuzione di un pod in mancanza di un'artifact attestation di GitHub
Configurare e gestire sidecar container in Azure App Service
Utilizzare Hybrid Cache in .NET 9
Utilizzare Intersect e Except per filtrare set di dati in TSql
I più letti di oggi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!