Home > General > Comentarios condicionales para mantener la cordura

Comentarios condicionales para mantener la cordura

mayo 27, 2009

Si pudiéramos convencer a nuestros clientes de que deben actualizar sus browsers esta página probablemente no sería necesaria, pero como Internet Explorer 6 (un programa que salió en el 2001) todavía es ampliamente utilizado hay que mantener los sitios compatibles con estos browsers antiguos.

Crear un sitio web que se vea igual en diferentes browsers puede hacer que un desarrollador web pierda la razón cuando llegue el momento de corregir los problemas que se presentan en Internet Explorer.

Mi método para crear un sitio web es armar el diseño en Firefox (porque con Firebug y Developer Toolbar tiene el mejor ambiente de desarrollo) hasta que se ve igual a la imagen que me entrega el diseñador. A continuación pruebo en Safari y Chrome con los cuales casi nunca tengo que cambiar nada.

Pero luego llega la hora de probar con Internet Explorer 6 y 7 y lo más probable es que el diseño esté completamente destrozado. Una columna debajo de la otra y con diferentes anchos, fondos y fuentes que no son los correctas, PNGs sin transparencia. Todo esto muy común en versiones anteriores de Internet Explorer.

Se puede probar agregando hacks al CSS (secuencias de caracteres que debido a bugs en los mismos browsers permiten entregar código diferente a algunos browsers) pero siempre me ha quedado un mal sabor de boca al usar estos hacks ya que el código CSS se convierte en un desorden y, claro, ya no valida.

La forma más sencilla que he encontrado es colocar comentarios condicionales al HTML para que diferentes versiones de Internet Explorer carguen hojas de estilo adicionales. Por ejemplo, en la cabecera de la página uno puede colocar:

<link href="general.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]><link href="ie7below.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if lte IE 6]><link href="ie6below.css" rel="stylesheet" type="text/css" /><![endif]-->

En este caso, Firefox, Safari, Chrome e Internet Explorer 8 verán solo la primera hoja de estilos (general.css). Internet Explorer 7 verá general.css e ie7below.css y en esta última agregaremos lo que necesitemos para arreglar la página. Finalmente Internet Explorer 6 verá las tres hojas de estilo y en ie6below.css agregaremos las reglas específicas para IE6.

Veamos cómo funciona: Suponiendo que tenemos el siguiente código HTML:

<div id="wrapper">
	<div id="sidebar">
		<ul>
			<li><a href="/">Inicio</a></li>
		</ul>
	</div>
	
	<div id="content">
		<p>Bienvenido a mi sitio web.</p>
	</div>
</div>

… y queremos que se vea como dos columnas de contenido, podemos hacer algo como esto para los browsers modernos (Firefox, Safari, IE8):

/* general.css */
#wrapper {
	margin: 0 auto;
	overflow: hidden;
	width: 970px;
        margin
}
#sidebar {
	background-color: #CCC;
	float: left;
	padding: 10px 15px;
	width: 150px;
}
#content {
	background-color: #EFEFEF;
	margin-left: 180px;
	padding: 10px 15px;
}

En Internet Explorer 8 el diseño ya se ve como en esta imagen:

ie8

Ahora probemos en Internet Explorer 7 y por supuesto, el “margin: 0 auto” que utilizo para centrar las columnas en la página no funciona y los espacios en el sidebar están diferentes:

ie7

Para arreglarlo abrimos ie7below.css y agregamos el siguiente código:

body { text-align: center }
#wrapper { text-align: left }
#sidebar { zoom: 1 }

Ahora probamos en Internet Explorer 6 y vemos que las columnas tienen diferentes anchos:

ie6

Esto es porque en IE6 hay que incluir el padding en el ancho de la columna. Entonces cambiamos los anchos en el archivo ie6below.css:

#wrapper { width: 590px }
#sidebar { width: 130px }

Perfecto, ya se ve igual en estas tres versiones de Internet Explorer.

Utilizando comentarios condicionales mantenemos nuestra hoja de estilo general mucho más sencilla (la que funciona en browsers modernos) y aun así nos aseguramos que versiones anteriores de Internet Explorer funcionen correctamente.

Para mayor información sobre los comentarios condicionales les recomiendo visitar Quirks Mode – Conditional Comments

Categories: General Tags: ,