Diseño Web y Navegadores

Los usuarios disponemos de multitud de navegadores web para explorar internet; por mencionar algunos de los más populares y utilizados, podemos citar los siguientes: Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, … Como veis, la lista es extensa.

Seguro que muchos ya lo sabéis porque lo habéis vivido en vuestras carnes, pero para los que se inician en el mundo del diseño y desarrollo web, destacar que cada navegador interpreta los estilos de un modo distinto, causando que nuestro diseño web se vea de forma diferente en cada uno de ellos.

Por suerte, esto cada vez pasa menos, ya que los navegadores modernos se actualizan frecuentemente y siguen una serie de estándares que nos evitan tantos dolores de cabeza como antaño. En este sentido, el navegador web que más quebraderos de cabeza supone para un maquetador web es, sin lugar a dudas, Internet Explorer.

Internet Explorer

Antes de que los defensores de Microsoft y su Internet Explorer me decapiten, destacar que efectivamente las versiones actuales de este navegador ya no son lo que eran y, hoy por hoy, podemos decir que IE es un buen navegador web, que no nos va a trastocar nuestro diseño web.

El problema es que todavía existen usuarios de las versiones 6, 7 y 8 de Internet Explorer, que son las que nos implicarán adaptar nuestra maquetación. A partir de IE 9, el navegador de Microsoft comenzó a asemejarse a lo que se esperaba de un navegador web moderno (en esta versión 9, con ciertas excepciones aún así).

Como decíamos, las versiones 6, 7 y 8 de Internet Explorer nos obligan a hacer cambios en los estilos CSS de nuestra web, lo que ocurre (lógicamente) es que esos cambios sólo le deben afectar a este navegador, y a una, dos o a las tres versiones en función de cada caso.

La realidad es que Internet Explorer 6 está casi en desuso, y actualmente IE 7 también cuenta con unas estadísticas bajas, lo cual está repercutiendo que muchos desarrolladores web ignoren estas versiones del navegador. Por el momento, no ocurre lo mismo con IE 8 que, lamentablemente, todavía es demasiado utilizado como para dejarlo de lado.

¿Cómo aplicar estilos CSS para un navegador en concreto?

Existen varias formas de aplicar diferentes estilos CSS a un navegador o varios navegadores en concreto. La verdad es que este post se haría eterno si intentamos explicarlo aquí, pero lo cierto es que os recomiendo encarecidamente la web Browserhacks.

Sin duda es la recopilación más grande de hacks para diversos navegadores web. En dicha página os explican los diferentes métodos que podéis utilizar para aplicar diferentes estilos en función de los navegadores web. Para cada uno de los métodos indicados, especifican a qué navegadores y versiones del mismo afecta.

¿Es suficiente con adaptar los estilos CSS para que una web se vea correctamente en todos los navegadores?

La realidad es que por norma general no es suficiente con modificar los estilos CSS para que nuestra web se visualice correctamente en todos los navegadores. Esto es debido a que las «nuevas» características de HTML5, que poco a poco se han ido introduciendo en los navegadores modernos, hacen que tengamos que adaptar ciertos detalles para los navegadores más antiguos.

Es habitual el uso de JavaScript (jQuery para ser más exactos) para lograr que navegadores antiguos interpreten elementos de HTML5. Por otro lado, no sólo el problema lo tenemos con los navegadores antiguos, sino que entre los modernos también existen diferencias; un ejemplo sería que Chrome admite un formato de vídeo que Firefox no, y viceversa.

Por si todo lo comentado fuese poco, también hay que tener en cuenta que los motores JavaScript de los navegadores son diferentes, por lo que es posible que ciertas funciones JavaScript se ejecuten correctamente en un navegador y no en otro; o incluso que se ejecute bien en ambos, pero en uno con un rendimiento mucho mejor que en otro,…

Conclusión

La principal conclusión que podemos extraer de este artículo, es que a la hora de desarrollar una web, no nos quedará más remedio que revisarla en todos los navegadores y versiones que podamos, o al menos en los que sabemos que es más crítico el error.

16 agosto, 2014