svh, lvh y dvh: unidades de viewport de CSS, medidas en tu navegador

Qué son las unidades de viewport

Una unidad de viewport es un porcentaje del viewport expresado como longitud, así que 100vh es la altura entera y 50vw es media anchura. Lo que casi nadie sabe es cuántas hay: veinticuatro. Seis ejes —anchura, altura, los dos ejes lógicos de la dirección de escritura, y la menor y la mayor de las dos— multiplicados por cuatro ideas distintas de qué es el viewport.

Esas cuatro son lo interesante. El viewport pequeño es el espacio que tienes con toda la interfaz retráctil del navegador a la vista. El grande es el que tienes con toda ella retraída. El dinámico es lo que sea cierto en este instante. Y la cuarta es la familia sin prefijo que ya usas, vh y vw, que no es una quinta medida: está definida para ser la misma que la grande.

Por eso las unidades llegan en conjunto: svh, lvh y dvh junto a vh a secas, y lo mismo en cada eje. Aterrizaron en los navegadores a la vez, que es también la razón de que un navegador lo bastante antiguo como para no tener una no tenga ninguna de las tres.

Cómo usarlo

1. Lee las cuatro alturas. Se miden en tu navegador al cargar la página, maquetando un elemento con cada unidad y leyendo cuánto ha salido. No se consulta ninguna tabla, así que los números describen el aparato que tienes en la mano.
2. Mira el hueco. La fila de debajo es grande menos pequeño: la interfaz del navegador que se esconde en cuanto empiezas a desplazarte. En una ventana de escritorio suele ser cero, y por eso este problema no se ve hasta que alguien abre la página en el móvil.
3. Desplázate, en un móvil. La fila dinámica cambia según se retrae y vuelve la barra, y los hallazgos dicen en qué extremo está en cada momento. Ese movimiento es la especificación funcionando como se diseñó, y es también el motivo de que las unidades dinámicas no salgan gratis.

100vh es el viewport alto, y es a propósito

El discurso habitual es que 100vh está roto en el móvil: que los navegadores lo hacen mal, que la barra de direcciones lo estropea, que hace falta un apaño en JavaScript. El discurso está del revés. La especificación de CSS define las unidades del viewport grande y las unidades sin prefijo contra el viewport grande: el viewport dimensionado como si cualquier interfaz que se expande y se retrae estuviera retraída. Dicho de otro modo, 100vh es 100lvh, a propósito, y siempre lo ha sido.

La especificación explica la consecuencia en el párrafo siguiente, sin rodeos: cuando esos elementos retráctiles están a la vista, pueden tapar contenido dimensionado o posicionado con estas unidades. Eso no es un informe de error, es el diseño explicado. Las unidades sin prefijo te dejan llenar la pantalla del todo, y el precio es que una barra puede acabar encima de lo que has puesto.

Lo que convierte a svh en la unidad que casi todo el que echa mano de vh quería en realidad. La especificación la describe como la que llena la pantalla sin que ninguno de sus contenidos quede tapado cuando todos los elementos dinámicos de interfaz están visibles, y acto seguido llama a las unidades pequeñas más seguras en general, avisando de que pueden no dar la maqueta más bonita cuando la barra se esconde otra vez. Más seguro y un poco más vacío: ese es el trato, y está escrito en el estándar, no descubierto en un gestor de incidencias.

La medición de arriba es la versión honesta de esta afirmación. En lugar de asegurar que tu navegador cumple la definición, la página se lo pregunta: si vh y lvh vuelven iguales, es la especificación funcionando; y si alguna vez no lo son, la herramienta lo dice y lo marca como el único resultado de aquí que sería un fallo del navegador y no un dato sobre tu aparato.

Las unidades dinámicas no son una mejora gratis

Si svh se queda algo corta y vh algo larga, dvh parece la respuesta evidente, y a veces lo es. La especificación es inusualmente directa sobre lo que cuesta: los tamaños de las unidades dinámicas no son estables ni aunque el viewport no cambie, y usarlas puede hacer que el contenido se redimensione mientras el usuario se desplaza, lo cual —sigue— puede resultar molesto para el usuario y caro en rendimiento.

Hay además un detalle que explica por qué dos móviles pueden comportarse distinto en la misma página. Que una interfaz al retraerse cambie todas las unidades a la vez, o que en cambio solo aparezca como la diferencia entre el tamaño pequeño y el grande, depende en buena medida del navegador. El estándar lo acota por los dos lados —lo que ocurra por desplazarse tiene que caer en el segundo caso, y lo que tenga un estado lo bastante estable como para que rehacer la maqueta ayude al lector tiene que caer en el primero— pero entre esas dos reglas queda margen para que los navegadores discrepen, y discrepan.

Las unidades dinámicas traen otro permiso que conviene conocer antes de fiarte de un comportamiento suave: un navegador no está obligado a animarlas mientras una interfaz se expande o se retrae, y puede calcularlas como si estuviera del todo abierta o del todo cerrada durante ese rato. La recomendación es suponerla retraída. Así que si ves que la fila dinámica de esta página salta en vez de deslizarse, es una decisión conforme, no un fallo.

Lo que esto no puede decirte

La limitación más importante la aporta la propia especificación, no la descubrimos nosotros. Algunas interfaces de navegador se superponen al contenido a propósito y no provocan ningún desplazamiento de maqueta, y por tanto no afectan a ninguna de las longitudes de viewport. Así que svh es más segura que vh, y no es una garantía: una superposición de ese tipo se coloca encima de un elemento perfectamente dimensionado en svh y ninguno de estos números la mencionará jamás.

La medición describe este navegador, esta ventana y este momento. Gira el aparato, abre un teclado, entra en pantalla completa o instala otro navegador y los números cambian, que es justo la idea, pero significa que no puedes deducir el comportamiento de un móvil desde un portátil. Si la fila del hueco dice que no se retrae nada, es una afirmación cierta sobre la ventana en la que estás y no dice nada de la de nadie más.

Hay algo que la página no hace a propósito: recomendarte una unidad. Cuál es la correcta depende de si un elemento nunca debe quedar tapado, nunca debe dejar hueco o siempre debe encajar exacto, y son tres requisitos distintos que ninguna herramienta puede elegir por ti. Lo que sí puede es enseñarte el tamaño de la diferencia en hardware real, para que decidas frente a un número y no frente a una intuición.

Por último, esto mide unidades, no maquetas. Una sección que se desborda puede hacerlo por la unidad, o por un margen, una cabecera fija o una barra de desplazamiento de la que la unidad no sabe nada. Si los números de aquí te cuadran y tu página sigue desbordándose, la unidad no es la culpable.

¿Por qué es gratis?

La medición corre en tu navegador: la página maqueta un elemento oculto con cada unidad y lee el resultado. No hay ningún servidor de por medio, así que no hay nada que cobrar ni cuenta que crear.

No se sube nada y no se guarda nada. Los números existen solo en tu pestaña, y recargar la página los vuelve a medir desde cero.