Corsi on-line

La funzione calc() di CSS3

La funzione calc() di CSS3 è uno strumento nativo che permette di eseguire calcoli matematici di vario tipo, attualmente essa non gode di un diffuso supporto cross-browser, ma in futuro potrà risultare particolarmente comoda per i fogli di stile che faranno un uso esteso delle variabili; ad oggi calc() è adottabile per determinare valori da associare ad altezza, larghezza, padding, dimensione dei font e margini, il suo campo d’azione può essere però più ampio.

css3

Sostanzialmente calc() consentirà di effettuare operazioni aritmetiche in espressioni che prevedono addizioni, sottrazioni, divisioni e moltiplicazioni; per proporre un semplice esempio a riguardo, è possibile ipotizzare un caso che preveda la presenza di tre divbox così distribuite:

<div class="colonna uno">Prima</div>
<div class="colonna due">Seconda</div>
<div class="colonna tre">Terza</div>

Ora, volendo impostare la medesima larghezza per tutte e tre le divbox, sarà possibile far ricorso alla funzione calc() all’interno di un apposito selettore:

.wrapper .colonna {
	width: calc(100% / 3);
	padding: 0 5px;
}

Sostanzialmente, l’espressione calc(100% / 3); permetterà di dividere in tre parti uguali la larghezza dell’area occupata dalle tre colonne (parent width) e di comunicare il valore ottenuto dalla divisione al browser. Nel far ricorso a tali costrutti è comunque buona norma verificare quali versioni dei vari programmi per la navigazione Web siano in grado di interpretarli. I prefissi -moz- e -webkit- saranno necessari per le release più datate di Firefox e Chorme.

Tutti i calcoli verranno effettuati da sinistra verso destra, le divisioni e le moltiplicazioni verranno calcolate per prime così come le espressioni comprese tra parentesi; i segni + e - dovranno essere separati da spazi, quindi non sarà corretta un’espressione come calc(100% -10px), non saranno richiesti spazi per * e /.

La funzione ammette l’adozione di unità differenti nella medesima operazione, come per esempio in calc(50% – 5px) con percentuale e pixel.

Post correlati
I più letti del mese
Tematiche