Novedades en la gestión de los viewports
Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport.
Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4- definen varios tamaños de viewport: el Large, el Small y el Dynamic Viewport (Grande, Pequeño y Dinamico).
Gracias a estas adiciones, por fin podremos resolver ese problema de "100vh en Safari en iOS".
Los Viewports grandes, pequeños y dinámicos
El CSSWG ha definido varios tamaños de ventana adicionales y unidades relativas a la ventana (spec), además de las ya existentes vw/vh/vmin/vmax.
Las ventanas gráficas grandes o large viewport
La Ventana Grande o large viewport es el tamaño de la ventana gráfica cuando las interfaces como la barra de direcciones estén escondidas o retraidas. Tiene el prefijo l, por lo que las unidades son lvh / lvw / lvmin / lvmax .
Por ejemplo: 100lvh significa el 100% de la altura de la ventana grande.
La ventana gráfica pequeña o small viewport
La ventana pequeña es el tamaño de la ventana cuando las interfaces de nuestro dispositivo estén expandidas. Tiene el prefijo s, por lo que las unidades son svh / svw / svmin / svmax .
Por ejemplo: 100svh significa el 100% de la altura de la ventana pequeña.
La ventana gráfica dinámica o dynamic viewport
La ventana dinámica es la ventana de tamaño que tiene en cuenta todos los elementos de la interfaz del dispositivo y del navegador utilizado. Se ajustará automáticamente en respuesta a los elementos de la interfaz que se muestren o no: el valor será cualquiera dentro de los límites de 100lvh (máximo) y 100svh (mínimo).
Su prefijo es d, por lo que las unidades son dvh / dvw / dvmin / dvmax .
El objetivo de estas unidades de vista dinámicas es que la interfaz de usuario se adapte automáticamente a los cambios de la interfaz del dispositivo. 100dvh se adaptará automáticamente.
Donde está la novedad?
Como ya se ha mencionado, estas nuevas unidades l*/s*/d* propuestas son ampliaciones de las unidades vw/vh/vmin/vmax ya existentes. Con esto, el CSSWG decidió mantener estas "viejas" unidades ambiguas: no tienen una definición explícita, y depende totalmente de la interfaz del dispositivo (navegador) definir cómo se comportan. Algunos navegadores harán que vh se comporte como lvh (como hace el actual Safari), mientras que otros navegadores pueden hacer que vh se comporte como dvh.
Lo que también depende de la de la interfaz del dispositivo, es el comportamiento de la Ventana grafica Dinámica o dynamic viewport. Algunos navegadores pueden actualizar su valor inmediatamente mientras la interfaz está cambiando, mientras que otros navegadores pueden sólo actualizar el valor después de que la UI haya hecho la transición ... la especificación se ajusta a ambos.
La interfaz del dispositivo no está obligada a animar las unidades dinámicas de la ventana gráfica mientras expande y retrae cualquier interfaz relevante, y en su lugar puede calcular las unidades como si la interfaz relevante estuviera completamente expandida o retraída durante la animación de la UI.
La lógica se convierte en realidad
Además, la especificación también define ahora las unidades lógicas, y por tanto habla de vi/dvi/svi y vb/dvb/svb, que son el tamaño en línea y en bloque respectivamente de la ventana gráfica grande/dinámica/pequeña. Una pequeña pero muy bienvenida adición.
Se agradece ver que las cosas se mueven por fin en este ámbito, después del error reportado por WebKit en 2015, y el correspondiente problema del CSSWG en 2019.
Como se ha llegado a un consenso final sobre estas adiciones a la ventana gráfica, espero que el próximo Safari 15 -que altera la ventana gráfica ampliamente cuando te desplazas hacia arriba/abajo- haga el trabajo para incluir estas adiciones además de sus valores env(safe-area-inset-*) y (e.g. height: calc(100vh - env(safe-area-inset-bottom));).
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.
Artículos relacionados
Explorando la API CSS Paint: Redondeo de formas parte 2
Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos Control de los radios En todos los ejemplos que hemos visto, siempre consideramos un…
Explorando la API de CSS Paint: Redondeo de formas parte 1
Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…
Imágenes de fondo responsivas con relación de aspecto fijo o fluido
¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…
Comenzando con Bootstrap-Vue paso a paso
Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…
Bootstrap 5 beta2. ¿Qué ofrece?
Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…
Creación de un sencillo spinner-loader CSS
En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…
Cómo usar el efecto Parallax.Js en tu sitio web
Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…
Modo oscuro persistente con CSS y JS
Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…
Modo oscuro en el sitio web usando CSS y JavaScript
En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…
Cómo superponer múltiples imágenes usando CSS?
CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…
Cómo usar el Masking en CSS
Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…
¿Cuál es la diferencia entre Flexbox y Grid?
Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…