Descubre solo algunas de las funciones que se volvieron interoperables durante 2022.
Ya terminamos un año más y es momento de analizar las mejoras que realizan los navegadores a medida que trabajamos juntos para mejorar la interoperabilidad de la plataforma web. Puede ver cómo empezaron las cosas en nuestra publicación de marzo de este año, tras el lanzamiento de la iniciativa.
Las puntuaciones generales a fin de año muestran una gran mejora en todos los motores.
En esta publicación, puedes conocer el progreso logrado durante 2022. Además de estas funciones principales, todos los motores realizaron muchas mejoras más pequeñas. Ya se solucionaron pequeños problemas que podían causar inconsistencias entre los motores y provocarte problemas durante el desarrollo. Ver las grandes funciones disponibles en varios navegadores es definitivamente emocionante, pero a veces son los pequeños aspectos los que causan la mayor cantidad de problemas, y es estupendo ver cuánto mejoramos.
Capas en cascada
Las capas de cascada te permiten administrar la cascada agrupando selectores en capas. Es el tipo de función que solo resulta útil cuando se admite en todas partes. Todos los motores más importantes ahora admiten capas en cascada, y las puntuaciones en todos los navegadores reflejan cuán interoperable es la función, con solo algunas pruebas pendientes 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 lo contrario, 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 a partir de este elemento para crear diferentes tipos de diálogos.
Subcuadrícula
A principios de 2022, el único navegador compatible con los valores subgrid para grid-template-rows y grid-template-columns era Firefox. En 2022, Safari será compatible y la función estará en desarrollo en Chrome. No se cumplirá la fecha límite de fin de año para la interoperabilidad, pero pronto lo haremos.
Unidades de viewport
Las unidades de viewport son la única función que alcanzó el 100% de las pruebas aprobadas en todos los motores. Esto incluye los conceptos de viewport pequeño y grande, que representa el tamaño de viewport cambiante 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 las unidades de viewport grandes, pequeñas y dinámicas.
Navegadores compatibles
- 108
- 108
- 101
- 15.4
Color 4
Esta colección de colores 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 colores. 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 les permite a los autores especificar qué espacio de color usan sus gradientes. La misma marca también habilita la compatibilidad con color-mix(), lo que te permite mezclar dos colores en el espacio que elijas. La función color-mix() también está protegida por una marca en Safari y Firefox. Más colores, mejores colores, mejores gradientes y mejores herramientas.
Interoperabilidad 2023
Espero que te alegra saber que no tenemos planeado detenernos a finales de 2022, y Interoperabilidad de 2023 ya pasó la etapa de planificación inicial. En Año Nuevo, podremos anunciar las funciones seleccionadas y esperamos con ansias otro año en el que se facilite el desarrollo para la Web.
Hero image de Ian Schneider.