"Advertencia: El siguiente sitio se ve mejor con…"

Así es, el famoso mensaje que nos recuerda una y otra vez que alguien no tuvo el tiempo ni las ganas de desarrollar un sitio compatible con nuestro navegador. Y como si eso fuese poco, nos recomiendan que descarguemos otro navegador y cambiemos la resolución de nuestro monitor. ¡Una locura!

Todos los que desarrollamos sitios web, en algún momento de nuestras vidas, nos encontramos con el mismo problema: la incompatibilidad entre navegadores. Una incompatibilidad que refleja, no solo la calidad de nuestro trabajo, sino también la interminable lucha de la W3C por establecer normas y estándares. Como todos ya saben, los navegadores se encuentran en constante desarrollo. Las empresas que los fabrican lanzan nuevas y mejores versiones con el fin de cumplir con ciertas reglas y aportar nuevas características. Ahora, ¿qué navegador utilizan las personas que visitan nuestro sitio? ¿Internet Explorer, Netscape, Opera, Safari o Konqueror? ¿Qué versión? ¿Con qué frecuencia los actualizan? ¿Qué preferencias tienen configuradas? ¿Qué plugins tienen instalados? ¿Qué plataforma de trabajo utilizan? ¿Windows, Mac, Linux, WebTV? ¿Bajo qué restricciones? Estas son algunas de las tantas preguntas que, como desarrolladores, nos debemos hacer a la hora de desarrollar un sitio web.

"No es una cuestión de piel, es una cuestión de navegadores"

NavegadoresLos navegadores actúan como traductores, traducen los documentos HTML en páginas web formateadas. Las reglas básicas para traducir estos documentos son establecidas por la World Wide Web Consortium (W3C), que se encarga de publicar los estándares oficiales del HTML en su sitio web. Ahora, esto es todo un tema, por no decir problema, ya que no todos los navegadores se rigen en base a estas normas, como así tampoco las interpretan de la misma manera. Por ejemplo, W3C establece que el tag TABLE debe soportar el atributo CELLSPACING para que uno pueda definir el espacio entre celdas. Pero los estándares no definen que valor lleva ese atributo por defecto, por lo tanto, si no especificamos un valor, los navegadores lo hacen por nosotros.

¿Qué navegadores debemos tener en cuenta a la hora de desarrollar un sitio? Fácil. Los más populares. Siempre es bueno tener en cuenta las dos últimas versiones de los mismos. O sea, tampoco vamos a retrasar el avance tecnológico por un loco que sigue usando Netscape 3.

Para aquellos que no estudiaron "Historia del Navegador" en
la universidad de Google, les cuento que la rivalidad entre Microsoft y Netscape
lo único que dejo fue una gran incompatibilidad entre navegadores, nada
mas. De ahí vienen los famosos tags LAYER e IFRAME, por nombrar algunos.
Por suerte, la época en que los navegadores inventaban sus propios tags
forma parte del pasado. Hoy en día muchos de estos tags se encuentran
en vías de extinción. Aunque esto no quita que la rivalidad entre
estas dos empresas haya terminado. Basta con ingresar a Hotmail utilizando el
navegador Netscape para ver lo que sucede.

Navegadores vs Desarrolladores

A partir de la llegada de Netscape 6, por fin podemos manejar capas con el mismo código para los navegadores Internet Explorer y Netscape: 

<div id="capa" style="position:static; width:300; height:300;">
Funciona en Netscape 6+ e Internet Explorer 5+ 
</div>

Las versiones 4.x y anteriores de Internet Explorer y Netscape no reconocen el tag DIV, por lo tanto proceden a ignorarlo. Pero esto no significa que ignoren lo de adentro, lo cual nos permite sacar una ventaja muy importante a la hora de desarrollar un sitio compatible. Nunca se preguntaron para qué existen ciertos tags y atributos? Como por ejemplo el tag NOSCRIPT o el atributo ALT del tag IMG. No se inventaron para que el manual de HTML contenga más páginas, se inventaron para que podamos desarrollar sitios más compatibles. Algunas personas no permiten o no tienen permitido ejecutar rutinas de JS en su navegador, otras no quieren o no pueden ver imágenes. Y el tag NOSCRIPT y el atributo ALT están justamente para eso, para ajustar nuestro sitio a las preferencias y/o restricciones del visitante.

Ahora, cuando se trata de una incompatibilidad, ¿cómo le pedimos a un navegador que traduzca algo que no entiende? Por suerte, los navegadores poseen el maravilloso don de la indiferencia. Cuando no reconocen un tag, lo ignoran. Es muy importante destacar que los navegadores ignoran los tags que no reconocen, pero no lo de adentro.

Por ejemplo:

Si el tag DIV es reconocido por el navegador, creamos una capa de 300×300. Si no es reconocido por el navegador, utilizamos el tag LAYER para crear una capa de 300×300. 

<html>
<head>
<style>
#capa {position: absolute; width: 300; height: 300;}
</style>
</head>
<body>
<div id="capa" style="position: absolute; width:300; height:300;">
<layer id="capa" position="absolute" width="300" height="300">
Funciona en Netscape 4.x, 6+ e Internet Explorer 4.x, 5+
</layer>
</div>
</body>
</html>

Fácil, no? Ahora, incorporemos dos tags más a este ejemplo, SCRIPT y NOSCRIPT. Este ultimo es un tag muy valioso, que muchos desarrolladores olvidan de utilizar a la hora de trabajar con JS. 

<html>
<head>
<style>
#capa {position: absolute; width: 300; height: 300;}
</style>
</head>
<body>
<div id="capa" style="position: absolute; width:300; height:300;">
<layer id="capa" position="absolute" width="300" height="300">
<script languaje="javascript">
document.write("Bienvenidos a mi sitio web...");
</script>
<noscript>
Bienvenidos a mi sitio web...
</noscript>
</layer>
</div>
</body>
</html>

Este es el verdadero uso que se le debe dar al tag NOSCRIPT, de lo contrario caemos nuevamente en el error de los mensajes sin sentido, como por ejemplo: "Lo siento, su navegador no soporta JS". Y que sentido tiene informarle al usuario que su navegador no soporta JS? Como si se fuese a descargar otro navegador. Hay que pensar un poco más en el usuario, como solucionarle los problemas. De lo contrario, lo único que estamos haciendo con este tipo de mensajes, es crearle otro problema más.

Fallas en los navegadores

El navegador mas popular, ya sea para PC o Mac, sigue siendo Internet Explorer, seguido por Netscape y Opera. Aunque Safari, el navegador que incluye por defecto Mac en su sistema operativo, esta realizando un excelente trabajo. Es muy importante aclarar que cuando hablamos de Internet Explorer para PC, no estamos hablando de Internet Explorer para Mac. Por más hijos del mismo padre que sean, uno es rubio y el otro es morocho. Dicho en otras palabras, los dos tienen diferentes fallas e incompatibilidades. Otro navegador que se utiliza mucho a la hora de revisar sitios es el Konqueror, que corre bajo Linux.

Las fallas o "bugs" que contienen los navegadores, son las termitas de internet. Se comen todo lo que encuentran en el camino. Todos los navegadores contienen fallas y cometen errores, sobre todo a la hora de interpretar hojas de estilo y/o scripts.

La mejor forma de lidiar con esto es:

  1. Descargando e instalando la mayor cantidad de navegadores posibles. Nunca viene mal tener a mano unos cuantos navegadores de colección .
  2. Validando los documentos HTML y archivos CSS utilizando herramientas on-line: W3C’s CSS Validator o algún software dedicado: Top Style Pro .
  3. Visitando los sitios de las empresas que fabrican navegadores. Generalmente ahí publican las fallas de sus navegadores: Bugzilla .
  4. Conociendo las principales fallas de los navegadores más populares: Microsoft

Por ejemplo, sabían que: 

.capa { 
font-size: 10pt;
width: 300px;
height: 300px;
overflow: auto;
/* overflow auto fix for Mac IE 5 */
padding: 0px 16px 0px 0px;
}

a. Netscape 4.x (PC) no reconoce la propiedad "height".

b. Opera 4.x / 5.x y Netscape 4.x (PC y Mac) no reconocen la propiedad "overflow".

c. Internet Explorer 5 (Mac) genera dentro de las capas un margen imaginario de -15px.

d. El valor "px" le permite al usuario cambiar el tamaño de las fuentes, mientras que "pt" no.

Y, otra falla muy conocida que muchos desarrolladores parecen ignorar: 

function mostrar(capa){
if (document.getElementById){
// innerHTML bug fix for NS 6
objeto.style.top = '1px';
objeto.style.top = '0px';
objeto.innerHTML='hola mundo';
}
}

e. Netscape 6 (PC) contiene una falla al escribir dentro de una capa. Dicha falla se puede solucionar posicionando nuevamente la capa.

El siguiente sitio nos permite realizar una excelente prueba de compatibilidad: Site viewer

Conclusión final

Tenemos que aprender a ver nuestro sitio con los ojos de nuestros visitantes. Esto implica verlo con el mismo navegador, las mismas preferencias, el mismo sistema operativo, las mismas restricciones, el mismo monitor y hasta la misma resolución. Hasta el día de hoy, el método de prueba y error sigue siendo el mas efectivo a la hora de combatir la incompatibilidad.

No se olviden que existen dos tipos de mensajes en internet, "lo siento, tiene un problema" y "no se preocupe, ya esta solucionado". Como así también existen dos tipos de sitios, los que "se ven mejor con…" y los que se ven igual con todos.

Un saludo muy grande a toda la comunidad de Maestros del Web!