Nello script #312 abbiamo analizzato come utilizzare il CSS Grid Model per gestire il layout di una pagina. In questo script entriamo più nel dettaglio analizzando come poter gestire le dimensioni di un div nel quale inseriremo del contenuto.
Una proprietà conoscita ai più, ma al tempo stesso difficile da inserire in un layout "classico", a causa della variabilità della dimensione della viewport del browser, è aspect-ratio. Questa Permette di mantenere la dimensione di un div sulla base di un rapporto altezza / larghezza.
.div-16-9 { aspect-ratio: 16 / 9; } /* quadrato */ .div-1-1 { aspect-ratio: 1 / 1; }
Se la nostra necessità à invece impostare la dimensione di un div, sulla base del testo, possiamo utilizzare la funzione clamp i cui parametri sono dimensione minima, dimensione voluta, dimensione massima
.div-text { width: clamp(30ch, 50%, 80ch); }
E' da notare che non abbiamo impostato una dimensione in px, em o rem, bensì in ch: caratteri. Il div cercherà di occupare il 50% dello spazio disponibile e, al tempo stesso, la larghezza sará tale da mostrare un minimo di 30 fino a un massimo di 80 caratteri per riga.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Referenziare un @layer più alto in CSS
Gestire codice JavaScript con code splitting e lazy loading
Managed deployment strategy in Azure DevOps
Utilizzare i variable font nel CSS
Eseguire script pre e post esecuzione di un workflow di GitHub
Introduzione alle Container Queries
Persistere la ChatHistory di Semantic Kernel in ASP.NET Core Web API per GPT
Ridurre il reflow ottimizzando il CSS
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
Documentare i servizi REST con Swagger e OpenAPI con .NET 9
Eseguire query in contemporanea con EF
Ridurre il reflow cambiando il CSS