Ayudamos a reducir la brecha

Facilitamos la creación de contenido para la Web.

Rachel Andrew

Cuando hablamos con los desarrolladores, ya sea de forma individual o a través de encuestas como State of CSS, escuchamos repetidamente las mismas cosas. A los desarrolladores les resulta difícil crear sitios web y aplicaciones que funcionen bien en todos los navegadores, y les cuesta saber cuándo es seguro usar nuevas funciones interesantes.

Separación de Flexbox

Como ejemplo de una propiedad problemática, la propiedad gap te permite crear espacios entre elementos de cuadrícula o flex, o bien columnas en un contenedor multicol. Si bien column-gap ha estado en multicol durante 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, la propiedad se renombró como gap, junto con row-gap y column-gap. Luego, se especificó que también funcionara en el diseño flexible. El cambio de nombre significa que no tenemos varias propiedades que hacen lo mismo.

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

Firefox lanzó la propiedad para diseños flexibles en octubre de 2018. No apareció en Chrome hasta julio de 2020 y, luego, en Safari en abril de 2021. Esto significaba que había un lapso 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, la espera fue mucho más larga, ya que debían 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 funciones para detectar la compatibilidad con el espacio en el diseño flexible. Como la propiedad gap es compatible con la cuadrícula, @supports (gap:1em) devolverá 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. Constantemente, 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 en la que se señala a un navegador por ser lento. Si observas las diferentes funciones de la plataforma, descubrirás que los distintos navegadores lideran diferentes funciones.

La mayoría de las funciones se crearán como prototipos en un navegador. Por ejemplo, la especificación de diseño de cuadrícula fue creada primero por Microsoft y se implementó en una forma 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 que Safari lidera algunas funciones de color nuevas y emocionantes.

Si bien un navegador puede tomar la iniciativa en la creación de prototipos, 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 se diseñe de tal manera que sea imposible implementarla en uno de ellos. Esto 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, las cosas se retrasan debido a otro trabajo que se debe realizar para mejorar el navegador. Un gran ejemplo de esto es el trabajo de RenderingNG en Chromium. Esto allanó el camino para la implementación de subgrid. Sin embargo, la larga brecha entre el envío de subgrid de Firefox y Chromium se debe a la necesidad de que el diseño de cuadrícula se vuelva a implementar primero en el nuevo motor de renderización.

Los problemas

Aquí 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 dejar en claro dónde se encuentran las brechas en la asistencia? ¿Cómo compartimos las funciones nuevas sin que todos tengan que investigar cuidadosamente cada cosa para averiguar qué tan bien se admiten?

Interoperabilidad

Los navegadores ya están trabajando juntos para resolver el problema de interoperabilidad. El año pasado, Compat 2021 ayudó a cerrar la brecha de compatibilidad en varias funciones, incluida la propiedad gap en el diseño flexible. Este año, la iniciativa Interop 2022 se centra en 15 funciones, y ya se han realizado avances 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 interesa ayudar cuando hablamos de 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 solucionar problemas de compatibilidad.

Lanzamos varios cursos básicos y agregaremos más. Estos cursos te ayudan a aprender a compilar para la Web moderna con tecnologías fundamentales de la plataforma web. Salida:

Estamos trabajando para enfocar el contenido de este sitio en lo que puedes usar de forma segura. Aún no llegamos 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 de la Web abierta a través de nuestro apoyo al 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 en web.dev para mostrar la compatibilidad con las funciones. A continuación, se muestra la compatibilidad actual de gap en el diseño flexible.

Browser Support

Si quieres obtener más información sobre la visión de Chrome para la Web y los experimentos que realizamos en las pruebas de Origin y para desarrolladores, encontrarás cada vez más contenido en nuestro sitio hermano: developer.chrome.com. Es posible que el contenido allí sea experimental o que solo se admita en Chrome por el momento, pero nos encantaría que lo exploraras y nos ofrecieras comentarios.

Este es un momento muy emocionante para la Web. Esperamos poder ayudarte a acceder a las funciones clave más rápido y ser claros sobre las brechas existentes, para que el desarrollo web sea más divertido y menos frustrante.

Foto de Cristofer Maximilian.