Facilitamos la compilación para la Web.
Cuando hablamos con los desarrolladores, ya sea de forma individual o mediante encuestas como el Estado de CSS, escuchamos lo mismo en repetidas ocasiones. 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 emocionantes.
Espacio de Flexbox
Como ejemplo de una propiedad problemática, la propiedad gap te permite crear espacios entre elementos de cuadrícula o elementos flex, o columnas en un contenedor multicol. Si bien tuvimos column-gap en multicolecciones 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.
Justo después de que llegara el diseño de cuadrícula a los navegadores, se cambió el nombre de la propiedad por 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 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, seguido de 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, la espera era mucho más larga, ya que necesitaban compatibilidad con versiones del navegador anteriores a la última. La compatibilidad con gap en el diseño flexible se volvió más problemática porque no podemos usar las consultas de funciones para detectar la compatibilidad de brechas en el diseño flexible. Como la propiedad gap es compatible con la cuadrícula, @supports (gap:1em) mostrará el valor "true".
Otro problema es que, cuando aparece una función nueva en un navegador, las personas comienzan a hablar sobre ella y a compartir demostraciones. Esto suele comenzar mucho antes de que la función se encuentre en un navegador estable. Esto puede resultar confuso para los desarrolladores o, al menos, frustrante. Reiteradamente, 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 que apunta con el dedo a un navegador por ser lenta. Si observas diferentes funciones de la plataforma, descubrirás que los distintos navegadores toman la delantera en cuanto a distintas funciones.
La mayoría de las funciones se crearán en un prototipo en un navegador. Por ejemplo, Microsoft creó la especificación de diseño de cuadrícula por primera vez y la implementó de forma inicial en Internet Explorer 10. Un ingeniero de Mozilla hizo mucho trabajo para determinar cómo debía comportarse la subcuadrícula, por lo que esta función llegó primero a Firefox. Sabemos que Safari toma la delantera en algunas nuevas y emocionantes funciones de color.
Aunque un navegador puede tomar la iniciativa en cuanto al prototipado, los representantes de todos los navegadores (y otras organizaciones) en el CSS Working Group analizan las funciones del CSS. Es muy importante que una función se pueda implementar en todos los navegadores y que no esté diseñada de modo que sea imposible implementarla en un solo navegador. Eso generaría una brecha permanente en la asistencia y la 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 de ese navegador. Y, a veces, las cosas se retrasan detrás de otros trabajos que hay que hacer para mejorar el navegador. Un buen ejemplo de esto es el trabajo RenderingNG en Chromium. Esto allanó el camino para la implementación de subcuadrícula; sin embargo, la larga brecha entre la subcuadrícula de envío 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 la interoperabilidad, el hecho de que puede llevar mucho tiempo desde que llega una función a un navegador hasta que está disponible en todas partes.
El segundo es un problema de mensajería. ¿Cómo podemos dejar en claro cuáles son las brechas en la asistencia? ¿Cómo compartimos las nuevas funciones sin que tengan que investigar cuidadosamente cada una de las opciones para descubrir qué tan bien respaldadas?
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 en la compatibilidad con varias funciones, incluida la propiedad gap en el diseño flexible. Este año, la iniciativa de Interoperabilidad 2022 se centra en 15 funciones, y ya se ha generado un aumento en algunas de ellas.
Puedes seguir el progreso en el panel de Interoperabilidad 2022.
Mensajería
El segundo problema es algo en lo que me gustaría ayudar cuando hablemos sobre las funciones en web.dev y developer.chrome.com. Quiero que el estado de las funciones sea muy claro cuando leas nuestro contenido, y que podamos ofrecerte formas prácticas de abordar los problemas de asistencia.
Lanzamos varios cursos fundamentales, y próximamente incorporaremos más. En estos cursos, aprenderás a compilar para la Web moderna con las tecnologías principales de las plataformas web. Registro de salida:
Estamos trabajando para enfocar nuestro contenido en este sitio en aquellos elementos que puedes usar de forma segura. Aún no estamos completamente allí; sin embargo, deberías empezar a ver un pequeño cambio hacia la práctica en los próximos meses.
También contribuimos a la documentación web abierta a través de nuestra asistencia 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, usaremos estos datos aquí en web.dev para demostrar la compatibilidad con las funciones. Esta es la compatibilidad actual de gap en el diseño flexible.
Navegadores compatibles
- 84
- 84
- 63
- 14.1
Si quieres obtener más información sobre la visión de Chrome para la Web, las funciones con las que estamos experimentando en las pruebas de Origen y Desarrollador, encontrarás cada vez más contenido en nuestro sitio asociado: developer.chrome.com. Es posible que el contenido allí sea experimental o solo esté disponible en Chrome, pero nos encantaría que lo explores y nos ofrezcas comentarios.
Realmente es un momento emocionante para la Web. Esperamos que podamos ayudarte a proporcionarte las funciones clave más rápido y a aclarar las brechas que existen, de modo que el desarrollo web sea más divertido y menos frustrante.
Foto de Cristofer Maximilian.