(Digitalis) | Microsoft y Google han unido fuerzas para abordar los errores de compatibilidad en los distintos navegadores. De momento, la iniciativa, que recibe el nombre de Compat 2021, ha identificado cinco problemas de diseño comunes a los que se enfrentan los desarrolladores.
Sin embargo, puede haber muchos más. Por eso, Google ha recurrido a “Web Developer Satisfaction” (DevSAT), un proyecto para recopilar información sobre las necesidades de los desarrolladores web. Su objetivo es mejorar la interacción entre estos y los distintos proveedores de navegadores para que se solucionen los problemas que se vayan reportando. Además, también han tomado como referencia para su investigación las encuestas realizadas en MDN (sitio de documentación de Mozilla), State of CSS y State of JS.
A la hora de enfrentarse al desarrollo de un sitio web, uno de los principales quebraderos de cabeza de los desarrolladores es conseguir que su página tenga el mismo aspecto en las diferentes plataformas. Teniendo en cuenta la cantidad de alternativas disponibles para navegar por Internet, puede llegar a convertirse en una auténtica odisea, requiriendo, en ocasiones, añadir distintas propiedades para cada navegador en la hoja de estilos porque el resultado por defecto no es homogéneo.
Actualmente, Chrome y Edge son los navegadores que menos problemas de compatibilidad están dando con una puntuación de 86. Seguidamente, encontramos Firefox con una calificación de 83 y, por último, a Safari, bastante distanciado, con tan sólo un 64 de nota.
Cinco áreas por mejorar
Como mencionamos, de momento, sólo pretenden enfocarse en las cinco áreas más comunes relacionadas con esta cuestión:
- CSS FlexBox: es una función de CSS bastante extendida entre los desarrolladores que permite alinear imágenes en un sitio web. Sin embargo, presenta problemas de compatibilidad en algunos navegadores, ya que, en algunos como Chromium o Webkit, los contenedores flexibles generan imágenes de tamaño incorrecto.
- CSS Grid: sirve para dividir el contenido de un sitio web en cuadrículas o parrillas de manera sencilla. El principal inconveniente radica en la incapacidad de navegadores como Chromium o Webkit para animar estos diseños.
- Position:sticky: permite fijar un elemento en la página para que permanezca inmóvil independientemente de la posición barra de desplazamiento. Por ello, suele ser una propiedad bastante utilizada en los encabezados. El equipo de Compat 2021 indica que es compatible con todos los navegadores, pero existen algunos casos en los que no funciona como se esperaba como en las cabeceras fijas dentro de la etiqueta «<table>».
- Propiedad aspect-ratio: facilita mantener una proporción constante de altura y ancho en varios elementos. Los responsables de la iniciativa consideran que su uso es muy común y, por eso, quieren asegurar que sea una función sólida y coherente en todos los navegadores.
- Transformaciones CSS: son compatibles en todos los navegadores desde hace muchos años, pero hay algunas excepciones, especialmente animaciones y transformaciones 3D, que no funcionan igual en los distintos navegadores.
Si estás interesado en contribuir o, simplemente, quieres estar al día sobre las mejoras de compatibilidad en los distintos navegadores, puedes visitar la página de Compat 2021.