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 responsive design diventa più articolato, CSS si evolve costantemente per offrire gli autori hanno aumentato il controllo. La min(), max() e le funzioni clamp(), ora supportati in tutti i browser moderni, sono tra gli strumenti più recenti di creare siti web e app in modo più dinamico e reattivo. Puoi utilizzare questi per controllare il ridimensionamento e il ridimensionamento degli elementi, mantenendo la spaziatura tra e creare caratteri tipografici flessibili e fluidi.

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 CSS un'espressione in cui avrebbe senso. Per min() e max(), devi fornire un'opzione di valori dell'elenco di argomenti e il browser determina quale 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 usa 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 calcolare da un valore e un valore massimo.

Puoi utilizzare queste funzioni ovunque in <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer> sono consentiti. Tu possono 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 composto (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 Stile di Robert Bringhurst, "qualsiasi cosa da 45 a 75 caratteri è ampiamente considerata Lunghezza di riga soddisfacente per un set di pagine a colonna singola con una faccia di testo con serigrafia in una dimensione del testo."

Per assicurarti che i blocchi di testo rimangano tra i 45 e i 75 caratteri, utilizza clamp() e ch (avanzamento del carattere di larghezza 0) unità:

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

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

Puoi interrompere la condivisione anche usando solo min() o max(). Se desideri dell'elemento deve avere sempre una larghezza di 50% e non superare 75ch in larghezza su quello più grande usa width: min(75ch, 50%); per impostare la dimensione massima.

Allo stesso modo, puoi impostare le dimensioni minime per il testo leggibile utilizzando l'max() come in width: max(45ch, 50%);. In questo caso il browser seleziona è più alto, ovvero l'elemento deve essere 45ch o superiore.

Gestire la spaziatura interna

Puoi anche utilizzare max() per impostare una dimensione minima della spaziatura interna. Questo esempio proviene Trucchi CSS, in cui il lettore Caluã de Lacerda Pataca ha condiviso questa idea: Lascia che un elemento abbia spaziatura interna aggiuntiva su schermi di dimensioni maggiori, ma mantieni una spaziatura interna minima su schermi di dimensioni maggiori dimensioni dello schermo. Per farlo, usa calc() o max() e sottrai il minimo spaziatura interna da entrambi i lati dell'elemento: calc((100vw - var(--contentWidth)) / 2), o max(2rem, 50vw - var(--contentWidth) / 2). Nel foglio di stile, ha questo 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 le dimensioni minime e massime dei caratteri, e consentire la scalabilità tra queste dimensioni.

Prima del giorno clamp(),, la progettazione del ridimensionamento del carattere richiedeva stringhe di stile complesse. puoi lasciare che sia il browser a occuparsi di te. Imposta il carattere minimo accettabile dimensioni (ad esempio, 1.5rem per un titolo), dimensioni massime (ad esempio 3rem) e dimensioni ideali (ad esempio 5vw). Ora ci sono elementi tipografici che si adattano allo stile della pagina dell'area visibile fino a raggiungere i valori minimo e massimo limitati, 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 Annulla spruzzi.