Multimedia Universitat Oberta de Catalunya

«Cross-browser»

César Córcoles

[Última actualización: 21/10/2018]

Dada la inmensa variedad de navegadores que existen en el mercado, es extremadamente complicado que una página se vea igual en todos ellos. En ocasiones, eso es deseable: en general no querremos que una página se vea igual en un navegador ‘de escritorio’ que en la pantalla de un móvil, pero en general querremos que, como mínimo, toda la funcionalidad esté disponible para todos los navegadores y que se conserve un aspecto tan homogéneo como sea posible independientemente del navegador que usemos.

Existen diversas filosofías sobre el tema, como la graceful degradation (que propone diseñar para los navegadores más potentes y asegurar que toda la funcionalidad está disponible para todos los navegadores) o el progressive enhancement (diseñamos para los navegadores más básicos y añadimos después, en capas, las funcionalidades más sofisticadas para navegadores más potentes).

Podéis leer, sobre el tema, Define Graceful Degradation & Progressive Enhancement de Julien Etienne. Y otro documento muy interesante es Graded Browser Support, propuesto inicialmente por Yahoo!.

Y naturalmente, hoy todo se combina con la necesidad de tener en cuenta temas como el responsive design y filosofías como el mobile first, que propone que es mejor comenzar pensando en móviles y después ‘crecer’ a pantallas y dispositivos más grandes y probablemente más potentes, aunque todas las aproximaciones al tema presentan dificultades importantes.

Un recurso imprescindible en que se documenta el soporte de las diferentes versiones de los diferentes navegadores tradicionales (entendiendo por tradicionales aquellos que corren sobre ordenadores con sistemas operativos Windows, OS X o Linux) para las diferentes funcionalidades de CSS es Can I use. Cuenta con un equivalente para navegadores para dispositivos: Mobile HTML5.

Polyfills

Una herramienta a tener muy en cuenta para poder ofrecer características sofisticadas y no presentes en todos los navegadores son los «polyfills», bibliotecas de JavaScript que podemos cargar si el navegador no soporta de manera nativa alguna característica que nos resulta necesaria, y emularla a través de la biblioteca, de manera transparente. De todas formas, deben usarse con cuidado y con moderación, porque comportan efectos secundarios, como un efecto potencialmente muy negativo sobre la velocidad con que los navegadores pueden mostrar la página que hemos creado.

Bibliotecas como html5shiv añaden soporte para los elementos de HTML5 a las versiones de Internet Explorer que no lo tienen por defecto (esto es, en general, las versiones 6, 7 y 8). Existen alternativas más sofisticadas, como Modernizr, que permiten detectar qué soporte para características de HTML5 y CSS3 tiene el navegador en que se está visualizando una página web.

Algunos ‘polyfills’ a tener en cuenta:

  • CSSRegions.js es un polyfill experimental para ofrecer soporte para regiones CSS a aquellos navegadores que no cuentan con él.
  • Flexie da soporte cross-browser para el modelo de cajas flexibles (o flexible box model), aunque utilizando una sintaxis antigua (más información).
  • Polyfilter toma la sintaxis oficial de filtros CSS y la traduce a diferentes técnicas equivalentes según el navegador sobre el que esté funcionando.
  • ie7-js, Selectivizr y CSS3 PIE se dirigen específicamente a versiones antiguas de Internet Explorer y resuelven bastantes de sus carencias con respecto a los estándares más modernos.

Otro recurso a tener en cuenta son los ‘hacks’, trampas que explotan inconsistencias en el manejo de determinadas sentencias por parte de los navegadores para pasar determinado CSS en exclusiva a determinados navegadores. Una buena documentación sobre el tema puede consultarse en Browserhacks.


Dealing with IE (Jeremy Keith, 9 de enero, 2013)

Cuota de mercado

Chrome hits 17-month low, Windows 8 still only creeping upward (Ars Technica, 2 de marzo de 2013. Hay que tener en cuenta, por un lado, que se trata de un estudio de mercado, como siempre en estos casos y, por otro lado, que tiene en cuenta a todo el planeta.)

Browser Trends October 2014 (Sitepoint, octubre de 2014)

Usage share of web browsers (Wikipedia, 2018)