Ayudamos a reducir la brecha

Facilita la compilación para la Web.

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 cuesta saber cuándo es seguro usar funciones nuevas y atractivas.

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ó que también funciona en el diseño flexible. El cambio de nombre implica que no tenemos múltiples propiedades que hacen 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 una brecha 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 de 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 en la que se señala a un navegador por ser lento. 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 descubrir cómo debería comportarse la subcuadrícula, por lo que esta función llegó primero a Firefox. Vemos que Safari toma la delantera en algunas funciones de color nuevas y emocionantes.

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, esta debe priorizarse junto con todas las demás funciones posibles para ese navegador. A veces, algunas cosas se retrasan con otros trabajos 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 en lo que quiero ayudarte cuando hablamos sobre las funciones aquí en web.dev y en developer.chrome.com. Quiero que el estado de las funciones quede muy claro cuando leas nuestro contenido y que podamos proporcionarte formas prácticas de navegar por los problemas de asistencia.

Lanzamos una serie de cursos sobre aspectos básicos 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:

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; sin embargo, en los próximos meses, deberías comenzar a ver un poco de cambio hacia lo práctico.

También colaboramos con la documentación web abierta a través de la colaboración con el proyecto Open Web Docs. Esto garantiza que tengamos documentación de primera clase sobre 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.

Navegadores compatibles

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 63.
  • Safari: 14.1.

Si quieres obtener más información sobre la visión de Chrome para la Web y las funciones con las que estamos experimentando 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 sea experimental o que solo sea compatible con Chrome en este momento, pero nos encantaría que lo explores y nos envíes tus comentarios.

En este momento, es un momento emocionante para la Web. Esperamos poder ayudarte a ofrecerte 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.