La funzione calc() in CSS permette di eseguire calcoli matematici direttamente all'interno delle proprietà CSS. La funzione calc() è spesso utilizzata per layout flessibili e adattabili ai diversi dispositivi.
In questa lezione, vediamo come usare calc().
Per usare la funzione calc(), bisogna utilizzare la seguente sintassi: proprietà: calc(espressione)
In calc(), l'espressione può essere un calcolo tra qualsiasi numero, con le operazioni matematiche di base:
+ calcola la somma tra due numeri.- calcola la sottrazione tra due numeri.* calcola la moltiplicazione tra due numeri./ calcola la divisione tra due numeri.L'operazione può anche essere effettuata tra una catena di numeri, non necessariamente solo due. L'operazione può essere eseguita con numeri che hanno una qualsiasi unità di misura (ad esempio, px, %, em, ecc.) anche diverse tra loro.
Ad esempio, calcoliamo la larghezza (width, che abbiamo visto nella lezione sulle dimensioni degli elementi) togliendo 200px dal 100%, così da non occupare l'intera larghezza della pagina:
<div>Testo di esempio</div>
<style>
div {
width: calc(100% - 200px);
background-color: lightblue;
margin: auto;
}
</style>Nell'esempio, abbiamo centrato l'elemento con margin:auto e abbiamo aggiunto un colore di sfondo al <div>. Se ti interessa, dai un'occhiata alla lista dei colori CSS.
Nota: è necessario che ogni numero nell'espressione all'interno di calc() abbia un'unità di misura nel caso delle addizioni e sottrazioni. Ad esempio, calc(10px + 30) non è corretto, perché 30 non ha un'unità di misura.
La funzione calc() si comporta in modo diverso in base alle operazioni effettuate. Vediamo come usarle.
Con l'addizione (+) e la sottrazione (-), è necessario che entrambi i numeri (o catene di numeri) abbiano tutti un'unità di misura e devono essere separati dallo spazio.
Ad esempio, ecco un uso corretto:
width: calc(10px + 25px);Questi, invece, sono usi errati e non funzioneranno:
width: calc(10px + 25); /* 25 non ha l'unità di misura */
width: calc(10px+25px); /* Non c'è spazio tra i due numeri */La moltiplicazione (*) richiede che almeno uno dei due numeri sia senza unità. Non è necessario che i numeri siano divisi dallo spazio. Si possono inserire più di due numeri, ma soltanto uno può avere l'unità di misura.
Ecco alcuni degli usi corretti:
width: calc(10px * 2);
width: calc(2 * 10px);
width: calc(10px * 2 * 2); /* Catene di più numeri (possono essere in ordine diverso) */
width: calc(10px*2); /* Possono non avere gli spazi tra loro */Ecco alcuni degli usi errati che non funzioneranno:
width: calc(10px * 20px); /* Non possono avere due unità di misura */
width: calc(10px * 10px * 2); /* Puoi usare solo un'unità di misura */Con la divisione (/) è necessario che il secondo numero non abbia l'unità di misura. Non è necessario che i numeri siano divisi dallo spazio. Si possono inserire più di due numeri, ma soltanto uno può avere l'unità di misura.
Ecco alcuni degli usi corretti:
width: calc(100px / 2);
width: calc(100px/2); /* Possono non avere gli spazi tra loro */
width: calc(100px / 2 / 2); /* Catene di più numeri (possono essere in ordine diverso) */Ecco alcuni degli usi errati che non funzioneranno:
width: calc(100px / 10px); /* Non possono avere due unità di misura */
width: calc(100px / 20px / 2); /* Puoi usare solo un'unità di misura */La funzione calc() permette di essere utilizzata anche all'interno di un altro calc(). In questo modo, è possibile fare una catena di due o più operazioni all'interno della stessa proprietà CSS.
Vediamo un esempio:
div {
width: calc(100% - calc(10px * 4));
background-color: red;
}Nell'esempio, la funzione calc() interna viene calcolata prima, poi la funzione esterna.
Le funzioni interne di calc() sono come delle semplici parentesi. Per questo motivo, puoi utilizzare le parentesi all'interno di calc() invece di utilizzare nuovamente la funzione. L'esempio di prima può essere semplificato in questo modo:
div {
width: calc(100% - (10px * 4));
background-color: red;
}In questo modo il codice risulta più pulito e semplice.