Conversor de Unidades de CSS

O CSS1 de 1996 chegou com apenas seis unidades de medida: `px`, `pt`, `pc`, `cm`, `mm` e `in` — todas absolutas, fixas, pensadas para o mundo da impressão transposto para a tela. O CSS3 expandiu esse vocabulário drasticamente com unidades relativas ao viewport como `vw` e `vh`, e com o `rem` que respeita a raiz do documento. Mas foi o cenário mobile que forçou a criação das unidades mais recentes: `dvh`, `svh` e `lvh`, introduzidas para resolver o problema clássico do endereço do navegador mobile que aparece e desaparece ao rolar a página, bagunçando layouts que usavam `100vh` como altura total da tela. Hoje o CSS tem mais de 20 unidades de medida, cada uma com uma semântica precisa e casos de uso distintos.

Na prática do dia a dia, o problema não é conhecer todas as unidades — é converter entre elas num fluxo de trabalho onde ferramentas de design, código e sistemas de componentes falam línguas diferentes. Um arquivo do Figma entrega especificações em `px`. O design system da empresa define a escala tipográfica em `rem`. O layout usa breakpoints em `em` para compatibilidade máxima com browsers antigos. E o novo componente de hero precisa ocupar exatamente a altura visível da janela no mobile sem ser afetado pela barra de endereço. Ter um conversor com contexto visual imediato elimina a necessidade de abrir o console do browser e fazer cálculos manualmente a cada decisão de layout.

Dois pontos que o WCAG — as diretrizes de acessibilidade da web — destacam merecem atenção especial. Primeiro: evitar `px` para tamanhos de fonte, porque o `px` é a única unidade que não respeita a preferência de tamanho de texto configurada pelo usuário no browser ou no SO. Segundo: `100vw` inclui a largura da barra de rolagem vertical quando ela está visível, o que pode causar overflow horizontal em páginas com conteúdo exatamente na largura do viewport — um bug sutil que aparece só quando o conteúdo é longo o suficiente para a barra aparecer. E para o mobile, `100dvh` em vez de `100vh` é a forma moderna de garantir que o layout ocupe exatamente a área visível independentemente do comportamento da interface do browser.

The original CSS1 specification from 1996 shipped with just six measurement units: `px`, `pt`, `pc`, `cm`, `mm`, and `in` — all absolute, fixed, borrowed from the print world and adapted for the screen. CSS3 dramatically expanded that vocabulary with viewport-relative units like `vw` and `vh`, and `rem` for root-relative sizing. But it was the mobile landscape that forced the creation of the most recent additions: `dvh`, `svh`, and `lvh`, introduced to solve the classic problem of the mobile browser address bar appearing and disappearing as you scroll, breaking layouts that used `100vh` as the full screen height. Today CSS has over 20 measurement units, each with precise semantics and distinct use cases.

In day-to-day practice, the challenge is not knowing all the units — it is converting between them in a workflow where design tools, code, and component systems all speak different languages. A Figma file delivers specs in `px`. The company design system defines the typographic scale in `rem`. The layout uses breakpoints in `em` for maximum compatibility with older browsers. And the new hero component needs to occupy exactly the visible window height on mobile without being affected by the address bar. Having a converter with immediate visual context eliminates the need to open the browser console and do manual arithmetic at every layout decision.

Two points highlighted by WCAG — the web accessibility guidelines — deserve special attention. First: avoid `px` for font sizes, because `px` is the only unit that does not respect the text size preference the user has configured in their browser or operating system. Second: `100vw` includes the width of the vertical scrollbar when it is visible, which can cause horizontal overflow on pages where content is sized exactly to the viewport width — a subtle bug that only appears when content is long enough for the scrollbar to show up. And for mobile, using `100dvh` instead of `100vh` is the modern way to guarantee the layout occupies exactly the visible area regardless of the browser UI behavior.

La especificación CSS1 de 1996 llegó con solo seis unidades de medida: `px`, `pt`, `pc`, `cm`, `mm` e `in` — todas absolutas, fijas, tomadas del mundo de la impresión y adaptadas para la pantalla. CSS3 amplió ese vocabulario drásticamente con unidades relativas al viewport como `vw` y `vh`, y con `rem` para el tamaño relativo a la raíz. Pero fue el escenario móvil el que forzó la creación de las incorporaciones más recientes: `dvh`, `svh` y `lvh`, introducidas para resolver el problema clásico de la barra de dirección del navegador móvil que aparece y desaparece al desplazarse, rompiendo los layouts que usaban `100vh` como altura total de la pantalla. Hoy CSS tiene más de 20 unidades de medida, cada una con semántica precisa y casos de uso distintos.

En la práctica diaria, el desafío no es conocer todas las unidades — es convertir entre ellas en un flujo de trabajo donde herramientas de diseño, código y sistemas de componentes hablan idiomas diferentes. Un archivo de Figma entrega especificaciones en `px`. El design system de la empresa define la escala tipográfica en `rem`. El layout usa breakpoints en `em` para máxima compatibilidad con navegadores antiguos. Y el nuevo componente hero necesita ocupar exactamente la altura visible de la ventana en móvil sin verse afectado por la barra de dirección. Tener un conversor con contexto visual inmediato elimina la necesidad de abrir la consola del navegador y hacer cálculos manuales en cada decisión de layout.

Dos puntos destacados por las WCAG — las pautas de accesibilidad web — merecen especial atención. Primero: evitar `px` para tamaños de fuente, porque `px` es la única unidad que no respeta la preferencia de tamaño de texto configurada por el usuario en el navegador o el sistema operativo. Segundo: `100vw` incluye el ancho de la barra de desplazamiento vertical cuando está visible, lo que puede causar desbordamiento horizontal en páginas con contenido ajustado exactamente al ancho del viewport — un bug sutil que solo aparece cuando el contenido es lo suficientemente largo para que aparezca la barra. Y para móvil, usar `100dvh` en lugar de `100vh` es la forma moderna de garantizar que el layout ocupe exactamente el área visible independientemente del comportamiento de la interfaz del navegador.