Compat 2021: Eliminación de las cinco dificultades principales de compatibilidad en la Web

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: CSS Flexbox, CSS Grid, position: sticky, aspect-ratio y transformaciones CSS.

Google está trabajando con otros proveedores de navegadores y socios de la industria para solucionar el problema cinco problemas principales de compatibilidad de navegadores para desarrolladores web. Las áreas de interés son flexbox de CSS, CSS Grid, position: sticky, aspect-ratio y CSS transformaciones de datos. Consulta Cómo puedes contribuir y seguir adelante para aprender cómo participar.

Información general

La compatibilidad en la Web siempre ha sido un gran desafío para los desarrolladores. En la en los últimos años, Google y otros socios, como Mozilla y Microsoft se dispuso a obtener más información sobre los principales puntos débiles de la desarrolladores, impulsar nuestro trabajo y establecer prioridades para mejorar la situación. Este proyecto está conectado con el desarrollador de Google de satisfacción (DevSAT) y comenzó a gran escala con la creación del Encuestas de ADN (evaluación de necesidades para desarrolladores) de MDN en 2019 y 2020, y un trabajo de investigación detallado que se presentó en el Informe de compatibilidad del navegador de MDN (2020). Se han realizado más investigaciones en varios canales, como el Estado de CSS y Estado de JS encuestas.

El objetivo en 2021 es eliminar los problemas de compatibilidad de los navegadores en cinco pasos clave para que los desarrolladores puedan aprovecharlas como bases confiables. Esta esfuerzo se denomina #Compat 2021.

Decidir en qué enfocarse

Aunque existen problemas de compatibilidad en la Web de Google Cloud, el enfoque de este proyecto está en un pequeño número áreas que pueden mejorarse significativamente, lo que los quita como problemas principales para desarrolladores.

El proyecto de compatibilidad utiliza múltiples criterios que influyen en qué áreas priorizar, y algunos son:

Las cinco áreas principales de interés en 2021

En 2020, Chromium comenzó a trabajar en abordar las principales áreas descritas en Mejoramos la compatibilidad del navegador de Chromium en 2020. En 2021, iniciaremos un esfuerzo dedicado para llegar aún más lejos. Google y Microsoft está trabajando en conjunto para abordar los problemas principales en Chromium, junto con Igalia. Igalia, que son colaboradores habituales a Chromium y WebKit, y a los encargados de mantener el puerto oficial de WebKit para dispositivos incorporados, han sido muy solidarios y comprometidos con los esfuerzos de compatibilidad, y serán para abordar y hacer un seguimiento de los problemas identificados.

Estas son las áreas que se comprometen a reparar en 2021.

Flexbox para CSS

flexbox para CSS es mucho uso en la Web y aún existen desafíos importantes para los desarrolladores. Por ejemplo: tanto a Chromium como a WebKit tuvieron problemas con auto-height contenedores flexibles, lo que generó imágenes con un tamaño incorrecto.

Foto estirada de un tablero de ajedrez.
Tamaño de imagen incorrecto debido a errores
Tablero de ajedrez.
. Tamaño de imagen correcto
Foto de Alireza Mahmoudi.

Gatos flexbox de Igalia entrada de blog profundiza en estos problemas con muchos ejemplos más.

Por qué se prioriza

Cuadrícula de CSS

La Cuadrícula de CSS es un componente básico principal para diseños web modernos, que reemplaza muchas técnicas antiguas y soluciones alternativas. A medida que crece la adopción, debe ser sólida como una roca. entre los navegadores nunca es una razón para evitarlo. Un área le falta la capacidad de animar diseños de cuadrícula, compatible con Gecko, pero no Chromium o WebKit. Si es compatible, efectos como este son posibles:

. Demostración de ajedrez animada de Chen Hui Jing

Por qué se prioriza

Posición de CSS: fija

Posicionamiento fijo Permite que el contenido se mantenga en el borde del viewport y se usa con frecuencia. para los encabezados que siempre están visibles en la parte superior del viewport. Aunque sea compatible en todos los navegadores, hay casos de uso comunes en los que no funciona según lo previsto. Por ejemplo: encabezados de tablas fijas no son compatibles con Chromium, y, aunque ahora admitido detrás de una marca, los resultados no coinciden en todos los navegadores:

Chromium con "TablesNG"
.
Un geco
.
WebKit
.

Consulta los encabezados de tablas fijas de Rob Flack.

Por qué se prioriza

Propiedad de relación de aspecto de CSS

La nueva herramienta aspect-ratio La propiedad CSS facilita mantener una proporción coherente entre el ancho y la altura para elementos, lo que elimina la necesidad de la infraestructura truco de padding-top:

Cómo usar padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
Usa la relación de aspecto
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Debido a que es un caso de uso común, se espera que se usen ampliamente. queremos asegurarnos de que funcione correctamente en todas las situaciones comunes y en todos los navegadores.

Por qué se prioriza

  • Encuestas: ya son muy conocidas, pero aún no se utilizan ampliamente en el Estado de CSS
  • Pruebas: 27% aprobado en todos los navegadores
  • Uso: 3% y se espera que crezca

Transformaciones de CSS

Transformaciones de CSS son compatibles con todos los navegadores desde hace muchos años y se utilizan ampliamente en web. Sin embargo, aún hay muchas áreas en las que no funcionan de la misma forma en todos los navegadores, en especial con las animaciones y las transformaciones 3D. Por ejemplo, una tarjeta El efecto de girar puede ser muy inconsistente en los navegadores:

. Efecto de giro de tarjetas en Chromium (izquierda), Gecko (centro) y WebKit (derecha). Demostración de David Baron del error comentario.

Por qué se prioriza

Cómo puedes contribuir y hacer un seguimiento

Sigue y comparte las actualizaciones que publiquemos @ChromiumDev o la lista de distribución pública Compat 2021: Asegúrate de que existan errores. presentarlas en relación con los problemas que tuviste y, si falta algo, comunícate con nosotros a través de canales.

Habrá actualizaciones periódicas sobre el progreso aquí en web.dev y podrás también puedes seguir el progreso de cada área de enfoque en la guía Compat 2021 Panel de control.

Panel de Compat 2021 .
Panel Compat 2021 (captura de pantalla tomada el 16 de noviembre de 2021)

Esperamos que este esfuerzo conjunto entre los proveedores de navegadores mejore la fiabilidad y la interoperabilidad te ayudará a crear contenidos asombrosos en la Web.