Actualización de fin de año sobre Compat 2021: una iniciativa para eliminar los problemas de compatibilidad de los navegadores en cinco áreas de enfoque clave: CSS Flexbox, CSS Grid, posición: persistente, relación de aspecto y transformaciones de CSS.
Se acerca fin de año y es momento de una actualización final de Compat 2021, una iniciativa para eliminar los problemas de compatibilidad con los navegadores en cinco áreas de enfoque clave.
Más del 90%
puntuación en todos los navegadores
Desde nuestra última actualización, seguimos viendo mejoras en todos los navegadores. Todos los navegadores comenzaron con puntuaciones de prueba mucho más bajas al principio del año, pero ahora todos superaron el 90%. Esto significa que la plataforma web mejoró significativamente la interoperabilidad de las cinco áreas de enfoque.
Las contribuciones a los motores de navegadores no solo provienen de los proveedores de navegadores, sino también de otros miembros de la comunidad web. En este proyecto, queremos agradecer en particular a Igalia por su participación y por su trabajo continuado para mejorar las puntuaciones. Igalia contribuyó a mejorar las cinco áreas de enfoque de Compat 2021.
En wpt.fyi, el panel de resultados de las pruebas, ahora se muestra una vista de resultados de prueba filtrada que muestra todas las pruebas incluidas en Compat 2021, así como vistas para Chrome, Firefox y Safari, en las que se comparan los resultados con nuestra última actualización en julio.
Veamos las mejoras en cada área.
Flexbox de CSS
flex-basis: content ya está disponible para todos los navegadores, con implementaciones que llegan a Chromium y WebKit. (El valor content ya era compatible con Gecko).
En Chromium, se corrigió un problema relacionado con el tamaño de flexbox, que coincide con la especificación y el comportamiento de Gecko. Además, en Gecko, se corrigieron varios problemas que afectan a Compat 2021, incluido un problema con la altura porcentual en los elementos flexibles. Por último, en WebKit, se agregó compatibilidad con más valores de propiedades de alineación (izquierda, derecha, autoinicio, fin automático, inicio y fin) y se realizaron muchas mejoras para el posicionamiento absoluto, lo que también mejoró los resultados de las pruebas de flexbox en Compat 2021.
Cuadrícula de CSS
El uso de la cuadrícula de CSS en la Web sigue aumentando, como se puede ver en el Anexo web de 2021 y en las métricas de uso de Chrome.
El lanzamiento de GridNG en Chrome y Edge 93 resolvió muchos problemas antiguos con Grid, lo que cerró la increíble cantidad de 38 problemas del seguimiento de errores de Chromium. Junto con muchas de las mejoras más pequeñas, la puntuación de Compat 2021 para Grid en Chromium mejoró de un 3% a un 97%. Este trabajo estuvo a cargo del equipo de Edge de Microsoft.
Se corrigió un error de posicionamiento absoluto que afectaba a Grid en Gecko, y muchas correcciones llegaron a WebKit, lo que generó una mejora del 1% para Firefox y una mejora del 3% para las pruebas de Safari en Grid.
CSS position: sticky
En nuestra última actualización, notamos que position: sticky fue la primera área en la que cualquier navegador (en este
caso, Chrome y Edge) aprobó el 100% de las pruebas. Ahora, después de algunas correcciones en la implementación de WebKit, Safari también obtiene una puntuación del 100% para estas pruebas. La mayoría de estas mejoras se incluyeron en Safari 15.
Propiedad aspect-ratio de CSS
La compatibilidad entre navegadores para definir la relación de aspecto (relación de ancho a altura) de los elementos siguió mejorando, y las puntuaciones de Compat 2021 alcanzan un 99%, 97% y 95% para Chrome/Edge, Firefox y Safari, respectivamente. La mayoría de las mejoras no corresponden a la propiedad aspect-ratio en sí, sino a la forma en que los atributos width y height se asignan a un valor aspect-ratio predeterminado para los elementos. Esto se implementó para varios elementos de WebKit y <canvas> para Chromium.
Transformaciones de CSS
La compatibilidad con transform: perspective(none) ahora es compatible con Chromium, Gecko y WebKit. Esto facilitará la animación entre
una perspectiva y una falta de perspectiva.
En Chromium, transform-style: preserve-3d (que permite que los elementos secundarios participen en la misma escena 3D) y la propiedad perspective (que aplica una transformación de perspectiva a los elementos secundarios) ahora están alineadas con la especificación, haciendo que se apliquen solo a los elementos secundarios.
El gran aumento en las puntuaciones de las transformaciones de CSS para todos los navegadores se debe principalmente a mejoras en el conjunto de pruebas, en las que se corrigieron o quitaron pruebas incorrectas. Esto facilita la comprensión de los problemas de interoperabilidad restantes y evita regresiones en el futuro.
Conclusión
Agradecemos el trabajo que todos dedicaron para terminar el año con muchas mejoras en la puntuación y una mejor infraestructura de pruebas. aspect-ratio era una función muy solicitada por los desarrolladores web y ahora es compatible con todos los navegadores. El uso de Flexbox, grid y position: sticky está en aumento, y estas funciones ahora tienen mejor compatibilidad en navegadores gracias a muchas mejoras que se realizaron durante 2021.
¿Qué sigue? Nos entusiasma seguir colaborando con otros proveedores de navegadores y la comunidad en general en la próxima iteración de este esfuerzo. Comenzamos a investigar y analizar las áreas de enfoque para 2022. Mantente al tanto de un anuncio que se anunciará pronto.
Si tienes comentarios o preguntas, envíanos un mensaje por Twitter a @ChromiumDev.