El navegador web más usado en el mundo entero es Chrome. Es lo que conoce la gente que no sabe que Brave o Vivaldi pueden hacer prácticamente lo mismo. Los tres mencionados hasta ahora usan el motor Chromium, y ahí el dominio aún es más abrumador. El resto de la cuota de mercado se la disputan Edge, la opción por defecto en Windows, Safari, lo que usa macOS/iPhone, y Firefox, uno de los navegadores con mejores intenciones que está por defecto en muchas distribuciones Linux.

Lo malo es que Firefox, para poder competir, tiene que hacer las cosas bien. Lo hace en muchos escenarios, pero no lo suficiente en el CSS. En las listas de novedades de sus últimos lanzamientos podemos leer puntos como «ahora se soporta X regla o función CSS», y eso está bien, pero todo avanza rápidamente y Mozilla se queda bastante atrás si lo comparamos con Chromium. Aquí os voy a hablar de un par de ejemplos, aunque el primero de ellos para bien.

Firefox + CSS moderno = ¿problemas?

Yo estudié HTML, CSS y le vi la cara al JavaScript en una academia. Aprendimos las bases, y en una de las prácticas que hice se me ocurrió hacer caso a un diseñador web que decía que no usáramos position: fixed en la cabecera y usáramos la sticky. Me pareció buena idea: si se usa la primera, el elemento «no ocupa espacio», es decir, lo que hay después se desplaza hacia arriba, por lo que hay que hacer cálculos para que no se tape. La segunda, aunque no está diseñada para eso, si «ocupa espacio», por lo que lo que está más abajo en el DOM se queda debajo. Pues bien: Firefox me hizo un estropicio y aprendí por las malas que hay que diseñar para el máximo número de navegadores posibles.

Breve historia para explicar que todo gira en torno al motor Chromium. Todos probamos en Chromium, y pensamos en cómo quedará ahí. Luego miramos Safari, y si va bien en esos, total, Edge debería soportarlo pronto y Firefox… el porcentaje es muy pequeño, «que usen Chrome», se suele decir.

El «nesting» o reglas anidadas de CSS

En 2023, el consorcio W3C tomó prestado de Sass, un pre-procesador de texto para CSS, la sintaxis anidada o nesting en inglés. Intentaremos resumir brevemente qué es para no aburrir a los que no sepan nada de CSS. Hasta ese momento, si queríamos poner una de regla de CSS sobre una etiqueta, clase o ID y otra diferente para cuando se pasa el cursor por encima, teníamos que poner algo así:

a {
    color:red;
}

a:hover {
    color: green;
}

Ahora es posible anidar reglas, de manera que la subclase :hover esté dentro del bloque de la etiqueta a:

a {
    color:red;
    &:hover { 
        color: green; 
    }
}

No vamos a entrar aquí a valorar si es mejor una sintaxis o la otra. Cada uno que decida. Lo cierto es que se usaba mucho Saas incluso en webs en donde se comparte el código, y la han implementado por algo. En teoría, se lee mejor y se ahorran líneas.

El anidado del CSS abarca más que el ejemplo anterior, pero lo que nos interesa aquí es que Firefox lo soporta al 100%. De hecho, Can I Use nos dice que fue el primero en hacerlo. Hay navegadores que obligan a poner el selector de anidado (&) incluso para meter una etiqueta dentro de otra (etiqueta1 etiqueta2), y Firefox funciona perfectamente sin él. Este es el camino. El siguiente ya no tanto.

Animación de desplazamiento sin JavaScript

En este enlace de Developer Mozilla (MDN) hay otra novedad que ya no va tan bien en Firefox. Bueno, no va. Lo curioso es que MDN lleva el nombre del creador de Firefox en su nombre propio, y en su blog es en donde encontré esta novedad también de 2023. Aquí no hay que hablar tanto de sintaxis y hay que quedarse en el soporte. Eso, y también que, hasta entonces, lo más habitual era mostrar la posición del desplazamiento con JavaScript. Era en el JS en donde se tenía que añadir un escuchador de eventos y hacer crecer un contenedor dependiendo del punto de la página en el que estuviéramos. Ahora se puede sólo con CSS.

Me he tomado la libertad de añadir el código de uno de los ejemplos (si lo miráis, ignorad el z-index) a esta página. Si entráis con Chrome/Chromium, Vivaldi y Brave, por mencionar unos pocos, veréis que arriba hay una barra que se desplaza junto al contenido (si no ha salido nada mal). Sin embargo, en Firefox se verá la barra a su 100% de anchura.

Safari no está mejor que Firefox, pero…

Tampoco se verá la animación en Safari, o no en el momento de escribir este artículo. Es el otro navegador importante que se queda atrás en el CSS, pero no es exactamente el mismo caso. Safari es el navegador por defecto en macOS, y funciona muy bien en su ecosistema. También es lo que usa el iPhone, y gracias a esto tiene bastante cuota de mercado. Así que, como comentábamos, es el segundo navegador que analiza cualquier diseñador web.

Cuando se quiere implementar algo nuevo y se visita Can I Use, que es la referencia, se mira primero Chrome, luego Safari y ya después el resto. Si se decide no implementar algo no es porque no esté disponible en Firefox; es porque no está para Safari. Por lo tanto, Mozilla tendría que mejorar su navegador, como mínimo, más que Safari. Por suerte lo está haciendo, pero muy despacio si no quiere estar a años luz de Chromium.