As unidades de janela de visualização grande, pequena e dinâmica

Novas unidades CSS que consideram as janelas de visualização para dispositivos móveis com barras de ferramentas dinâmicas.

Bramus

A janela de visualização e suas unidades

Para dimensionar algo da mesma altura da janela de visualização, é possível usar as unidades vw e vh.

  • vw = 1% da largura do tamanho da janela de visualização.
  • vh = 1% da altura do tamanho da janela de visualização.

Dê a um elemento uma largura de 100vw e uma altura de 100vh. Isso vai cobrir toda a janela de visualização.

Um elemento azul-claro definido como 100 vw por 100 vh, cobrindo toda a janela de visualização. A própria janela de visualização é indicada por uma borda tracejada azul.
Um elemento azul-claro definido como 100 vw por 100 vh, cobrindo toda a janela de visualização.
A própria janela de visualização é indicada com uma borda tracejada azul.

Os blocos vw e vh chegaram aos navegadores com esses blocos adicionais

  • vi = 1% do tamanho do eixo inline da janela de visualização.
  • vb = 1% do tamanho do eixo de bloco da janela de visualização.
  • vmin = o menor de vw ou vh.
  • vmax = o maior de vw ou vh.

Essas unidades oferecem um bom suporte ao navegador.

Compatibilidade com navegadores

  • 20
  • 12
  • 19
  • 6

Necessidade de novas unidades da janela de visualização

Embora os blocos existentes funcionem bem no computador, a história é diferente em dispositivos móveis. Nele, o tamanho da janela de visualização é influenciado pela presença ou ausência de barras de ferramentas dinâmicas. São interfaces do usuário, como barras de endereço e de guias.

Embora o tamanho da janela de visualização possa mudar, os tamanhos vw e vh não. Como resultado, os elementos dimensionados para 100vh de altura sarão da janela de visualização.

100 vh em dispositivos móveis é muito alto no carregamento.
100 vh em dispositivos móveis é muito alto no carregamento.

Ao rolar para baixo, essas barras de ferramentas dinâmicas serão recolhidas. Nesse estado, elementos dimensionados para ter 100vh de altura cobrirão toda a janela de visualização.

100 vh em dispositivos móveis é "correto" quando as interfaces do usuário do user agent são retiradas.
100 vh em dispositivos móveis é "correto" quando as interfaces do usuário do user agent são retiradas.

Para resolver esse problema, os vários estados da janela de visualização foram especificados no grupo de trabalho do CSS.

  • Janela de visualização grande: a janela de visualização dimensionada considerando todas as interfaces do UA que são expandidas e recolhidas dinamicamente para serem retiradas.
  • Janela de visualização pequena: a janela de visualização dimensionada considerando todas as interfaces do UA que são expandidas dinamicamente e retraídas para serem expandidas.
Visualizações das janelas de visualização grandes e pequenas.
Visualizações de janelas de visualização grandes e pequenas.

As novas janelas de visualização também têm unidades atribuídas a elas:

  • As unidades que representam a janela de visualização grande têm o prefixo lv. As unidades são lvw, lvh, lvi, lvb, lvmin e lvmax.
  • As unidades que representam a janela de visualização pequena têm o prefixo sv. As unidades são svw, svh, svi, svb, svmin e svmax.

Os tamanhos dessas unidades de porcentagem da janela de visualização são fixos (e, portanto, estáveis), a menos que a própria janela de visualização seja redimensionada.

Duas visualizações de navegador para dispositivos móveis lado a lado. Um deles tem um elemento de tamanho 100 svh e o outro de 100 lvh.
Duas visualizações de navegador para dispositivos móveis posicionadas lado a lado.
Uma tem um elemento de tamanho 100 svh e a outra 100 lvh.

Além das janelas de visualização grandes e pequenas, há também uma janela de visualização dinâmica que tem consideração dinâmica para a interface do UA:

  • Quando as barras de ferramentas dinâmicas são expandidas, a janela de visualização dinâmica é igual ao tamanho da janela de visualização pequena.
  • Quando as barras de ferramentas dinâmicas são retraídas, a janela de visualização dinâmica é igual ao tamanho da janela de visualização grande.

As unidades acompanhadas têm o prefixo dv: dvw, dvh, dvi, dvb, dvmin e dvmax. Os tamanhos são ajustados entre lv* e sv*.

100 dvh se adapta para ser o tamanho grande ou pequeno da janela de visualização.
100 dvh se adapta para ser o tamanho grande ou pequeno da janela de visualização.

Essas unidades são fornecidas no Chrome 108, junto com o Safari e o Firefox, que já têm suporte.

Compatibilidade com navegadores

  • 108
  • 108
  • 101
  • 15,4

Advertências

Há algumas ressalvas a saber sobre as unidades de janela de visualização:

  • Nenhuma das unidades da janela de visualização leva em consideração o tamanho das barras de rolagem. Em sistemas com as barras de rolagem clássicas ativadas, um elemento dimensionado como 100vw ficará um pouco largo demais. Esse processo funciona de acordo com as especificações.

  • Os valores da janela de visualização dinâmica não são atualizados a 60 fps. Em todos os navegadores, a atualização é limitada à medida que a interface do UA se expande ou recolhe. Alguns navegadores até mesmo retardam a atualização, dependendo do gesto usado (uma rolagem lenta versus um gesto de deslizar).

  • O teclado na tela (também conhecido como teclado virtual) não é considerado parte da interface do UA. Portanto, ele não afeta o tamanho das unidades da janela de visualização. No Chrome, você pode ativar um comportamento em que a presença do teclado virtual não afeta as unidades da janela de visualização.

Outros recursos

Para saber mais sobre janelas de visualização e esses blocos, confira este episódio do HTTP 203 (em inglês). Nele, Bramus informa Jake tudo sobre as várias janelas de visualização e explica como exatamente os tamanhos dessas unidades são determinados.

Material de leitura adicional: