Nuove unità di misura CSS3: vw, vh e vmin

Nuove unità di misura Come sappiamo, le specifiche CSS3 hanno implementato nuove unità di misura, tra queste vi sono alcune […]
Nuove unità di misura CSS3: vw, vh e vmin

Nuove unità di misura

Come sappiamo, le specifiche CSS3 hanno implementato nuove unità di misura, tra queste vi sono alcune non proprio conosciute relative alla dimensione della finestra, si tratta di: vw, vh e vmin. Il supporto per ora è previsto su Chrome 20 (ancora in fase beta) e parzialmente su internet explorer 9.

Sicuramente ti starai chiedendo l’utilità visto lo scarso supporto da parte dei browser. Beh è vero, questo tipo di operazione risulta più conveniente effettuarla con javascript ma comunque sono da apprezzare queste nuove tecniche di progettazione da parte degli sviluppatori css, con la speranza di poterle usare al più presto e senza preoccupazioni.

Il codice necessario

h1 {
  font-size:2.0vw;
}
h2 {
  font-size:3.0vh;
}
p {
  font-size:2.0vmin;
}

Come funziona?

Capirne il  funzionamento risulta molto semplice, nel mio caso il valore di 2.0vw rappresenta il 2% della larghezza della finestra. Stesso concetto per vh, ma in altezza. L’unita vmin invece si rifersice alla larghezza/altezza più bassa, ad esempio se ho una risoluzione di 1024×768, 2.0vmin rappresenta il 2% di 768px.

Il risultato finale è ovviamente scomodo su smartphone, il font risulterebbe davvero piccolo. Infatti per questo tipo di dispositivo conviene utilizzare i media-query.

Conclusioni

Girando in rete alla ricerca di informazioni, sono riuscito a trovare l’articolo di Chris Coyier: Viewport Sized Typography che fa delle considerazioni molto interessanti sull’argomento, con tanto di demo e video nel caso qualcuno non possa testarlo data la problematica crossbrowser.

Se hai sperimentato queste nuove unità di misura o vuoi condividere un tuo parere, scrivi pure nei commenti o sulla nostra fanpage ;)

  • http://gabrieleromanato.com/ Gabriele Romanato

    I CSS stanno diventando sempre più complicati. Il design originale si è un pò perso per strada se ora i browser sono costretti a trasformarsi in una sorta di scatola magica per animazioni, transizioni, trasformazioni e algoritmi complessi. Questo significa maggior lavoro per gli implementatori e un aumentato livello di bug. In termini di performance si concretizza in un sempre maggior ricorso ad una gestione della memoria avanzata. Il che, a sua volta, porta a supportare al meglio solo la next generation di dispositivi, fissi e mobile. Non capisco come si possa ancora parlare di separazione tra presentazione e comportamento (non dico in questo caso) quando di fatto il trend punta ad una confusione tra le due aree. Sono perplesso.

    • http://www.antoniopolese.it Antonio Polese

      Concordo con te Gabriele. Animazioni e transizioni la fanno da padrone nella maggior parte dei siti web di nuova generazione. Soprattutto con l’entrata dei css3, dove sotto quest’aspetto l’utilizzo risulta un po’ meno complesso rispetto a javascript, fondendo in parte il concetto tra presentazione e comportamento. Fortunatamente questi due aspetti non sono ancora equiparabili, specialmente se parliamo di un comportamento generato da una condizione dell’utente. Almeno fino ad ora :)

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github