Ayudamos a reducir la brecha

Facilita la compilación para la Web.

Rachel Andrew

Cuando hablamos con los desarrolladores, ya sea de forma individual o a través de encuestas como el Estado del CSS, escuchamos lo mismo una y otra vez. A los desarrolladores les resulta difícil crear sitios web y aplicaciones que funcionen bien en todos los navegadores, y les resulta difícil saber cuándo es seguro usar nuevas funciones interesantes.

Flexbox gap

Como ejemplo de una propiedad problemática, la propiedad gap te permite crear espacios entre elementos grid o flex, o columnas en un contenedor multicol. Si bien tenemos column-gap en varias columnas desde hace mucho tiempo, la propiedad apareció por primera vez en el diseño de cuadrícula como grid-gap, junto con grid-column-gap y grid-row-gap.

Poco después de que el diseño de cuadrícula llegó a los navegadores, se cambió el nombre de la propiedad a gap, junto con row-gap y column-gap. Luego, se especificó para que también funcionara en un diseño flexible. El cambio de nombre significa que no tenemos varias propiedades que hagan lo mismo.

.box {
  display: flex;
  gap: 1em;
}

Firefox envió la propiedad para diseños flexibles en octubre de 2018. No apareció en Chrome hasta julio de 2020, y en Safari en abril de 2021. Esto significaba que había un período de dos años y seis meses antes de que pudiéramos usar gap de forma segura. En realidad, para la mayoría de los desarrolladores, el tiempo de espera era mucho mayor debido a la necesidad de admitir versiones del navegador anteriores a la más reciente. La compatibilidad con gap en el diseño flexible se volvió más problemática debido a que no podemos usar consultas de componentes para detectar la compatibilidad con espacios en el diseño flexible. Como la propiedad gap es compatible con la cuadrícula, @supports (gap:1em) mostrará un valor verdadero.

Otro problema es que, cuando una función nueva llega a un navegador, las personas comienzan a hablar de ella y a compartir demostraciones. Esto suele comenzar mucho antes de que la función esté disponible en cualquier navegador estable. Esto puede ser confuso para los desarrolladores o, al menos, frustrante. Se habla de funciones nuevas y brillantes en todas partes, y luego descubres que no puedes usarlas debido a la falta de compatibilidad.

¿Por qué hay brechas en la asistencia?

Esta no es una publicación apuntando con el dedo a un navegador por ser lenta. Si observas las diferentes funciones de las plataformas, descubrirás que cada navegador tiene la delantera en diferentes funciones.

La mayoría de las funciones se prototipar en un navegador. Por ejemplo, Microsoft creó la especificación del diseño de cuadrícula por primera vez y la implementó en un formulario inicial en Internet Explorer 10. Un ingeniero de Mozilla trabajó mucho para determinar cómo debería comportarse la subcuadrícula, por lo que esta función llegó primero a Firefox. Vemos a Safari a tomar la delantera en algunas nuevas y emocionantes funciones de color.

Si bien un navegador puede liderar el prototipado, los representantes de todos los navegadores (y otras organizaciones) del grupo de trabajo de CSS analizan las funciones de CSS. Es muy importante que una función se pueda implementar en todos los navegadores y que no esté diseñada de manera tal que sea imposible implementarla en uno. Eso generaría una brecha permanente en la asistencia y una falta de adopción de la función.

Sin embargo, cuando se trata de implementar una función, se debe priorizar junto con todas las demás funciones posibles para ese navegador. A veces, el trabajo se retrasa debido a otras tareas que se deben realizar para mejorar el navegador. Un buen ejemplo de esto es el trabajo de RenderingNG en Chromium. Esto allanó el camino para la implementación de la subcuadrícula. Sin embargo, la gran brecha entre la subcuadrícula de envío de Firefox y Chromium se debe a la necesidad de volver a implementar el diseño de cuadrícula en el nuevo motor de renderización.

Los problemas

Tenemos dos problemas. El primero es el problema de interoperabilidad, el hecho de que puede llevar mucho tiempo desde el momento en que una función llega a un navegador hasta que está disponible en todas partes.

El segundo es un problema de mensajería. ¿Cómo podemos aclarar dónde están las brechas en la asistencia? ¿Cómo compartimos funciones nuevas sin que todos tengan que investigar cada elemento con cuidado para determinar qué tan bien se admite?

Interoperabilidad

Los navegadores ya están trabajando juntos para resolver el problema de interoperabilidad. El año pasado, la Compatibilidad 2021 ayudó a cerrar la brecha en la compatibilidad con varias funciones, incluida la propiedad de espacio en el diseño flexible. Este año, el esfuerzo de Interop 2022 se centra en 15 funciones, y ya se ha avanzado en algunas de ellas.

Puedes seguir el progreso en el panel de Interop 2022.

Mensajería

El segundo problema es algo con lo que me gustaría ayudarte cuando hablemos de las funciones aquí en web.dev y en developer.chrome.com. Quiero que el estado de las funciones sea muy claro cuando leas nuestro contenido y que proporcionemos formas prácticas de abordar los problemas de asistencia.

Lanzamos varios cursos fundamentales y agregaremos más en el futuro. Estos cursos te ayudan a aprender a crear contenido para la Web moderna con las tecnologías principales de la plataforma web. Salida:

• Aprende CSS
• Aprender Formularios
• Aprende a diseñar
• Información sobre la AWP

Estamos trabajando para enfocar el contenido de este sitio en aquello que puedes usar de forma segura. Aún no hemos llegado a ese punto, pero deberías comenzar a ver un cambio hacia lo práctico en los próximos meses.

También contribuimos a la documentación web abierta a través de nuestra compatibilidad con el proyecto Open Web Docs. Esto garantiza que tengamos documentación de primer nivel en MDN, junto con datos de compatibilidad del navegador actualizados. Luego, usamos estos datos aquí en web.dev para mostrar la compatibilidad con las funciones. Esta es la compatibilidad actual de gap en el diseño flexible.

Si quieres obtener más información sobre la visión de Chrome para la Web, con qué estamos experimentando en las pruebas de origen y para desarrolladores, verás cada vez más ese contenido en nuestro sitio asociado: developer.chrome.com. Es posible que el contenido sea experimental o que solo se admita en Chrome en este momento, pero nos gustaría que lo explores y nos envíes comentarios.

En este momento, es un momento emocionante para la Web. Esperamos poder ayudarte a llevar las funciones clave más rápido y ser claros sobre las brechas que existen, lo que hará que el desarrollo web sea más divertido y menos frustrante.

Foto de Cristofer Maximilian.