Descubre solo algunas de las funciones que se volvieron interoperables durante 2022.
Llegamos al final de otro año y es momento de analizar las mejoras que realizan los navegadores a medida que trabajamos juntos para mejorar la interoperabilidad de la plataforma web. Puedes ver cómo empezaron las cosas en nuestra publicación de marzo de este año, cuando se lanzó la iniciativa.
Las puntuaciones generales al final del año muestran una gran mejora en todos los motores.
En esta publicación, puedes obtener información sobre el progreso logrado durante 2022. Además de estas funciones titulares, todos los motores implementaron muchas mejoras menores. Se corrigieron pequeños problemas que pueden causar inconsistencias entre los motores y hacer que te compliques durante el desarrollo. Es muy emocionante ver las funciones grandes disponibles en todos los navegadores, pero, a veces, son los pequeños inconvenientes los que causan la mayor cantidad de problemas y es genial ver las mejoras.
Capas de Cascade
Las capas de cascada te permiten administrar la cascada mediante la agrupación de selectores en capas. Es el tipo de atributo que solo resulta útil cuando se admite en todas partes. Todos los motores principales ahora admiten capas en cascada, y las puntuaciones en todos los navegadores reflejan cuán interoperable es la función, con solo quedan algunas pruebas por aprobar para Firefox.
El elemento de diálogo
El elemento de diálogo permite crear diálogos modales y no modales. Este es un patrón común en la Web, y el uso de este elemento te brinda usabilidad y accesibilidad que, de otro modo, tendrías que desarrollar y probar cuando crees tus propios componentes. En el artículo Cómo crear un componente de diálogo, Adam Argyle explica cómo compilar sobre este elemento para compilar diferentes tipos de diálogos.
Subcuadrícula
A principios de 2022, el único navegador compatible con el valor subgrid para grid-template-rows y grid-template-columns era Firefox. Durante 2022, Safari obtuvo asistencia y la función está en desarrollo en Chrome. No cumplirá con la fecha límite de fin de año para la interoperabilidad, pero está en camino.
Unidades del viewport
Las unidades de viewport son la única característica que alcanzó el 100% de pruebas aprobadas en todos los motores. Esto incluye los conceptos de las viewports pequeñas y grandes, que dan cuenta del cambio en el tamaño del viewport en dispositivos móviles a medida que aparecen y desaparecen los elementos de la IU del dispositivo. Puedes obtener más información sobre estas unidades en la publicación de las unidades de viewports grandes, pequeñas y dinámicas.
Navegadores compatibles
- 108
- 108
- 101
- 15.4
Color 4
Esta colección de trabajos de color permite que CSS no solo especifique colores en gamuts de mayor definición (por ejemplo, display p3, rec2020), sino que también proporciona nuevas funciones de color que tienen utilidades únicas para trabajar con color. Los nuevos espacios de color son lch(), oklch(), lab(), oklab(), display-p3, rec2020, a98-rgb, prophoto-rgb, xyz, xyz-d50, xzy-d65: pruébalos en Canary hoy con esta marca habilitada. Estos cambios también se aplican a los gradientes, lo que permite a los autores especificar el espacio de color que usan sus gradientes. La misma marca también habilita la compatibilidad con color-mix(), lo que te permite combinar dos colores en el espacio que elijas. La función color-mix() también se encuentra detrás de una marca en Safari y Firefox. Más colores, mejores colores, mejores gradientes y mejores herramientas.
Interoperabilidad 2023
Espero que te guste saber que no es posible parar a finales de 2022. Interoperabilidad 2023 ya está en la etapa inicial de planificación. En Año Nuevo podremos anunciar las funciones que se seleccionaron y esperamos con ansias un nuevo año para facilitar el desarrollo para la Web.
Hero image de Ian Schneider.