Trucos de maquetación con Internet Explorer

De sobra es conocido lo poco seriamente que Microsoft se ha tomado el desarrollar y mantener Internet Explorer. Abusando de la ventaja que le ha dado el venir instalado en todos los ordenadores con Windows, Internet Explorer ha sido y es un navegador pesado, lento, inseguro y poco riguroso con los estándares de Internet. Afortunadaente hoy día disponemos de navegadores mejores. Firefox, Chrome y Opera son ampliamente eficientes en la tarea de reproducir contenido web.

Sin embargo debido a la alta difusión de Internet Explor los maquetadores tienen que lidiar con él a pesar de sus deficiencias. Algunos trucos han de ser conocidos para poder trabajar minimamente con este navegador.

Declaraciones interpretadas por IE6

Si delante de la propiedad usamos un guion bajo solo Internet Exprer 6 interpretará la propiedad. El resto de navegadores la ignorará.  Veamos un ejemplo:

.clase{
    _width: 20px;
}

Si delante de la propiedad usamos un asterisco solo será interpretada por Internet Explorer 7 y anteriores. Veamoslo:

.clase{
    *width: 20px;
}

Si lo que usamos es una almohadilla delante de la propiedad, cualquier versión de Internet Explorer interpretará la propiedad, pero solo Internet Explorer. Por ejemplo:

.clase{
    #width: 20px;
}

El parámetro !important

Cuando declaramos una propiedad podemos decirle que no sea modificada con ninguna declaración posterior. Para esto usamos el argumento !important. Internet Explorer 6 no soporta este argumento pero los siguientes si. Se puede usar, para definir una declaración para los demás navegadores y cambiarla para Internet Explorer 6. Por ejemplo:

p {
color: red !important; /* Todos los demás navegadores */
color: blue; /* IE 6 solamente*/
}

La librería ie7-js

Esta librería javscript resuelve problemas de compatibilidad en navegadores Internet Explorer y añade soporte a transparencias PNG. Para incluirla en nuestro código html usaremos los comentarios condicionales de Internet Explorer. De modo que al cargarse nuestra página en este navegador se cargará la librería javascrip alojada en Google Code. El código a incluir será:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Para más información sobre esta libreria visita la página web del proyecto.

Imagen de fondo fija y escalada a la ventana

Si queremos poner como fondo de nuestra página web una imagen que ocupe toda la ventana del navegador, y que esta este fija de modo que no haya barras de desplazamiento, podemos usar las siguientes propiedades CCS3. Por ejemplo al body.

background-image:url(http://url/img.png);

background-repeat: no repeat;
background-attachment: fixed;
background-position: center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

En navegadores que no sporten CSS3 podría no verse correctamente.

Vídeo tutorial de desarrollo web de Raymicha

En vimeo se encuentran verdaderas maravillas. Un ejemplo es esta cadena de videos que conforman un tutorial de creación de una página web partiendo de una plantilla de photoshop. La autora @raymicha utiliza un lenguaje sencillo y conciso pasando por las etapas para comprender el proceso de creación.

No incrusto los vídeos ya que es mejor ir a al sitio de vimeo para poder verlos en la máxima calidad. Se pueden seguir los enlaces siguientes:

Muy instructivo.