Le unità area visibile dinamica, grande, piccola e

Nuove unità CSS che prendono in considerazione le aree visibili mobile con barre degli strumenti dinamiche.

Bramus

L'area visibile e le sue unità

Per ridimensionare un elemento alto quanto l'area visibile, puoi utilizzare le unità vw e vh.

  • vw = 1% della larghezza dell'area visibile.
  • vh = 1% dell'altezza delle dimensioni dell'area visibile.

Assegna a un elemento una larghezza pari a 100vw e un'altezza pari a 100vh e coprirà completamente l'area visibile.

Un elemento azzurro impostato su 100 vw x 100 vh che copre l'intera area visibile. L'area visibile stessa è indicata con un bordo tratteggiato blu.
Un elemento azzurro impostato su 100 vw x 100 vh che copre l'intera area visibile.
L'area visibile stessa è indicata con un bordo tratteggiato blu.

Le unità vw e vh sono state inserite nei browser con queste unità aggiuntive

  • vi = l'1% delle dimensioni dell'asse in linea dell'area visibile.
  • vb = 1% delle dimensioni dell'asse dei blocchi dell'area visibile.
  • vmin = il minore tra vw o vh.
  • vmax = il valore maggiore tra vw o vh.

Queste unità presentano un buon supporto del browser.

Supporto dei browser

  • 20
  • 12
  • 19
  • 6

La necessità di nuove unità per l'area visibile

Sebbene le unità esistenti funzionino bene sui computer, la situazione è diversa sui dispositivi mobili. In questo caso, le dimensioni dell'area visibile sono influenzate dalla presenza o dall'assenza di barre degli strumenti dinamiche. Si tratta di interfacce utente come le barre degli indirizzi e le barre delle schede.

Anche se le dimensioni dell'area visibile possono cambiare, le dimensioni vw e vh non cambiano. Di conseguenza, gli elementi con un'altezza di 100vh scoloriranno dall'area visibile.

100 Vh su dispositivo mobile è troppo alta quando carico.
100 vh su dispositivi mobili è troppo alta durante il carico.

Quando scorri verso il basso, le barre degli strumenti dinamiche si ritraggono. In questo stato, gli elementi con un'altezza di 100vh copriranno l'intera area visibile.

100 Vh sui dispositivi mobili è "corretto" quando le interfacce utente dello user agent sono ritirate.
100 vh sui dispositivi mobili è "corretto" quando le interfacce utente dello user agent vengono ritirate.

Per risolvere il problema, sono stati specificati i vari stati dell'area visibile nel gruppo di lavoro CSS.

  • Area visibile grande: le dimensioni dell'area visibile presupponendo che qualsiasi interfaccia UA venga espansa in modo dinamico e retratta per essere ritirata.
  • Vista piccola: le dimensioni dell'area visibile presupponendo che le interfacce UA vengano espanse e retratte in modo dinamico per l'espansione.
Visualizzazioni di aree visibili di grandi e piccole dimensioni.
Visualizzazioni di aree visibili di grandi e piccole dimensioni.

Le nuove aree visibili hanno anche unità assegnate:

  • Le unità che rappresentano l'area visibile grande hanno il prefisso lv. Le unità sono lvw, lvh, lvi, lvb, lvmin e lvmax.
  • Le unità che rappresentano l'area visibile piccola hanno il prefisso sv. Le unità sono svw, svh, svi, svb, svmin e svmax.

Le dimensioni di queste unità percentuali dell'area visibile sono fisse (e quindi stabili), a meno che l'area visibile stessa non venga ridimensionata.

Due visualizzazioni di browser mobile posizionate una accanto all'altra. Uno ha un elemento di dimensioni pari a 100 svh e l'altro da 100 lv.
Due visualizzazioni del browser mobile posizionate l'una accanto all'altra.
Una ha un elemento con dimensioni pari a 100 svh e l'altro 100 lv.

Oltre alle aree visibili grandi e piccole, c'è anche un'area visibile dinamica che tiene in considerazione in modo dinamico l'UI di UA:

  • Quando le barre degli strumenti dinamiche sono espanse, l'area visibile dinamica ha le stesse dimensioni dell'area visibile piccola.
  • Quando le barre degli strumenti dinamiche sono ritirate, l'area visibile dinamica corrisponde alle dimensioni dell'area visibile grande.

Le unità accompagnate hanno il prefisso dv: dvw, dvh, dvi, dvb, dvmin e dvmax. Le taglie sono fissate tra le controparti lv* e sv*.

100 dvh si adatta alle dimensioni dell'area visibile grande o piccola.
100 dvh si adatta alle dimensioni dell'area visibile grande o piccola.

Queste unità vengono fornite nella versione 108 di Chrome, che si aggiunge a Safari e Firefox, che sono già supportate.

Supporto dei browser

  • 108
  • 108
  • 101
  • 15,4

Avvertenze

Occorre tenere presenti alcuni aspetti sulle unità viewport:

  • Nessuna delle unità dell'area visibile tiene conto delle dimensioni delle barre di scorrimento. Sui sistemi in cui sono attivate le barre di scorrimento classiche, un elemento con dimensioni pari a 100vw sarà pertanto un po' troppo largo. Questo valore rispetta la specifica.

  • I valori per l'area visibile dinamica non vengono aggiornati a 60 f/s. In tutti i browser l'aggiornamento è limitato quando l'interfaccia utente di UA si espande o si ritira. Alcuni browser potrebbero addirittura disattivare il rimbalzo che si aggiornano completamente in base al gesto utilizzato (uno scorrimento lento rispetto a uno scorrimento).

  • La tastiera sullo schermo (nota anche come tastiera virtuale) non è considerata parte dell'interfaccia utente di UA. Di conseguenza, non influisce sulle dimensioni delle unità dell'area visibile. In Chrome puoi attivare un comportamento in cui la presenza della tastiera virtuale influisce sulle unità dell'area visibile.

Altre risorse

Per ulteriori informazioni sulle aree visibili e su queste unità, consulta questa puntata di HTTP 203. All'interno, Bramus mostra a Jake informazioni sulle varie aree visibili e spiega come vengono stabilite esattamente le dimensioni di queste unità.

Materiale di lettura aggiuntivo:

Parte della serie Newly interoperable