[Darrera actualització: 21/10/2018]
Donada la immensa varietat de navegadors que existeixen en el mercat, és extremadament complicat que una pàgina es vegi igual en tots ells. En ocasions, això és desitjable: en general no voldrem que una pàgina es vegi igual en un navegador ‘d’escriptori’ que en la pantalla d’un mòbil, però en general voldrem, com a mínim, que tota la funcionalitat estigui disponible per a tots els navegadors i que es conservi un aspecte tan homogeni com sigui possible independentment del navegador que usem.
Existeixen diverses filosofies sobre el tema, com la graceful degradation (que proposa dissenyar per als navegadors més potents i assegurar que tota la funcionalitat està disponible per a tots els navegadors) o el progressive enhancement (dissenyem per als navegadors més bàsics i afegim després, en capes, les funcionalitats més sofisticades per als navegadors més potents).
Podeu llegir, sobre el tema, l’entrada Define Graceful Degradation & Progressive Enhancement de Julien Etienne. I un altre document molt interessant és Graded Browser Support, proposat inicialment per Yahoo!.
I naturalment, actualment tot es combina amb la necessitat de tenir en compte temes com el responsive design i filosofies com el mobile first, que proposa que és millor començar pensant en mòbils i després ‘créixer’ a pantalles i dispositius més grans i probablement més potents, tot i que totes les aproximacions al tema presenten dificultats importants.
Un recurs imprescindible en el que es documenta el suport de les diferents versions dels diferents navegadors tradicionals (entenent per tradicionals aquells que corren sobre ordinadors amb sistemes operatius Windows, OS X o Linux) per a les diferents funcionalitats de CSS és Can I use. Compta amb un equivalent per a navegadors per dispositius: Mobile HTML5.
Polyfills
Una eina a tenir molt en compte per a poder oferir característiques sofisticades i no presents en tots els navegadors són els “polyfills”, biblioteques de JavaScript que podem carregar si el navegador no suporta de manera nativa alguna característica que ens resulta necessària, i emular-la a través de la biblioteca, de manera transparent. En qualsevol cas, s’han d’utilitzar amb compte i moderació, perquè comporten efectes secundaris, com un efecte potencialment molt negatiu sobre la velocitat amb què els navegadors poden mostrar la pàgina que hem creat.
Biblioteques como html5shiv afegeixen suport per als elements d’HTML5 a les versions d’Internet Explorer que no en tenen per defecte (és a dir, en general, les versions 6, 7 i 8). Existeixen alternatives més sofisticades, como Modernizr, que permeten detectar quin suport per a característiques d’HTML5 i CSS3 té el navegador en què s’està visualitzant una pàgina web.
Alguns ‘polyfills’ a tenir en compte:
- CSSRegions.js és un polyfill experimental per oferir suport per a regions CSS als navegadors que no en tenen.
- Flexie dona suport cross-browser per al model de caixes flexibles (o flexible box model), tot i que fent servir una sintaxi antiga (més informació).
- Polyfilter pren la sintaxi oficial de filtres CSS i la tradueix a diferents tècniques equivalents segons el navegador sobre el què estigui funcionant.
- ie7-js, Selectivizr i CSS3 PIE s’adrecen específicament a versions antigues d’Internet Explorer i resolen força de les seves mancances respecte dels estàndards més moderns.
Un altre recurs a tenir en compte són els ‘hacks’, trampes que exploten inconsistències en el maneig de determinades sentències per part dels navegadors per tal de passar determinats fragments de CSS exclusivament a determinats navegadors. Una bona documentació sobre el tema es pot consultar a Browserhacks.
Dealing with IE (Jeremy Keith, 9 de gener, 2013)
Quota de mercat
Chrome hits 17-month low, Windows 8 still only creeping upward (Ars Technica, 2 de març de 2013. S’ha de tenir en compte, d’una banda, que es tracta d’un estudi de mercat, com sempre en aquests casos i, d’altra, que té en compte tot el planeta.)
Browser Trends October 2014 (Sitepoint, octubre de 2014)
Usage share of web browsers (Wikipedia, 2018)