Actualización de mitad de año sobre Compat 2021: Una iniciativa para eliminar los problemas de compatibilidad con los navegadores en cinco áreas de enfoque clave: flexbox de CSS, cuadrícula de CSS, posición: fijo, relación de aspecto y transformaciones de CSS.
Llegó el momento de la actualización de mitad de año de Compat 2021, una iniciativa para eliminar los problemas de compatibilidad de los navegadores en cinco áreas clave de enfoque. Para obtener más detalles sobre el trabajo de #compat2021 y cómo decidimos cuáles son las áreas de enfoque, consulta el anuncio de marzo.
Las mejoras de Chromium que se analizan en esta publicación llegarán a Chrome, Edge y todos los navegadores basados en Chromium.
Cómo medimos el progreso
Puedes consultar el panel de Compatibilidad 2021 para web-platform-tests a fin de ver la cantidad de pruebas aprobadas y los gráficos de tendencias para diferentes navegadores.
Un simple número de "pruebas aprobadas" no brinda toda la historia sobre la compatibilidad de los navegadores, pero es una de las señales que usamos para ver el progreso de nuestro esfuerzo. La menor cantidad de diferencias entre los navegadores en los resultados de las pruebas implica una mayor interoperabilidad de una función web en varios navegadores.
Flexbox de CSS
Los tres motores de navegador experimentaron mejoras en flexbox.
Safari 14.1 envió la propiedad gap para flexbox. La propiedad gap es una forma conveniente de establecer el espaciado entre elementos. Esta propiedad se usa a menudo en el diseño de cuadrícula y la compatibilidad con el diseño de flexbox fue una de las funciones más solicitadas en el Informe de compatibilidad del navegador de MDN. Con esta actualización, la propiedad gap en los diseños flexibles está disponible en todos los navegadores principales y se resuelve un desafío de compatibilidad principal. Safari 14.1 también incluía muchas correcciones para las imágenes en flexbox, lo que elimina la necesidad de usar soluciones alternativas anteriores.
Firefox resolvió el procesamiento de tablas como elementos flexibles, lo que redujo a Firefox al 100% las pruebas (actualmente, al 98.5%).
Chromium también corrigió las tablas como elementos flexibles.
En Chromium 88, también se produjo una reescritura de imágenes como elementos flexibles, lo que resolvió varios errores antiguos. Por último, Chromium agregó recientemente compatibilidad con nuevas palabras clave de alineación: start, end, self-start, self-end, left y right. Estas palabras clave están disponibles para probarlas en Chrome Canary y Edge Canary.
Cuadrícula de CSS
El uso de la cuadrícula de CSS aumenta de forma constante, actualmente al 9% de las páginas vistas. Los tres motores principales de navegador implementan CSS Grid y ya pasan más del 89% de las pruebas de plataforma web relacionadas. Es importante cerrar la brecha de compatibilidad para mantener un crecimiento constante de esta función.
En lo que va de 2021, Safari ha mejorado del 89% al 93% para pasar las pruebas, y Chromium está trabajando en una nueva arquitectura para resolver más problemas de la cuadrícula de CSS, llamada GridNG. Este es un esfuerzo dirigido por el equipo de Microsoft y condujo al reciente aumento del 94% al 97% en las pruebas de Grid orientadas. Pronto verás una actualización sobre GridNG en el blog de Edge.
CSS position: sticky
En Chromium, se corrigió position: sticky para encabezados de tablas con el lanzamiento de TablesNG, un esfuerzo de varios años para rediseñar la renderización de las tablas.
Este cambio, junto con algunas correcciones finales, hizo que el canal de desarrolladores de Chrome y Edge 93 pasara el 100% de las pruebas objetivo.
Después del position: sticky, TablesNG resolvió 72 errores de Chromium.
Propiedad aspect-ratio de CSS
La propiedad aspect-ratio, que facilita la configuración de la proporción de ancho y alto, es fundamental para el diseño web responsivo. También es una solución para evitar cambios de diseño acumulativos.
La propiedad aspect-ratio ahora es compatible con las versiones estables de Chrome, Edge y Firefox, y con la versión beta de Safari 15. A medida que mejora la compatibilidad en varios navegadores, el uso aumenta.
Si bien ningún navegador tiene pruebas aprobadas en el 100%, la brecha de compatibilidad para aspect-ratio es la más pequeña de las cinco áreas de enfoque para Compat 2021. Más del 90% de las pruebas aprobaron en todos los navegadores principales. En el futuro, seguiremos supervisando el progreso con este paquete de pruebas para convertirlo en una característica sólida.
Obtén más información sobre el uso y los beneficios de la propiedad aspect-ratio en web.dev.
Transformaciones de CSS
Se produjo una mejora lenta y constante en los resultados de las pruebas segmentadas para transformaciones de CSS, debido a las correcciones de errores y a las mejoras de las pruebas.
El equipo de Chromium también está trabajando para mejorar la interoperabilidad de transform-style:
preserve-3d y transform :perspective(). Esperamos tener más progresos para compartir en la próxima actualización.
Mejoras en la puntuación general
Desde el anuncio en marzo, los tres motores de navegador mejoraron sus puntuaciones de Compat 2021:
- Chrome y Edge Dev pasaron de 86 a 92.
- Firefox pasó de 83 a 86.
- Safari pasó de 64 a 82.
En particular, Safari redujo la brecha de compatibilidad en 18 puntos, gracias a mucho trabajo de los colaboradores de WebKit. En particular, el equipo de Igalia contribuyó a la propiedad aspect-ratio y muchas mejoras en Flexbox y Grid, como gap para Flexbox y varias correcciones de errores.
Sigue el progreso de Compat 2021
Para seguir el progreso de Compat 2021, consulta el panel, suscríbete a nuestra lista de distribución o comunícate con usat @chromiumdev. Si tienes algún problema, asegúrate de informar un error en el navegador afectado.