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
Le novità di Entity Framework Core 6
Le regole da seguire per effettuare la migrazione a Bootstrap 5
Disegnare un'applicazione web sfruttando il micro-frontend pattern
Entity Framework Core 6
Utilizzare WordPress con Azure App Service
Usare l'option pattern per gestire la configurazione in ASP.NET Core
Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
Completare le informazioni di log in Entity Framework Core
Utilizzare le Promise in Javascript - prima parte
Creare Azure Function con supporto a OpenAPI
Disabilitare un bottone in una pagina HTML pensando all'accessibilità
Semplificare la dichiarazione del namespace in C#