# As novas viewports: Large, Small e Dynamic

> Descubra as novas viewports CSS: Large, Small e Dynamic. Unidades lvh/svh/dvh para resolver problemas com barras móveis flutuantes. Use agora!

URL: https://dpw.dev/css/viewports-large-small-dynamic/  
Publicado em: 2021-07-15  
Categoria: css  
Tags: interface, web-design-responsivo  
Autor: Tárcio Zemel

Existem algumas alterações sendo propostas em relação às [unidades de viewport](/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/). 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.

<figure>

![Esquema mostrando como é considerada a Large Viewport.](/images/blog/viewports-large-small-dynamic/novas-viewports-large-small-dynamic-large.webp)

<figcaption>

**Viewport Large**: o tamanho da viewport assumindo qualquer interface de UA que é dinamicamente expandida e retraída para ser retraída (_retracted_).

</figcaption>

</figure>

## 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`.

<figure>

![Esquema mostrando como é considerada a Small Viewport.](/images/blog/viewports-large-small-dynamic/novas-viewports-large-small-dynamic-small.webp)

<figcaption>

**Viewport Small**: o tamanho da viewport dimensionada assumindo qualquer interface de UA que é dinamicamente expandida e retraída para ser expandida (_expanded_).

</figcaption>

</figure>

## 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](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/VirtualKeyboardAPI/explainer.md).

## Conclusão

![Comparativo lado-a-lado entre Large Viewport e Small Viewport.](/images/blog/viewports-large-small-dynamic/novas-viewports-large-small-dynamic-comparativo-sh-svh.webp)

Como foi mostrado no **dpw**, já começou [o novo web design responsivo](/css/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?

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml