Nuevas unidades de ventana gráfica - CSS

Unidades para mejorar de accesibilidad y la experiencia de usuario

by Laura Celis Ballesta Date: 22-06-2023 css viewport

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web.

El proyecto tiene 15 áreas de enfoque y una de ellas es añadir más unidades de tamaño de la ventana gráfica, para que haya mayor compatibilidad entra navegadores y dispositivos móviles.

 

Nuevas unidades

Antes solo teníamos "vh" y "vw" para establecer el tamaño de la ventana gráfica, ahora contamos con tres unidades más que nos ayudaran mucho a facilitarnos la creación de diseños para cualquier dispositivo sobre todo para los móviles ya que a día de hoy es con los dispositivos con los que más navegamos.

 

Large viewport (lvh y lvw)

La ventana grande es la que no muestra ninguna interfaz dinámica del navegador.

En un dispositivo móvil, 100lvh y 100lvw equivaldría al tamaño entero de la pantalla sin ningún elemento del navegador.

Small viewport (svh y svw)

La ventana pequeña es en la que se muestran todas las interfaces del navegador, por lo que 100svh y 100svw tendrá el tamaño exacto para que quepa dentro de la interfaz.

Esta unidad es ideal cuando se intenta mantener un tamaño relativo a la ventana gráfica y a la vez tener en cuenta los elementos activos del navegador.

Dynamic viewport (dvh y dvw)

Funciona como una combinación de los anteriores.

La ventana se redimensiona cuando los elementos de interfaz del navegador aparecen o se esconden. Este conjunto de unidades es muy útil para que los elementos se adapten automaticamente en función de la navegación.

 

Compatibilidad

Más del 85% de los navegadores es compatible con estas unidades de medida, así que se pueden aplicar ya para casi cualquier caso sin problemas.

Puedes verlo en: caniuse.com

 

Conclusión

Es innegable que estás nuevas medidas de tamaño son y cada vez serán más útiles debido a que facilitarán la creación de diseños que llenen la ventana visible en dispositivos móviles teniendo en cuenta la barra de direcciones.

Espero que te haya resultado útil, muchas gracias!

 
by Laura Celis Ballesta Date: 22-06-2023 css viewport visitas : 665  
 
 
 
 

Artículos relacionados

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla.…

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores…

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a…

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un…

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…

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

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-…

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…

Clicky