La pesadilla de los programadores y diseñadores

Nos contaba hace un par de días Blanca Salvatierra en un artículo la existencia de una página web que instaba a los usuarios del navegador Internet Explorer 6 a actualizarse o cambiar de navegador.

Realmente es un dolor tener que desarrollar páginas web que se vean bien en todos los navegadores. Aunque la mayoría de los diseñadores y programadores ya se saben los "trucos" para conseguirlo, no deja de ser una gran pérdida de tiempo y esfuerzo.

A día de hoy, los lectores de Público.es utilizan cinco navegadores principalmente (porcentajes aproximados): Internet Explorer 7 (~ 30 % de los usuarios) , Internte Explorer 6 (~ 30%), Mozilla Firefox (~ 30%), Apple Safari (~ 2%) y Opera (~1%).

De estos cinco navegadores, el Internet Explorer 6 (abreviado como IE6) es el menos compatible, para que una página que se ve bien en el resto se vea en IE6 muchas veces hay que recurrir a trucos y "chapucillas".

¿Cómo puede ser ésto? Las páginas web actualmente se basan (principalmente) en tres "lenguajes" con funciones diferenciadas, todos ellos estandarizados por organizaciones de internacionales: HTML, CSS y JavaScript.
El lenguaje HTML es el que contiene el texto o contenido significativo de una página web, el CSS se encarga de formatear y dar estilo a este texto. Finalmente, con JavaScript podemos hacer que el usuario interaccione con una página web de diferentes formas.

El problema es que en teoría todos los navegadores soportan estos tres lenguajes, pero en la práctica, cada uno lo hace a su manera, y de todos ellos, el IE6 es el que más extraño se comporta.

Supongamos que tenemos el siguiente fragmento de HTML (simplificado):

 Prueba con HTML


 

  

   

    
Título del documento
   
   

    

     
Listado de palabras
     

      
Palabra 1
      
Palabra 2
      
Palabra 3
      
Palabra 4
      
Palabra 5
     
    
    

     Esto es un párrafo de texto, párrafo de texto,
     párrafo de texto,párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.
     Esto es otro párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto, párrafo de texto,
     párrafo de texto, párrafo de texto.
    
   
   

    Esto es un texto en el pie de la página.
   
  
 

Este documento se vería así en los distintos navegadores (pulsar para ampliar):



No hemos especificado ningún estilo, así que los navegadores formatean el texto como les parece, aunque el resultado es muy parecido en todos los casos.

Ahora establecemos que este HTML utilice el siguiente CSS que lo formateará. Este CSS es bastante ingenuo, ya que no tiene en cuenta las peculiaridades de los distintos navegadores. Lo que pretende es establecer una página centrada, con una cabecera gris, un cuerpo azul con dos columnas, verde y amarilla y un pie de página rojo:

#contenedor {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 margin: 0 auto;
}
#cabecera {
 background-color: gray;
 width: 730px;
}
#cuerpo {
 background-color: blue;
 width: 730px;
}
#pie {
 background-color: red;
 width: 730px;
}
#colizda {
 width: 180px;
 background-color: green;
 float: left;
 padding: 10px;
}
#coldcha {
 width: 510px;
 background-color: yellow;
 float: left;
 padding: 10px;
}

Las diferencias entre navegadores son notorias:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Hacemos algunos ajustes adicionales conseguimos al fin que en todos se vea igual:

body {
 /* Para centrar en IE6 */
 text-align: center;
}
p, ul {
 margin: 0;
 padding: 0;
}
ul {
 list-style: none;
}
#contenedor {
 margin: 0 auto;
 width: 770px;
}
#contenido {
 border: solid 1px black;
 padding: 10px;
 width: 750px;
 /* Para expandir la capa hacia abajo en
 Safari, Opera y Firefox */
 float: left;
 /* Para compensar el apaño de IE6 en body */
 text-align: left;
}
#cabecera {
 background-color: gray;
 float: left;
 width: 750px;
}
#cuerpo {
 background-color: blue;
 float: left;
 width: 750px;
}
#pie {
 background-color: red;
 float: left;
 width: 750px;
}

Y éste es el resultado:

	Mozilla Firefox
	Opera
	Safari
	Explorer 7
	Explorer 6

Lo más chocante es que para que en IE6 se vea la página centrada tenemos que establecer una propiedad ilógica: que el texto en la etiqueta "body" esté centrado (text-align: center;)
Por otra parte, los dos Internet Explorer expanden y muestran la capa contenedora de las columnas (fondo azul), mientras que en los demás hay que hacerla visible explícitamente.

En general el comportamiento de IE7, Firefox, Opera y Safari es muy similar, los problemas siempre los suele dar el IE6.

Se comprende entonces que los diseñadores de páginas web estén hartos del Explorer 6 y su peculiar forma de interpretar los estándares.

Créditos: gracias a Daniel Solana Tacón, diseñador web de Público por ayudarme con estos CSS.