Pubblicato da: Max
In data:
28 Dic 2021
Tempo di lettura:
Testi perfetti grazie alla funzione CSS Clamp
Ciao!
Oggi vedremo come fare per avere dei testi perfetti sulle nostre pagine web.
Parleremo della funzione CSS clamp, che ci permette di stabilire la grandezza dei nostri contenitori ed elementi compresi i font. Ed è proprio sui font che applicheremo la funzione. La proprietà clamp per essere impostata necessita di 3 parametri, per far si che il testo sia sempre della grandezza ideale indipendentemente dal dispositivo con cui viene visualizzata la nostra pagine web.
La funzione CSS clamp, può essere utilizzata ovunque, e consente di selezionare un valore medio all’interno di un intervallo di valori compreso tra un valore minimo e un valore massimo.
Richiede quindi tre parametri: valore minimo, valore preferito, valore massimo consentito.
Il valore minimo è il valore più piccolo, il limite inferiore nell’intervallo di valori consentiti. Questo valore verrà utilizzato solo se il valore preferito è inferiore.
Il valore preferito verrà utilizzato solo se è maggiore del valore minimo e minore del valore massimo.
Il valore massimo verrà assegnato alla proprietà solo se il valore preferito è maggiore di questo limite superiore.
Facciamo subito un esempio per chiarire il concetto:
Inseriamo all’interno del body, un h1 e un h2. Nel foglio di stile, utilizziamo il selettore universale asterisco, per assegnare ad ogni elemento della nostra pagina 22px come grandezza del font.
font-size:22px;
Attiviamo la funzione ispeziona del browser, proviamo a ridimensionare la pagina e vediamo cosa succede.
Naturalmente i due titoli ereditano la grandezza del font impostata con il selettore universale, di 22px, e anche ridimensionando la pagina, restano sempre a 22 px. In una pagina responsive, che deve adattarsi alle dimensioni dei dispositivi con cui viene visualizzata, direi che non è la soluzione migliore.
A questo punto abbiamo 2 possibilità, o andiamo ad inserire delle media query per i diversi dispositivi (tablet e smartphone) e per le diverse risoluzioni, oppure utilizzare la funzione clamp, che è lo scopo di questo articolo.
Come abbiamo detto, clamp prevede 3 valori:
- valore minimo: 1.8rem
- valore preferito: 3.4vw
- valore massimo: 2.1rem
Rem, a differenza di px, è un’unità di misura flessibile, ideale per le pagine responsive, così come lo è vw o em.
Sia rem che em sono unità flessibili, scalabili, che vengono tradotte dal browser in pixel, a seconda delle impostazioni di dimensione del carattere nel nostro design.
Come le unità rem vengono tradotte in Pixel
Quando si utilizzano unità rem, la dimensione in pixel in cui vengono tradotte dipende dalla dimensione del carattere dell’elemento principale della pagina, ovvero l’elemento html. Nel nostro caso è 22px. Questa dimensione di carattere viene moltiplicata per qualsiasi numero stiate usando con le unità rem.
Ad esempio, con una dimensione di carattere dell’elemento principale di 22px, 1.8rem sarebbe pari a 39.6px, cioè 22 x 1.8 = 39.6.
Di conseguenza secondo le nostre impostazioni, al minimo del ridimensionamento della pagina, il titolo h1, avrà una dimensione di font pari a 39.6px.
Lo stesso discorso vale per il valore massimo: 22 x 2.1 = 46,2px
Per quanto riguarda invece l’unità di misura vw, che sta per viewport-width, larghezza del viewport cioè della finestra del browser, essa è pari all’1% della larghezza della viewport.
Quindi per sapere a quanti px corrisponde la nostra dimensione di font-size per l’h1 impostata a 3.4vw sulla funzione clamp, come valore preferito, dobbiamo effettuare la seguente operazione:
3.4 x larghezza-finestra-browser / 100
Come possiamo vedere nella dimensione massima, il browser attribuisce al font-size del titolo h1 la dimensione massima traducendola in 46.2px
Nella dimensione minima, il browser attribuisce al font-size del titolo h1 la dimensione minima traducendola in 39.6px
Infine ad un valore intermedio della finestra, il browser applica il valore intermedio che abbiamo assegnato alla proprietà font-size di h1, con la funzione clamp, in questo esempio 41.34px.
Calcolandola come abbiamo detto, in questo modo: 3.4 x 1216(larghezza-finestra), / 100
Bene! con questo abbiamo concluso. Spero che questo articolo ti sia stato utile per comprendere il funzionamento di clamp, e soprattutto di come i browser calcolano e interpretano le dimensioni flessibili come rem e vw.
Se conosci altre tecniche o vuoi aggiungere qualche nozione al mio articolo, puoi utilizzare i commenti sotto.
Se vuoi invece scaricare i file completi utilizzati durante l’articolo, clicca sul tasto Download e decomprimi il file ZIP.
Ciao alla prossima! 🙂
