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 : 1522  
 
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

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

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…

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