CSS: la funzione Calc()

 

 

Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle quali dovrà adattarsi.

Calc() è una di quelle proprietà css che semplificano il nostro lavoro e che ci permettono di evitare di usare JavaScript, consentendoci di effettuare calcoli direttamente nel foglio di stile, utilizzando diverse unità di misura. 

I calcoli che è possibile svolgere prevedono l’uso dei quattro principali operatori: +, -, *, / .

A livello sintattico bisogna tener conto di due i fattori:

1. È possibile, utilizzare unità di misura diverse. Non solo px con px, dunque, ma anche px con em, % e così via.

2. Il segno dell’operazione va sempre circondato da uno spazio bianco.

Si scrive dunque così

width: calc(100% - 300px)

Fatte le dovute premesse, vediamo ora alcuni esempi.

 

Allineamento verticale centrato

Se si conosce l'altezza dell'elemento, CSS Calc ci permette di ottenere un allineamento verticale al centro.

calc( 50vh – 1/2 altezza dell'elemento)

50vh è sempre la metà dell'altezza della finestra: in questo modo posizioniamo l'elemento a metà strada, verso il basso rispetto allo schermo, ma non rappresenta il centro assoluto perchè non abbiamo preso in conto l'altezza dell'oggetto.

Occorre rimuovere la metà dell'altezza dell'oggetto per ottenere il risultato finale.

Vedi su CodePen Calc() - Vertical Centre by Vincent Pickering (@vipickering)

 

Griglia fluida rispetto ad un elemento a larghezza fissa

Questo è il caso tipico che ci si presenta nella progettazione di un sito con colonna laterale a larghezza fissa.

La dimensione dell'elemento principale, ossia il nostro contenitore fluido, sarà calcolata in base alla formula:

calc( 100% - larghezza elemento 2)

Vedi su CodePen Calc() - 100% Width & fixed width elements by Vincent Pickering (@vipickering)

 

Posizionamento dello sfondo dall'angolo in basso a destra

A volte si ha la necessità di posizionare un'immagine di sfondo vicino all'angolo in basso a destra di un contenitore, ma non eccessivamente...

Calc() anche in questo caso viene in nostro aiuto, permettendoci di risolvere il nostro problema senza l'utilizzo di contenitori aggiuntivi (come avveniva in passato).

calc(100% - padding desiderato)

Usiamo calc per posizionare l'immagine completamente a destra quindi rimuoviamo il padding desiderato.

Vedi su CodePen CSS Calc - Background positioning from the right by Vincent Pickering (@vipickering)

 

Contenitore al 100% con dei sotto box equamente distribuiti

Una decisione abbastanza comune è quella di avere più contenitori/box all'interno di un contenitore padre.

La larghezza dei contenitori interni sarà calcolata in percentuale a quella del contenitore padre, e saranno posizionati in maniera equidistante tra di loro.

Per raggiugere tale scopo, di solito basta assegnare uno width al 33%.

Ció che possiamo ottenere con Calc() è una flessibilità extra per i contenitori interni. Se, ad esempio si volessero aggiungere dei bordi ad ogni box, la funzione Calc() ci viene incontro.

width: calc(100% / numero di box – dimensione totale del margine);

I contenitori saranno tutti equidistanti all'interno del loro contenitore padre, e sono predisposti all'aggiunta di ulteriori modifiche come bordi o margini.

Vedi su CodePen CSS Calc - boxes always a %age of their container by Vincent Pickering (@vipickering)

 

Contenitore al 100% e margini negativi

Alziamo il livello e complichiamoci la vita: un elemento figlio con larghezza al 100% rispetto ad un  contenitore padre che ha un margine negativo.

Anche qui, Calc() fa al caso nostro.

width: calc(100% + margin width);

Qui aumentiamo semplicemente la larghezza del contenitore per tenere conto del valore negativo.

Vedi su CodePen Calc() - Flud Width, with negative margins by Vincent Pickering (@vipickering)

 

Rapido Layout a griglia (solo per demo...)

Si tratta di una tecnica che di certo non è consigliabile per un sistema live, ma se aveste bisogno di una demo veloce, con  calc si può realizzare molto rapidamente un sistema di griglia rudimentale in poche righe.

width:calc(100% / numero totale di colonne in una riga*)

dobbiamo semplicemente aggiungere:

.col-1 { width:calc(100% /5*1); }

.col-2 { width:calc(100% /5*2); }

.col-3 { width:calc(100% /5*3); }

Ecc..

Vedi su Code Pen Calc() - Quick and Dirty Grid System by Vincent Pickering (@vipickering)