Articolo originale: CSS Functions – How to Use calc(), max(), min(), and clamp() di Ilenia Magoni

Tradotto e adattato da: Dario Di Cillo

In CSS ci sono molte unità di misura differenti, come px e percentuale, vh, vw, em, rem e altre.

Ci possono essere delle situazioni in cui vuoi ottenere un valore combinandone altri in due o più diverse unità. Il CSS ha la funzione calc() che puoi utilizzare per questo tipo di operazione, e in questo tutorial imparerai come funziona.

Ci sono altre funzioni che puoi usare con unità relative - come  max, min e clamp - che, quando confrontano valori differenti, adoperano quello appropriato. Queste funzioni sono molto utili nei layout reattivi e costituiscono un'alternativa alle media query.

Se impari ad usarle nel modo appropriato puoi evitare il cambio di layout a scatti che può verificarsi ridimensionando una finestra con una media query, e usare meno codice!

Come usare la funzione CSS calc()

La funzione calc accetta un singolo parametro. Questo parametro può essere una espressione che contenente qualsiasi unità di lunghezza e i quattro operatori matematici +, -, /, *.

Puoi usare anche le parentesi per indicare un ordine di valutazione diverso rispetto alle regole standard di priorità.

Nell'espressione all'interno della funzione calc() puoi usare variabili CSS, valori ottenuti con attr() e valori dalle funzioni max(), min() e clamp().

calc() ti permette di calcolare un valore partendo da parametri complessi.

div {
    width: calc(100% - 2em);
}

Nota: lascia sempre uno spazio da entrambi i lati degli operatori matematici.

Come usare la funzione CSS max()

La funzione max() accetta una lista di valori separati da virgola e restituisce il più grande. Ogni valore può anche essere un'espressione (qualsiasi cosa che può essere usata come argomento della funzione calc() va bene anche per questa funzione).

La funzione max può essere considerata come un modo per determinare un valore minimo per una certa quantità.

Un caso di utilizzo pratico per questa funzione è la realizzazione di un testo reattivo, dando un valore minimo a una dimensione.

Ad esempio:

h1 {
    font-size: max(1rem, 10vh);
}

In questo modo, il testo sarà un decimo dell'altezza del viewport, a meno che l'altezza non diventi troppo piccola. La dimensione del testo sarà sempre almeno di 1rem per garantirne la leggibilità.

Come usare la funzione CSS min()

Come la funzione max, min accetta un qualsiasi numero di argomenti, incluse altre funzioni max, min o clamp, e restituisce il valore più piccolo tra loro.

La funzione min può essere utilizzata per  determinare un valore massimo.

Ad esempio, supponiamo che stai creando un modulo e vuoi che sia reattivo ai cambiamenti della larghezza dello schermo. Per evitare uno stiramento orizzontale sugli schermi troppo grandi, dovrai impostare un valore massimo di larghezza.

In questo caso, puoi scrivere qualcosa del genere:

.form {
    width: min(600px, 90vw);
}

La pagina avrà una larghezza pari al 90% della larghezza del viewport oppure 600px, a seconda di quale delle due sia la più piccola. Quindi se la larghezza del viewport è maggiore di ~670px, il modulo non verrà stirato orizzontalmente.

Esempi per min() e max():

Puoi vedere dei pezzetti di codice al lavoro nel prossimo esempio. Prova a ridimensionare il pen orizzontalmente e verticalmente e osserva come la larghezza del modulo e la dimensione del carattere cambiano in modo reattivo.

Come usare la funzione CSS clamp()

La funzione clamp blocca un valore tra un limite superiore e uno inferiore e seleziona un valore all'interno del range definito.

clamp accetta tre valori. Il primo è il valore minimo, il secondo è il valore preferito e il terzo è il valore massimo.

La funzione clamp restituisce il valore preferito, a meno che sia minore del valore minimo (in questo caso, restituisce il valore minimo) o maggiore del valore massimo (in questo caso, restituisce il valore massimo).

Puoi utilizzare la funzione clamp per ridimensionare elementi di layout in modo reattivo all'interno di un range.

h1 {
    font-size: clamp(1rem, 10vw, 2rem);
}

div {
    padding: clamp(10px, 6vw, 50px);
    width: clamp(140px, 90vw, 600px);
}

Esempio di funzione clamp:

Osserva clamp in azione in questo pen! Ridimensionalo orizzontalmente per vedere come i vari elementi cambiano dimensioni.

MDN contiene informazioni più dettagliate su tutte queste funzioni:

E con questo, hai avuto una panoramica di queste funzioni e hai imparato abbastanza per iniziare a utilizzarle. Buon divertimento!