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.

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.

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.

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.

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.

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.

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*.

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

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.

Risorse aggiuntive

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:

• Specifica dei valori CSS 4: lunghezze relative all'area visibile
• Voce ChromeStatus
• Spiegazione dell'area visibile del layout
• Spiegazione sulle unità dell'area visibile