La funzione CSS calc(): teoria e pratica

All'interno del modulo CSS3 dedicato alle unità di misura è stata definita anche la nuova funzione calc(). Con calc() possiamo effettuare direttamente nel codice CSS dei calcoli matematici per tutte quelle proprietà che richiedono l'uso di una unità di misura. I calcoli che è possibile svolgere prevedono l'uso dei quattro principali operatori:

Operatore	Descrizione
+	Addizione
-	Sottrazione
*	Moltiplicazione
/	Divisione

A livello sintattico sono due i fattori di cui tenere conto nella definizione di una proprietà con calc(). Innanzitutto, è possibile, nel calcolo, mischiare unità di misura diverse. Non solo px con px, dunque, ma anche px con em, % e così via.

margin: calc(200px + 40px);
width: calc(100% - 2.5em);

In secondo luogo, il segno dell'operazione va sempre circondato dallo spazio bianco.

Si scrive dunque così

margin: calc(200px + 40px);
width: calc(100% - 2.5em);

e non così:

margin: calc(200px +40px);
width: calc(100%-2.5em);

È anche possibile impostare operazioni piuttosto complesse oltre a quelle più semplici viste qui sopra negli esempi qui sopra:

width: calc(((100% / 12) * 8) - 5%);

In questo caso impostiamo la larghezza di un elemento perché sia pari a 8/12 del 100% totale, meno il 5%.

Fatte le dovute premesse, vediamo ora alcuni semplici esempi.

Quando usare calc()

Gli scenari d'uso per la funzione calc() possono essere i più vari. In generale, trova il suo ambito di applicazione primario nei casi in cui si voglia calcolare dinamicamente un certo valore di misura, dunque in quei contesti che si suole definire 'liquidi' o 'fluidi' in cui non sappiamo dall'inizio a quanti px corrispondono le dimensioni o le distanze. Vediamo comunque qualche semplice esempio.

Partiamo dalle basi. Nella prima demo abbiamo inserito tre box la cui larghezza viene calcolata con un'espressione matematica.

Il primo box è così definito:

.box-1 {
  width: 90%;
  width: calc(100% - 80px);
  border: solid black 1px;
  background-color: #e7e7e7;
  padding: 6px;
  text-align: center;
}

La larghezza sarà pari al 100% - 80px. Gli 80px vengono sottratti sulla destra del box, per cui questa tecnica è un modo perfetto per applicare uno spazio vuoto accanto ad un elemento di cui non si conosca la larghezza precisa perché essa è calcolata con un'unità di misura relativa.

Nel secondo box la larghezza sarà pari a 2/3 del contenitore:

.box-2 {
  width: 66%;
  width: calc((100% * 2) / 3);
  margin-top: 20px;
  border: solid black 1px;
  background-color: #e7e7e7;
  padding: 6px;
  text-align: center;
}

Sull'ultimo box abbiamo invece usato questi parametri:

.box-3 {
  width: 55%;
  width: calc((30% * 2) - 100px);
  margin-top: 20px;
  border: solid black 1px;
  background-color: #e7e7e7;
  padding: 6px;
  text-align: center;
}

In tutti e tre gli esempi si noti come la proprietà width sia stata dichiarata due volte. È un modo per salvaguardare i browser che non supportano calc(). Per questi dichiareremo la proprietà una prima volta con un valore che si avvicina per approssimazione a quello calcolato con calc(); faremo quindi seguire la proprietà con calc() che prevarrà sui browser che supportano la funzione ma che sarà ignorata dai primi. I risultati, visto che il calcolo è dinamico non saranno perfettamente equivalenti, ma trattandosi di una soluzione di fallback è il massimo che si può ottenere.

Posizionare lo sfondo

Un secondo scenario d'uso lo ritroviamo in questo articolo di Chris Coyer dedicato a calc(). Si tratta di posizionare con precisione uno sfondo avendo come riferimento il lato destro e inferiore di un box invece che quello superiore sinistro. Ecco l'esempio e il codice usato per posizionare l'immagine:

.box-1 {
  width: 600px;
  height: 600px;
  margin: 40px auto;
  border: solid black 1px;
  background-color: #e7e7e7;
  background-image: url(timbro.png);
  background-position: calc(100% - 50px) calc(100% - 20px);
  background-repeat: no-repeat;
  padding: 6px;
  text-align: center;
}

Lo sfondo sarà posizionato 50px a sinistra rispetto al lato destro e 20px in alto rispetto al lato inferiore. Per ottenere il risultato siamo partiti dalla percentuale del 100% che colloca l'immagine all'angolo inferiore destro e abbiamo sottratto i valori di posizionamento desiderati.

Layout responsive e a griglia

Un altro campo potenziale di applicazione di calc() è quello dei layout, anche responsivi.

È possibile, ad esempio, usare la funzione per prevenire un problema tipico dei layout fluidi con una colonna per per i contenuti e una barra laterale più stretta. Quando la finestra del browser si restringe, quest'ultima può diventare troppo stretta, a detrimento dei contenuti che ospita. Una soluzione è in questo articolo di Osvaldas Valutis.

Nella nostra terza demo abbiamo replicato la tecnica, affiancando due colonne in un layout con i float. La barra laterale avrà una larghezza fissa, quella dei contenuti principali sarà invece fluida, con una larghezza pari al 100% del contenitore - la larghezza della barra laterale - ulteriori 20px che faranno da spazio di separazione tra le due colonne. Davvero brillante. Ecco il codice:

.container {
  margin: 20px auto;
  max-width: 1040px; /* 1170px grid + 40px padding */
  padding: 20px;
  width: 90%;
  border: solid black 1px;
  background-color: #e7e7e7;
}
.content {
 width: calc(100% - 300px - 20px);
 float: left;
 background: #bcf0a1;
 border: 1px solid black;
}
.sidebar {
 width: 300px;
 float: right;
 background: #78bbee;
 border: 1px solid black;
}

Quello dei layout, soprattutto a griglia, è probabilmente uno degli ambiti in cui assisteremo ad un'adozione frequente di calc(). Su CodePen sono disponibili diverse demo.

Supporto dei browser

Il supporto cross-browser della funzione calc() è piuttosto buono. Si estende infatti a tutte le versioni più recenti dei principali browser. Su Internet Explorer è supportato a partire dalla release 9.0. Per una compatibilità più completa possibile si tenga presente che sulle versioni 6.0 di Safari per Mac OS X e iOS è necessario far precedere il nome dal prefisso -webkit-.

Tutti gli esempi sono disponibili in allegato.