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

Scopri come controllare il dimensionamento degli elementi, mantenere una spaziatura appropriata e implementare una tipografia fluida usando queste funzioni CSS ben supportate.

Una Kravets

Man mano che il design responsive diventa più sofisticato, 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 più dinamici e adattabili la creazione di siti web e app. Puoi utilizzare queste funzioni per controllare le dimensioni 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

Valori e unità CSS livello 4

Supporto browser

min()

max()

clamp()

Utilizzo

Puoi utilizzare min(), max() e clamp() sul lato destro di qualsiasi expression CSS dove abbia senso. Per min() e max(), fornisci un elenco di valori degli argomenti e il browser determina quale è il valore più piccolo o 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() esegue la stessa operazione per il valore massimo.

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

Puoi utilizzare queste funzioni ovunque sia consentito <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer>. Puoi usarli 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 utilizzo di queste funzioni.

La larghezza perfetta

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

Per assicurarti che i blocchi di testo non superino i 45-75 caratteri di larghezza, utilizza clamp() e l'unità ch (avanzamento caratteri di larghezza 0):

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

Questo consente al browser di determinare la larghezza del paragrafo. Per impostazione predefinita, la larghezza è impostata su 50%. Se il 50% è inferiore a 45ch, viene utilizzata la larghezza 45ch e, se il 50% è più ampio di 75ch, viene utilizzato 75ch.

Puoi anche suddividere questa espressione utilizzando solo min() o max(). Se vuoi che l'elemento abbia sempre una larghezza di 50% e non superi 75ch su schermi più grandi, utilizza width: min(75ch, 50%); per impostare le dimensioni massime.

Allo stesso modo, puoi impostare le dimensioni minime per il testo leggibile utilizzando la funzione max(), ad esempio 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.

Gestire la spaziatura interna

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: lascia che un elemento abbia una spaziatura interna aggiuntiva su schermi di dimensioni maggiori, ma mantieni una spaziatura interna minima su schermi di dimensioni inferiori. Per farlo, utilizza calc() o max() e sottrai la spaziatura interna minima 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 abilitare la tipografia fluida, Mike Riethmeuller ha reso popolare una tecnica che utilizza la funzione clamp() per impostare una dimensione minima del carattere, una dimensione massima del carattere e consentire la scalabilità tra queste dimensioni.

Prima di clamp(),, la progettazione della scalabilità dei caratteri richiedeva stringhe di stile complesse. Ora puoi lasciare che sia il browser a fare il lavoro per te. Imposta la dimensione minima accettabile dei caratteri (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 del viewport 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
• Specifiche per i valori e le unità di livello 4 CSS
• Articolo Trucchi CSS sulla larghezza dell'elemento interno
• min(), max(), clamp() Panoramica di Ahmad Shadeed

Immagine di copertina di @yer_a_wizard su Unsplash.