Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Novedades en la gestión de los viewports

by Janeth Kent Date: 02-09-2021 css


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.


Las ventanas gráficas grandes o large viewport
 

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.


Las ventanas gráficas pequeñas o small viewport
 

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));).

 
by Janeth Kent Date: 02-09-2021 css visitas : 520  
 
Janeth Kent

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

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…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración