As novas viewports: Large, Small e Dynamic

Estão chegando novas viewports: Large, Small e Dynamic. Com a evolução do web design responsivo, esta será uma adição ao CSS muito bem vinda.

Ir para o artigo

Existem algumas alterações sendo propostas em relação às unidades de viewport. As adições — que já chegaram ao estado de Editor’s Draft na W3C — definem vários tamanhos de viewport: Large, Small e Dynamic Viewport.

Large Viewport

A Large Viewport é a viewport dimensionada assumindo qualquer interface de UA (como a barra de endereço) que é dinamicamente expandida e retraída para ser retraída (retracted).

Tem o prefixo l-, tendo por uso usa lvh/lvw/lvmin/lvmax, como antes.

Esquema mostrando como é considerada a Large Viewport.
Viewport Large: o tamanho da viewport assumindo qualquer interface de UA que é dinamicamente expandida e retraída para ser retraída (retracted).

Small Viewport

A Small Viewport é a viewport dimensionada assumindo qualquer interface de UA (como a barra de endereço) que seja expandida e retraída dinamicamente para ser expandida (expanded).

Tem o prefixo s-, com unidades svh / svw / svmin / svmax.

Esquema mostrando como é considerada a Small Viewport.
Viewport Small: o tamanho da viewport dimensionada assumindo qualquer interface de UA que é dinamicamente expandida e retraída para ser expandida (expanded).

Dynamic Viewport

A Dynamic Viewport é a viewport dimensionada que leva consideração dinâmica de quaisquer interfaces de UA.

Ajustar-se-á automaticamente em resposta aos elementos da interface de UA sendo mostrados ou não: o valor será qualquer coisa dentro dos limites de 100vh (máximo) e 100svh (mínimo).

Possui prefixo d-, com unidades dvh / dvw / dvmin / dvmax.

A pegadinha

Observe que depende totalmente do UA (navegador) implementar um comportamento para a Dynamic Viewport. Alguns navegadores podem atualizar diretamente as mudanças de interface, ou apenas depois de um tempo… Isso consta nas (atuais) especificações.

O UA não é obrigado a animar as unidades de porcentagem da viewport dinâmica (dynamic viewport-percentage units) enquanto expande e retrai quaisquer interfaces relevantes e pode, em vez disso, calcular as unidades como se a interface relevante fosse totalmente expandida ou retraída durante a animação da UI.

Além disso, coisas como teclados na tela não são levadas em consideração — para isso, teremos a vindoura Virtual Keyboard API.

Conclusão

Comparativo lado-a-lado entre Large Viewport e Small Viewport.

Como foi mostrado no dpw, já começou o novo web design responsivo. Certamente, uma adição ao CSS como a que está sendo proposta, para propiciar mais controle sobre unidades de viewport, será muito bem vinda.

E aí, já tinha imaginado que novas viewports, Large, Small e Dynamic, um dia seriam possíveis com CSS?

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.