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:
- Uso de funciones. Por ejemplo, Flexbox se usa en El 75% de todas las vistas de página y la adopción está creciendo notablemente en HTTP. Archivar.
- Cantidad de errores (en Chromium, Gecko: WebKit) y, en el caso de Chromium, cuántas estrellas que tienen los insectos.
Resultados de la encuesta:
- Encuestas de ADN de MDN
- Informe de compatibilidad del navegador de MDN
- Estado del CSS funciones más conocidas y usadas
Resultados de las pruebas de web-platform-tests. Por ejemplo, flexbox en wpt.fyi:
¿Puedo usar las funciones más buscadas?
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 de Alireza Mahmoudi.
Gatos flexbox de Igalia entrada de blog profundiza en estos problemas con muchos ejemplos más.
Por qué se prioriza
- Encuestas: Problema principal en Informe de compatibilidad del navegador de MDN, más conocidos y usados en State of CSS
- Pruebas: 85% aprobado en todos los navegadores
- Uso: El 75% de vistas de página, y creció fuertemente en HTTP Archivar
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:
Por qué se prioriza
- Encuestas: Subcampeón en Informe de compatibilidad del navegador de MDN, es muy conocido, pero se usa con menos frecuencia en State of CSS
- Pruebas: 75% aprobado en todos los navegadores
- Uso: 8% y sigue creciendo, leve crecimiento en HTTP Archivar
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:
Consulta los encabezados de tablas fijas de Rob Flack.
Por qué se prioriza
- Encuestas: Muy conocidas o usadas en El estado de CSS y surgió varias veces en Informe de compatibilidad del navegador de MDN
- Pruebas: 66% aprobado en todos los navegadores
- Uso: Un 8%
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:
.container {
width: 100%;
padding-top: 56.25%;
}
.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:
Por qué se prioriza
- Encuestas: muy conocidas y utilizadas en State of CSS
- Pruebas: 55% aprobadas en todas navegadores
- Uso: El 80%
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.
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.