CSS min(), max() e clamp()

Scopri come controllare le dimensioni degli elementi, mantenere una spaziatura corretta e implementare la tipografia fluida utilizzando queste funzioni CSS ben supportate.

Una Kravets

Man mano che il responsive design diventa più sfumato, il CSS è in continua evoluzione per offrire agli autori un maggiore controllo. Le funzioni min(), max() e clamp(), ora supportate in tutti i browser moderni, sono tra gli strumenti più recenti per rendere la creazione di siti web e app più dinamica e reattiva. Puoi utilizzare queste funzioni per controllare il dimensionamento e il ridimensionamento degli elementi, mantenere la spaziatura tra gli elementi e creare una tipografia flessibile e fluida.

Le funzioni matematiche calc(), min(), max() e clamp() consentono di utilizzare espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) come valori dei componenti

CSS Values And Units Level 4

Supporto browser

min()

max()

clamp()

Utilizzo

Puoi utilizzare min(), max() e clamp() sul lato destro di qualsiasi espressione CSS in cui avrebbe senso. Per min() e max(), fornisci un elenco di argomenti di valori e il browser determina quale è il più piccolo o il più grande. Ad esempio, nel caso di width: min(1rem, 50%, 10vw), il browser calcola quale di queste unità relative è la più piccola e utilizza quel valore per la larghezza dell'elemento.

La funzione max() fa lo stesso per il valore massimo.

Per utilizzare clamp(), inserisci tre valori: un valore minimo, un valore ideale da cui eseguire il calcolo e un valore massimo.

Puoi utilizzare queste funzioni ovunque sia consentito un valore <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer>. Puoi utilizzarli da soli (come in font-size: max(0.5vw, 50%, 2rem)), con calc() (come in font-size: max(calc(0.5vw - 1em), 2rem)) o composti (come in font-size: max(min(0.5vw, 1em), 2rem)).

Di seguito sono riportati alcuni esempi di come utilizzare queste funzioni.

La larghezza perfetta

Secondo The Elements of Typographic Style di Robert Bringhurst, "qualsiasi valore compreso tra 45 e 75 caratteri è ampiamente considerato una lunghezza di riga soddisfacente per una pagina a colonna singola impostata in un carattere di testo con grazie in una dimensione del testo".

Per assicurarti che i blocchi di testo abbiano una larghezza compresa tra 45 e 75 caratteri, utilizza clamp() e l'unità ch (avanzamento dei caratteri con larghezza 0):

p {
  width: clamp(45ch, 50%, 75ch);
}

In questo modo, il browser determina la larghezza del paragrafo. Imposta la larghezza su 50% per impostazione predefinita. Se il 50% è inferiore a 45ch, utilizza 45ch come larghezza, mentre se il 50% è superiore a 75ch, utilizza 75ch.

Puoi anche suddividere il comando usando solo min() o max(). Se vuoi che l'elemento abbia sempre una larghezza di 50% e non superi la larghezza di 75ch sugli schermi più grandi, utilizza width: min(75ch, 50%); per impostare la dimensione massima.

Allo stesso modo, puoi impostare una dimensione minima per il testo leggibile utilizzando la funzione max(), come in width: max(45ch, 50%);. In questo caso, il browser seleziona il valore più grande, il che significa che l'elemento deve essere largo almeno 45ch.

Gestisci il padding

Puoi anche utilizzare max() per impostare una dimensione minima della spaziatura interna. Questo esempio proviene da CSS Tricks, dove il lettore Caluã de Lacerda Pataca ha condiviso questa idea: consenti a un elemento di avere un padding aggiuntivo con schermi di dimensioni maggiori, ma mantieni un padding minimo con schermi di dimensioni inferiori. Per farlo, utilizza calc() o max() e sottrai il padding minimo da entrambi i lati dell'elemento: calc((100vw - var(--contentWidth)) / 2) o max(2rem, 50vw - var(--contentWidth) / 2). Nel foglio di stile, dovrebbe avere il seguente aspetto:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Tipografia fluida

Per attivare la tipografia fluida, Mike Riethmeuller ha reso popolare una tecnica che utilizza la funzione clamp() per impostare una dimensione minima e massima del carattere e consentire la scalabilità tra queste dimensioni.

In precedenza, la progettazione della scalabilità dei caratteri di clamp(), richiedeva stringhe di stile complesse. Ora puoi lasciare che sia il browser a fare il lavoro per te. Imposta la dimensione minima accettabile del carattere (ad esempio, 1.5rem per un titolo), la dimensione massima (ad esempio, 3rem) e la dimensione ideale (ad esempio, 5vw). Ora hai una tipografia che si adatta alla larghezza dell'area visibile della pagina fino a raggiungere i valori minimi e massimi limite, utilizzando pochissimo codice:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Altre risorse

• Valori e unità CSS su MDN
• Specifica CSS Values and Units Level 4
• Articolo di CSS Tricks sulla larghezza degli elementi interni
• Panoramica di min(), max(), clamp() di Ahmad Shadeed