Uso de las unidades Css vw y vh en el diseño de sitios web modernos 8.9.13

Uso de las unidades Css vw y vh en el diseño de sitios web modernos

Traslación al español del artículo original de Dudley Storey "Using vw and vh Measurements In Modern Site Design" sobre las unidades Css relativas al tamaño de la ventana del navegador. Explicación de las mismas y sus ventajas y diferencias frente a otros valores de Css y su uso en el diseño de sitios web modernos.

Algunas propiedades y valores Css no se ganan la atención de los desarrolladores, bien porque la especificación que las desarrolla no es "sexy" o porque los casos de uso no resultan obvios.

Un buen ejemplo de esto son los valores vw, vh, vmax, vmin relativos al tamaño de la ventana. Valores que forman parte de la especificación CSS3 Values & Units Module desde hace un tiempo ya.

Como vamos aver, estos nuevos valores son perfectos para la creación de páginas RWD, pero antes, unas ideas generales sobre ellos.

¿Por qué necesitamos otra forma de medir cosas en Css?

Los principios tras vw, vh son sencillos: representan porcentajes sobre la anchura y altura del 'viewport' respectívamente.

1vw = 1/100 de la anchura de la ventana. Es el 1% de ella.
15vh = 15/100 de la altura de la ventana. Es el 15% de ella.

A primera vista, vw y vh parecen ser un tanto redundantes, ya que tenemos un sistema de medición que se refiere a la anchura de ventana en forma de porcentaje. Por ejemplo: div { width: 50%; }.

Aplicado a casi cualquier elemento, una anchura en porcentaje correlaciona el tamaño de un elemento con el tamaño de su contenedor, que puede incluir la ventana del navegador: en efecto, el concepto y la práctica de imágenes adaptables se basa enteramente en este hecho. Pero un poco de reflexión muestra que las medidas porcentuales tienen algunas limitaciones importantes:

1. La anchura de 'body' no incluye el 'margin'.
2. La altura de la ventana siempre ha tenido algunas dificultades, como que la altura del 'body' depende de la cantidad de contenido en la página y no de las dimensiones de la ventana del navegador (*N.T.: ver art en css-tricks)
3. Más importante aún, la anchura en porcentaje de 'body' no puede ser aplicada al tamaño del texto. font-size: 15% se aplica sobre el tamaño relativo del texto de su ancestro, no sobre las dimensiones de la ventana

Así que el equivalente en unidades vw para la declaración anterior (width: 50%) haciendo caso omiso de cualquier margen que pueden haber influido en el div sería: div { width: 50vw; }.

Y para escalar un título en relación al tamaño de la ventana del navegador puedes usar: h1 { font-size: 5vw; }.

vmin y vmax

vmin es una unidad que relaciona de forma directa con la anchura o altura de la ventana del navegador de la misma manera que lo hace vw y vh. La diferencia está en que vmin selecciona como referente el eje (x ó y) que sea el más pequeño de los dos y vmax al mayor.

Así, si el navegador es abierto con una relación de aspecto como en la imagen de la derecha, 10vmin es equivalente a 1/10 de la anchura de la ventana mientras que 25vmax será un cuarto de la altura.

Soporte por navegadores

IE 10+	Firefox 19+	Chrome 20+	Safari 6+

Es importante resaltar que el soporte de Safari no incluye la adaptación dinámica a fecha de este artículo: al redimensionar la ventana del navegador no cambia los tamaños de los elementos declarados en vw, vh, vmin y vmax. Sin embargo los elementos sí son escalados proporcionalmente al tamaño de la ventana en la carga inicial de la página.

Chrome y Safari no soportan vmax y Opera ninguna de estas unidades, aunque cabría esperar que esto cambie al pasar al motor blink.

Se puede aumentar el soporte en aquellos navegadores que no lo hacen con el uso de 'polyfills' de jvascript como los creados por Lea Verou y Sebastian Ferreyra.

Conclusión

Las unidades vw y vh ofrecen unas características únicas en aplicaciones para desarrollos móviles y són únicas ofreciendo una forma para escalar el texto en función del tamaño del viewport.

Créditos y autoría

La totalidad de este artículo es obra de Dudley Storey publicado originalmente en su blog demosthenes.info.
Lo publico aquí al amparo y según las condiciones del propio autor:
The content of this blog is free to use, translate and republish under a Creative Commons license that permits non-commercial sharing with attribution.

En este enlace tienes todas las formas de contacto con el autor original así como información adicional.

No obstante creí apropiado ponerlo en conocimiento del autor:

@Kseso Everything is perfect - thank you! I've linked to your translation from the original article...

— Dudley Storey (@dudleystorey) September 8, 2013