Archive

Posts Tagged ‘ie’

Comentarios condicionales para mantener la cordura

mayo 27, 2009 Comments off

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: ,

Eliminando el borde gris de Flash

mayo 21, 2009 1 comment

Debido a que EOLAS demandó a Microsoft por una patente… Pausa para apreciar la ironía… Internet Explorer comenzó a agregar un borde gris alrededor de cualquier película flash y solo se elimina al hacerle clic para activarlas.

Este es el método más sencillo para eliminar ese molesto borde gris en las animaciones flash. Fué inventado por Tohle Býval y no podría ser más sencillo: Solo hay que incluir un script en la cabecera de la página.

IMPORTANTE: Antes de continuar, debo aclarar que este método solo funciona si se está abriendo la página desde un servidor web. Puede ser Apache o IIS montado en el mismo equipo o también el servidor de hosting que usted tenga. Pero si prueban a abrir el HTML diréctamente desde el disco no va a funcionar.

Bueno, no más preámbulos. Justo antes de cerrar la etiqueta <head> hay que agregar el siguiente código:

<!--[if IE]>
<script type="text/javascript" src="fix_eolas.js"
	defer="defer"></script>
<![endif]-->
</head>

Es de vital importancia que mantengan el defer=”defer” para que el script se ejecute cuando todas las películas ya hayan cargado. Además usamos comentarios condicionales para que solo Internet Explorer vea el script.

En esa etiqueta nos referimos a este archivo fix_eolas. El código es muy sencillo:

var objects = document.getElementsByTagName("object");

for (var i=0; i<objects.length; i++)
	objects[i].outerHTML = objects[i].outerHTML;

Lo que ese código hace es re-insertar todas las etiquetas <object>. Con eso es suficiente para eliminar el borde gris de activación.

Para recapitular, si ud. desea eliminar el borde gris solo tiene que hacer lo siguiente:

  1. Agregar la etiqueta a la cabecera.
  2. Guardar el archivo fix_eolas junto con el HTML.
  3. Asegurarse de que está probando desde un servidor web y no desde el disco duro.
  4. ???
  5. ¡Hacerse rico!
Categories: General Tags: , ,