Google está trabajando con otros proveedores de navegadores y socios de la industria para solucionar los cinco principales problemas de compatibilidad del navegador para desarrolladores web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio y las transformaciones de CSS.
Google está trabajando con otros proveedores de navegadores y socios de la industria para solucionar los cinco problemas principales de compatibilidad con navegadores para los desarrolladores web. Las áreas de enfoque son CSS flexbox, CSS Grid, position: sticky, aspect-ratio y las transformaciones de CSS. Consulta Cómo puedes contribuir y continuar para saber cómo participar.
Información general
La compatibilidad en la Web siempre ha sido un gran desafío para los desarrolladores. En los últimos años, Google y otros socios, incluidos Mozilla y Microsoft, se dispusieron a obtener más información sobre los principales problemas para los desarrolladores web, a fin de mejorar nuestro trabajo y establecer prioridades para mejorar la situación. Este proyecto está conectado con el trabajo de Satisfacción para desarrolladores de Google (DevSAT), que comenzó a mayor escala con la creación de las encuestas de MDN sobre ADN (evaluación de las necesidades del desarrollador) en 2019 y 2020, y un esfuerzo de investigación detallado presentado en el Informe de compatibilidad con navegadores MDN de 2020. Se realizaron investigaciones adicionales en varios canales, como las encuestas State of CSS y State of JS.
El objetivo en 2021 es eliminar los problemas de compatibilidad con los navegadores en cinco áreas clave de enfoque para que los desarrolladores puedan basarse en ellos con confianza como bases confiables. Esta iniciativa se denomina #Compat 2021.
Elegir en qué enfocarte
Si bien hay problemas de compatibilidad con los navegadores en todas las plataformas web, el enfoque de este proyecto se centra en una pequeña cantidad de las áreas más problemáticas que se pueden mejorar de forma significativa y, así, quitarlas como problemas principales para los desarrolladores.
El proyecto de compatibilidad usa varios criterios que influyen en las áreas que se deben priorizar, incluidos los siguientes:
- Uso de las funciones. Por ejemplo, flexbox se usa en el 75% del total de páginas vistas y su adopción está aumentando considerablemente en HTTP Archive.
- Cantidad de errores (en Chromium, Gecko, WebKit) y, en Chromium, la cantidad de estrellas que tienen esos errores
Resultados de la encuesta:
- Encuestas de ADN de la MDN
- Informe de compatibilidad del navegador de MDN
- Las funciones más conocidas y usadas del Estado de CSS
Resultados de las pruebas de web-platform-tests Por ejemplo, flexbox en wpt.fyi.
¿Puedo utilizar las funciones más buscadas?
Las cinco áreas de interés principales de 2021
En 2020, Chromium comenzó a trabajar en las áreas principales que se describen en Cómo mejorar la compatibilidad de los navegadores Chromium en 2020. En 2021, comenzamos un esfuerzo específico para ir aún más lejos. Google y Microsoft trabajan en conjunto para abordar los problemas principales de Chromium, junto con Igalia. Igalia, que es colaboradora habitual de Chromium y WebKit, y encargado de mantenimiento del puerto oficial de WebKit para dispositivos incorporados, brinda apoyo y participa en estos esfuerzos de compatibilidad, y ayudará a abordar y hacer un seguimiento de los problemas identificados.
Estas son las áreas que nos comprometemos a corregir en 2021.
Flexbox de CSS
Flexbox de CSS se usa ampliamente en la Web, y los desarrolladores aún enfrentan grandes desafíos. Por ejemplo, Chromium y WebKit tuvieron problemas con contenedores flexibles de auto-height, lo que provocaba que las imágenes tuvieran un tamaño incorrecto.
Foto de Alireza Mahmoudi.
En la entrada de blog de Flexbox Cats de Igalia, se profundiza en estos problemas con muchos ejemplos más.
Por qué se prioriza
- Encuestas: Problema principal del Informe de compatibilidad del navegador de MDN, el más conocido y usado en el Estado de CSS
- Pruebas: 85% aprobado en todos los navegadores
- Uso: El 75% de las páginas vistas aumentó considerablemente en HTTP Archive.
Cuadrícula de CSS
La cuadrícula de CSS es un componente fundamental de los diseños web modernos, que reemplaza muchas técnicas y soluciones alternativas anteriores. A medida que aumenta la adopción, es necesario que sea sólida, de modo que las diferencias entre los navegadores nunca sea un motivo para evitarlo. Falta la capacidad de animar diseños de cuadrícula, que se admite en Gecko, pero no en Chromium ni WebKit. Si se admite, los efectos como este son posibles:
Por qué se prioriza
- Encuestas: final del Informe de compatibilidad del navegador de MDN, conocido, pero con menos frecuencia en el Estado de CSS
- Pruebas: 75% aprobado en todos los navegadores
- Uso: Un 8% y un crecimiento estable, ligero crecimiento en HTTP Archive
Posición de CSS: fija
El posicionamiento fijo permite que el contenido se adhiera al borde del viewport y se suele usar para encabezados que siempre están visibles en la parte superior del viewport. Si bien es compatible con todos los navegadores, existen casos de uso comunes en los que no funciona según lo previsto. Por ejemplo, los encabezados de tablas fijas no son compatibles con Chromium y, aunque ahora se admiten detrás de una marca, los resultados no son coherentes en todos los navegadores:
Mira la demostración de encabezados de tabla fijos de Rob Flack.
Por qué se prioriza
- Encuestas: Son muy conocidas o se usan en el estado de CSS y se mencionaron varias veces en el Informe de compatibilidad del navegador de MDN
- Pruebas: 66% aprobado en todos los navegadores
- Uso: 8%
Propiedad de la relación de aspecto de CSS
La nueva propiedad de CSS aspect-ratio facilita mantener una relación de ancho y altura coherente para los elementos, lo que quita la necesidad del conocido hackeo de padding-top:
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
Debido a que es un caso de uso tan común, se espera que se use ampliamente, y queremos asegurarnos de que sea sólido en todas las situaciones comunes y en todos los navegadores.
Por qué se prioriza
- Encuestas: Ya son muy conocidas, pero aún no se usan ampliamente en el estado de CSS.
- Pruebas: 27% aprobado en todos los navegadores
- Uso: 3% y se espera que crezca
Transformaciones de CSS
Las transformaciones de CSS son compatibles con todos los navegadores desde hace muchos años y se usan ampliamente en la Web. Sin embargo, todavía quedan muchas áreas en las que no funcionan de la misma manera en todos los navegadores, en particular con las animaciones y las transformaciones 3D. Por ejemplo, un efecto de giro de tarjetas puede ser muy inconsistente en los navegadores:
Por qué se prioriza
- Encuestas: Son muy conocidas y se usan en el Estado de CSS.
- Pruebas: Un 55% de aprobación en todos los navegadores
- Uso: 80%
Cómo puedes contribuir y seguir las tendencias
Sigue y comparte las actualizaciones que publiquemos en @ChromiumDev o la lista de distribución pública,Compat 2021. Asegúrate de que existan errores o infórmalos en caso de los problemas que hayas experimentado. Si falta algo, comunícate con nosotros a través de los canales anteriores.
Habrá actualizaciones periódicas sobre el progreso aquí en web.dev, y también podrás seguir el progreso de cada área de enfoque en el Panel de Compatibilidad 2021.
Esperamos que este esfuerzo coordinado entre los proveedores de navegadores para mejorar la confiabilidad y la interoperabilidad te ayude a crear contenido increíble en la Web.