Nello script #86 abbiamo visto come gestire le proprietà calcolate utilizzando LESS. Questo va bene in scenari dove la dimensione è comunque prefissata, mentre spesso, per ragioni di layout, è necessario procedere con un calcolo che dipenda da un valore che si conosce solo a runtime.
Prima di CSS3, questa funzionalità era possibile solo attraverso l'uso di JavaScript. Oggi, invece, è possibile utilizzare lo statement calc, come in questo esempio:
#container { height: calc(100% - 20px); }
L'effetto di questo codice sarà quello di calcolare la dimensione dell'altezza in maniera relativa, togliendo 20px al 100%.
Questa espressione può essere utilizzata quando il tipo di proprietà è una lunghezza, frequenza, angolo, durata, numero o intero, con i classici operatori di addizione, sottrazione, divisione e moltiplicazione. E' consigliabile separare l'operatore da due spazi, uno prima e l'altro dopo l'operatore stesso.
C'è pieno supporto per questa funzionalità a partire da IE9+, FireFox 26+, Chrome 31+, Safari 7+, Opera 19+.
Per approfondimenti:
Specifiche del W3C
http://dev.w3.org/csswg/css-values/#calc-notation
#85 - Gestione di proprietà calcolate nei CSS con LESS
https://www.html5italia.com/script/86/Gestione-Proprieta-Calcolate-CSS-LESS.aspx
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Gestire undefined e partial nelle reactive forms di Angular
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Miglioramenti agli screen reader e al contrasto in Angular
Utilizzare Tailwind CSS all'interno di React: primi componenti
Usare un KeyedService di default in ASP.NET Core 8
Implementare il throttling in ASP.NET Core
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Gestire i null nelle reactive form tipizzate di Angular
Limitare le richieste lato server con l'interactive routing di Blazor 8
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Creare alias per tipi generici e tuple in C#
Eseguire operazioni sui blob con Azure Storage Actions