Scopri come controllare il dimensionamento degli elementi, mantenere una spaziatura appropriata e implementare una tipografia fluida usando queste funzioni CSS ben supportate.
Man mano che il design adattabile diventa più articolato, il CSS si evolve costantemente 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 reattivi la creazione di siti web e app. Puoi utilizzare queste funzioni per controllare il ridimensionamento e il ridimensionamento degli elementi, mantenere la spaziatura tra gli elementi e creare una tipografia flessibile e fluida.
Le funzioni matematiche
Valori e unità CSS di livello 4calc(),min(),max()eclamp()consentono di utilizzare espressioni matematiche con addizione (+), sottrazione (-), moltiplicazioni (*) e divisione (/) come valori dei componenti
Supporto del 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 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 questo valore per la larghezza dell'elemento.
La funzione max() svolge lo stesso comportamento per il valore massimo.
Per utilizzare clamp(), inserisci tre valori: un valore minimo, un valore ideale da
calcolare e un valore massimo.
Puoi utilizzare queste funzioni ovunque siano consentiti <length>, <frequency>, <angle>, <time>, <percentage>, <number> o <integer>. Puoi
usarli autonomamente (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.
Larghezza perfetta
Secondo The Elements of Typographic Style di Robert Bringhurst, "qualsiasi carattere compreso tra 45 e 75 caratteri è ampiamente considerato come una lunghezza di riga soddisfacente per una pagina a una sola colonna impostata in un volto di testo con grazie alle dimensioni 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 di caratteri
di larghezza 0):
p {
width: clamp(45ch, 50%, 75ch);
}
Ciò consente al browser di determinare la larghezza del paragrafo. che imposta la larghezza
al 50% per impostazione predefinita. Se il 50% è inferiore a 45ch, utilizza invece 45ch come larghezza
e, se il 50% è superiore a 75ch, utilizza 75ch.
Puoi anche suddividerlo utilizzando solo min() o max(). Se vuoi che l'elemento abbia sempre la larghezza di 50% e non superi 75ch di larghezza 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 maggiore, il che significa che l'elemento deve avere una dimensione minima di 45ch.
Gestire la spaziatura interna
Puoi anche utilizzare max() per impostare una dimensione minima di spaziatura interna. Questo esempio proviene da CSS Tricks, in cui il lettore Caluã de Lacerda Pataca ha condiviso la seguente idea: consentire a un elemento di avere una spaziatura interna aggiuntiva su schermi di dimensioni maggiori, ma mantenere una spaziatura interna minima per gli 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). Il 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 e una dimensione massima dei caratteri e consentire il ridimensionamento tra queste dimensioni.
Prima di clamp(),, la progettazione del ridimensionamento dei caratteri richiedeva stringhe di stile complesse. Ora puoi lasciare che sia il browser a svolgere il lavoro per te. Imposta le dimensioni minime accettabili per il carattere (ad esempio, 1.5rem per un titolo), le dimensioni massime (ad esempio 3rem) e le dimensioni ideali (ad esempio 5vw). Ora gli elementi tipografici vengono ridimensionati in base alla larghezza dell'area visibile della pagina fino a raggiungere i valori minimi e massimi minimi, utilizzando pochissimo codice:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Altre risorse
- Valori e unità CSS su MDN
- Specifiche di livello 4 dei valori e delle unità CSS
- Articolo sui trucchi per CSS sulla larghezza dell'elemento interno
- min(), max(), clamp() Panoramica di Ahmad Shadeed
Immagine di copertina di @yer_a_ fantasma su Unsplash.