El navegador web més usat al món sencer és Chrome. És allò que coneix la gent que no sap que Brave o Vivaldi poden fer pràcticament el mateix. Els tres esmentats fins ara usen el motor Chromium, i aquí el domini encara és més aclaparador. La resta de la quota de mercat se la disputen Edge, l'opció per defecte a Windows, Safari, el que fa servir macOS/iPhone, i Firefox, un dels navegadors amb millors intencions que està per defecte a moltes distribucions Linux.
El pitjor és que Firefox, per poder competir, ha de fer les coses bé. Ho fa a molts escenaris, però no prou al CSS. A les llistes de novetats dels seus últims llançaments podem llegir punts com ara es suporta X regla o funció CSS, i això està bé, però tot avança ràpidament i Mozilla es queda bastant enrere si ho comparem amb Chromium. Aquí us parlaré d'un parell d'exemples, encara que el primer per bé.
Firefox + CSS modern = problemes?
Jo vaig estudiar HTML, CSS i vaig veure la cara al JavaScript en una acadèmia. Vam aprendre les bases, i en una de les pràctiques que vaig fer se'm va acudir fer cas a un dissenyador web que deia que no uséssim position: fixed a la capçalera i fem servir la sticky. Em va semblar bona idea: si es fa servir la primera, l'element «no ocupa espai», és a dir, el que hi ha després es desplaça cap amunt, per la qual cosa cal fer càlculs perquè no es tapi. La segona, encara que no està dissenyada per a això, si «ocupa espai», de manera que el que està més avall al DOM es queda a sota. Doncs bé: Firefox em va fer un espatllament i vaig aprendre per les males que cal dissenyar per al màxim nombre de navegadors possibles.
Breu història per explicar que tot gira al voltant del motor Chromium. Tots vam provar a Chromium, i pensem com quedarà aquí. Després mirem Safari, i si va bé en aquests, total, Edge ho hauria de suportar aviat i Firefox… el percentatge és molt petit, «que usin Chrome», se sol dir.
El «nesting» o regles imbricades de CSS
El 2023, el consorci W3C va prendre prestat de Sass, un pre-processador de text per a CSS, la sintaxi imbricada o implantació en anglès. Intentarem resumir breument què és per no avorrir els que no sàpiguen res de CSS. Fins aquell moment, si volíem posar una regla de CSS sobre una etiqueta, classe o ID i una altra diferent per quan es passa el cursor per sobre, havíem de posar una cosa així:
a {
color:xarxa;
}
a:hover {
color: green;
}
Ara és possible niar regles, de manera que la subclasse :hover estigueu dins del bloc de l'etiqueta a:
a {
color:xarxa;
&:hover {
color: green;
}
}
No entrarem aquí a valorar si és millor una sintaxi o una altra. Cadascú que decideixi. La veritat és que s'usava molt Saas fins i tot a webs on es comparteix el codi, i l'han implementat per alguna cosa. En teoria, es llegeix millor i s'estalvien línies.
El niat del CSS abasta més que l'exemple anterior, però el que ens interessa aquí és que el Firefox ho suporta al 100%. De fet, Can I Use ens diu que va ser el primer a fer-ho. Hi ha navegadors que obliguen a posar el selector de niat (&) fins i tot per ficar una etiqueta dins una altra (etiqueta1 etiqueta2), i Firefox funciona perfectament sense. Aquest és el camí. El següent ja no tant.
Animació de desplaçament sense JavaScript
En aquest enllaç de Developer Mozilla (MDN) hi ha una altra novetat que ja no va tan bé al Firefox. Bé, no hi va. El curiós és que MDN porta el nom del creador de Firefox en el seu nom propi, i al seu bloc és on vaig trobar aquesta novetat també del 2023. Aquí no cal parlar tant de sintaxi i cal quedar-se al suport. Això, i també que, fins aleshores, el més habitual era mostrar la posició del desplaçament amb JavaScript. Era al JS on s'havia d'afegir un escoltador d'esdeveniments i fer créixer un contenidor depenent del punt de la pàgina on estiguéssim. Ara només es pot amb CSS.
M'he pres la llibertat d'afegir el codi d'un dels exemples (si el mireu, ignoreu el z-index) a aquesta pàgina. Si entreu amb Chrome/Chromium, Vivaldi i Brave, per esmentar-ne uns quants, veureu que a dalt hi ha una barra que es desplaça al costat del contingut (si no ha sortit gens malament). No obstant això, al Firefox es veurà la barra al 100% d'amplada.
Safari no està millor que Firefox, però…
Tampoc no es veurà l'animació a Safari, o no al moment d'escriure aquest article. És l'altre navegador important que es queda enrere al CSS, però no és exactament el mateix cas. Safari és el navegador per defecte a macOS, i funciona molt bé al seu ecosistema. També és el que utilitza l'iPhone, i gràcies a això té força quota de mercat. Així que, com comentàvem, és el segon navegador que analitza qualsevol dissenyador web.
Quan es vol implementar alguna cosa nova i es visita Can I Use, que és la referència, es mira primer Chrome, després Safari i ja després la resta. Si es decideix no implementar alguna cosa no és perquè no estigui disponible al Firefox; és perquè no està per a Safari. Per tant, Mozilla hauria de millorar el navegador, com a mínim, més que Safari. Per sort ho està fent, però molt a poc a poc si no vol estar a anys llum de Chromium.