Tipografia fluida con WP Oxygen Builder: CSS clamp()

Probabilmente sono nella stretta minoranza di persone che ama davvero il CSS. In più, sono anche un grande amante dell'ottimizzazione e delle righe di codice risparmiate. E la funzione clamp(), per gestire la tipografia fluida, ha fatto proprio al caso mio.

Mentre il Web si spostava verso un'esperienza più fluida, tecnologie innovative come Flexbox e Grid Layout mi hanno lasciato senza fiato, per il loro approccio innovativo al responsive design. E su scala più piccola, questa piccola funzione CSS ha fatto la stessa cosa di recente.

CSS Clamp()

La funzione sembra banale ma ha un potere incredibile bloccando un valore tra un intervallo superiore e inferiore

clamp() minmax()

Tuttavia, detta così può creare un po' di confusione. La tipografia fluida a volte può diventare un po 'complicata. L'esecuzione di vari calcoli intorno alle dimensioni di una finestra mi ha fatto sentire sia incerto che impreciso perché il codice non mi diceva quale sarebbe stata la dimensione del carattere. 

Non bisogna però farsi spaventare da questo dettaglio. Una volta ottenuto un buon risultato, si potranno riproporre i calcoli in ogni altro sito Web, risparmiando così tantissimo tempo di sviluppo.

Analizziamo cosa fa questa funzione. Prende in ingresso tre valori:

  • Un valore minimo
  • Un valore preferito
  • Un valore massimo
h1 {
  font-size: clamp(1.75rem, 3vw, 2.1rem);
}

Con questi valori in mente, puoi vedere che lo snippet di codice sopra definisce la dimensione minima come 1.75rem e la dimensione massima come 2.1rem. Nei miei progetti, dalla vista mobile in poi, non voglio che la dimensione del mio titolo cada mai al di fuori di tale intervallo.

La fluidità entra in gioco impostando il valore medio, la dimensione preferita, su un valore dinamico. Mi piace usare vw, unità che consente al carattere di ridimensionarsi in accordo con la larghezza del display, ma rimanendo nell'intervallo tra 1.75rem2.1rem.

Un esempio funzionante potete trovarlo al mio CodePen 👉 https://codepen.io/acolinucci/full/abOVopx

Certo, è un intervallo di dimensioni ridotte, ma ora mi sento più in controllo di come il testo si comporterà nei miei progetti.

Ma già che ci siamo, perché fermarsi al testo? Ho trovato molti altri usi clamp()come le dimensioni dei bordi, i valori di riempimento e persino le larghezze degli elementi. 

Utilizzo all'interno di Oxygen

Come possiamo utilizzare tutto questo all'interno di WordPress con Oxygen?

Come descritto nell'articolo dedicato al CSS (puoi ritrovarlo qui 👉 Come scrivere codice CSS con Oxygen Builder), con Oxygen abbiamo innumerevoli modi per gestire il nostro codice CSS.

Tuttavia, credo che in questo caso il modo migliore sia quello di creare un foglio di stile generale dedicato alla tipografia,dove gestire tutto ciò che riguarda font dei caratteri e la loro dimensione.

In questo modo avremo un file che si carica in tutto il sito e controllabile facilmente da un unico punto.

Manage ➡️  Stylesheets ➡️  Add stylesheet

La particolarità di Oxygen è proprio questa. Ti permette di mantenere tutto organizzato, senza creare file di CSS infiniti in cui si scrivono righe e righe di codice con scopi diversi mescolate tra loro.

Supporto browser

Il supporto, anche se da poco tempo, è abbastanza buono su tutta la linea, anche su Safari (incredibile vero? 🎉 ).

Supporto Browser Clamp() CSS
Supporto Browser Clamp() CSS

Tuttavia, se vuoi stare sul sicuro e scegliere una strada prudente ti consiglio di procedere così:

h1 {
  font-size: min(max(1.75rem, 3vw), 2.1rem);

  @supports (font-size: clamp(1.75rem, 3vw, 2.1rem)) {
    font-size: clamp(1.75rem, 3vw, 2.1rem);
  }
}

Dallo snippet di codice puoi vedere che quando combinato min()e si max()comporta in modo molto simile, clamp()ma dove clamp()è disponibile, lo preferisco. È più snello e rapido.

Preferenze a parte, ora sono felice di avere un maggiore controllo sulla tipografia fluida e devo ringraziare questa nuova funzionalità!

menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram