Compat 2021: Eliminación de los cinco principales puntos débiles de compatibilidad en la web
Google está trabajando con otros proveedores de navegadores y socios de la industria para corregir los cinco principales puntos débiles de compatibilidad de los navegadores para los desarrolladores web: CSS flexbox, CSS Grid, position: sticky, aspect-ratio y las transformaciones CSS.
Google está trabajando con otros proveedores de navegadores y socios de la industria para solucionar los cinco principales puntos débiles de compatibilidad de los navegadores para los desarrolladores web. Las áreas de enfoque son CSS flexbox, CSS Grid, position: sticky, aspect-ratio y transformaciones CSS. Consulte el documento Cómo puede contribuir y seguir adelante para aprender cómo participar.
Antecedentes #
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 propusieron aprender más sobre los principales puntos débiles para los desarrolladores web, para impulsar nuestro trabajo y priorizar para mejorar la situación. Este proyecto está conectado con el trabajo de Satisfacción del desarrollador de Google (DevSAT) y comenzó a mayor escala con la creación de las Encuestas MDN DNA (Evaluación de las necesidades del desarrollador) en 2019 y 2020, además de un esfuerzo de investigación profundo presentado en el Informe de compatibilidad de los navegadores con MDN. Se han realizado investigaciones adicionales en varios canales, como las encuestas Estado de CSS y Estado de JS.
El objetivo en 2021 es eliminar los problemas de compatibilidad del navegador en cinco áreas clave de enfoque para que los desarrolladores puedan construir con confianza sobre ellas como bases confiables. Este esfuerzo se llama #Compat 2021.
Elegir en qué enfocarse #
Si bien existen problemas de compatibilidad de los navegadores básicamente en toda la plataforma web, el enfoque de este proyecto se centra en una pequeña cantidad de las áreas más problemáticas que se pueden mejorar significativamente, para que dejen de ser problemas principales para los desarrolladores.
El proyecto de compatibilidad utiliza varios criterios que influyen en cuáles áreas priorizar, algunos de ellos son:
Uso de funciones. Por ejemplo, flexbox se usa en el 75% de todas las vistas de página y la adopción está creciendo fuertemente en HTTP Archive.
Número de errores (en Chromium , Gecko , WebKit) y, para Chromium, cuántas estrellas tienen esos errores.
Resultados de las encuestas:
- Encuestas de ADN MDN
- Informe de compatibilidad de los navegadores con MDN
- Características más conocidas y utilizadas del Estado de CSS
Resultados de las pruebas de plataforma web. Por ejemplo, flexbox en wpt.fyi.
¿Puedo utilizar las funciones más buscadas?
Las cinco áreas de enfoque principales en 2021 #
En 2020, Chromium comenzó a trabajar para abordar las áreas principales descritas en Mejora de la compatibilidad del navegador de Chromium en 2020. En 2021, comenzamos un esfuerzo dedicado para ir aún más lejos. Google y Microsoft están trabajando juntos para abordar los principales problemas en Chromium junto con Igalia. Igalia, un colaborador habitual de Chromium y WebKit, que además mantiene el puerto oficial de WebKit para dispositivos integrados, ha brindado un gran apoyo y se ha involucrado en estos esfuerzos de compatibilidad, además ayudará a abordar y rastrear los problemas identificados.
Estas son las áreas programadas para su reparación en 2021.
CSS flexbox #
CSS flexbox se usa ampliamente en la web y todavía existen algunos desafíos importantes para los desarrolladores. Por ejemplo, tanto Chromium como WebKit han tenido problemas con contenedores flex auto-height que generan imágenes de tamaño incorrecto.
Foto de Alireza Mahmoudi.
La publicación de blog Flexbox Cats de Igalia profundiza en estos problemas con muchos más ejemplos.
Por qué se prioriza #
- Encuestas: es un problema principal en el Informe de compatibilidad de los navegadores con MDN, más conocido y utilizado en el Estado de CSS
- Pruebas: el 85% pasa en todos los navegadores
- Uso: 75% de las visitas a la página, con un crecimiento fuerte en HTTP Archive
CSS Grid #
CSS Grid es un componente básico para los diseños web modernos, que reemplaza muchas técnicas y soluciones anteriores. A medida que crece la adopción, debe ser sólido como una roca, de modo que las diferencias entre los navegadores nunca sean una razón para evitarlo. Un área que falta es la capacidad de animar diseños de cuadrícula, compatible con Gecko pero no con Chromium o WebKit. Cuando se admiten, efectos como este son posibles:
Por qué se prioriza #
- Encuestas: finalista en Informe de compatibilidad de los navegadores con MDN, bien conocido pero utilizado con menos frecuencia en Estado de CSS
- Pruebas: el 75% pasa en todos los navegadores
- Uso: 8% y crecimiento constante, leve crecimiento en HTTP Archive
CSS position: sticky #
El posicionamiento fijo permite que el contenido se adhiera al borde de la ventana gráfica y se usa comúnmente para encabezados que siempre están visibles en la parte superior de la ventana gráfica. Si bien es compatible con todos los navegadores, existen casos de uso comunes en los que no funciona como se esperaba. Por ejemplo, los encabezados fijos de tablas no son compatibles con Chromium y, aunque ahora se admiten detrás de un indicador, los resultados son inconsistentes en todos los navegadores:
Vea a Rob Flack en su demostración de encabezados fijos de tablas.
Por qué se prioriza #
- Encuestas: es muy conocido/utilizado en Estado de CSS y se mencionó varias veces en el Informe de compatibilidad de los navegadores con MDN
- Pruebas: 66% pasa en todos los navegadores
- Uso: 8%
Propiedad aspect-ratio de CSS #
La nueva propiedad aspect-ratio de CSS facilita el mantenimiento de una relación de ancho a alto constante para los elementos, lo que elimina la necesidad del conocido truco padding-top:
Using padding-top
```css .container { width: 100%; padding-top: 56.25%; } ```Using aspect-ratio.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 asegurar que sea sólido en todos los escenarios comunes y en todos los navegadores.
Por qué se prioriza #
- Encuestas: ya es bien conocido, pero aún no se utiliza mucho en el Estado de CSS
- Pruebas: el 27% pasa en todos los navegadores
- Uso: 3% y se espera que crezca
Transformaciones CSS #
Las transformaciones CSS han sido compatibles con todos los navegadores durante muchos años y se utilizan ampliamente en la web. Sin embargo, todavía quedan muchas áreas en las que no funcionan igual en todos los navegadores, especialmente con animaciones y transformaciones 3D. Por ejemplo, un efecto de voltear una carta puede ser muy inconsistente en todos los navegadores:
Por qué se prioriza #
- Encuestas: se conoce bastante y se utiliza en Estado de CSS
- Pruebas: el 55% pasa en todos los navegadores
- Uso: 80%
Cómo puede contribuir y hacer seguimiento #
Hágale seguimiento y comparta cualquier actualización que publiquemos en @ChromiumDev o en la lista pública de correo, Compat 2021. Verifique que existan errores o preséntenlos para problemas que haya experimentado y, si falta algo, comuníquese con los canales mencionados anteriormente.
Habrá actualizaciones periódicas sobre el progreso aquí en web.dev y también puede seguir el progreso de cada área de enfoque en el Panel de control Compat 2021.
Esperamos que este esfuerzo concertado entre los proveedores de navegadores para mejorar la confiabilidad y la interoperabilidad lo ayude a crear cosas increíbles en la web.