SuperMag - Weblog de Armando Sosa

Tu navegador apesta

Cómo desplegar contenido específico para internet explorer

Como ya algunos notaron, hasta el diseño de éste sitio pone su granito de arena en la mentada campaña de desinternetexplorerización ya que despliega un mensaje específico para los usuarios de este infame navegador. Si no lo han notado, anden vayan y desempolven su IE para que veand e lo que hablo, aqui los espero.

¿Estan de vuelta conmigo? Bien. El reto que me puse a mi mismo fué no modificar en lo absoluto el codigo HTML del sitio y sin embargo cambiar totalmetne el look del sitio utilizando solamente hojas de estilo. Así que esa es la premisa, no usar màs que CSS para lograr nuestro cometido.

Resulta que, el elemento de diseño que escogí para adornar esa solitaría esquina superior derecha era una especie de robot que pareciera flotar sobre el fondo. Esto fué bastante fácil de hacer sin alterar el HTML de mi anterior diseño ya que tenia un elemento DIV llamado cover (lo utilizaba para desplegar un encabezado al azar en el anterior diseño) que ya no iba a utilizar, asi que llo puse donde quería y le cambié el fondo por un bonito PNG transparente que me daba el efecto que necesitaba.

Desgraciadamente, al ver mi diseño en IE recordé que no soporta ese tipo de transparencias, así que e lugar de flotar con singular gracia y belleza, mi robot tenìa un espantoso fondo fris que obstruìa parte del conenido y el diseño. ¿Que hacer en estos casos? ¿Desechar algo que quieres hacer solo porque el explorador que casi todo mundo usa no se le pega la gana desplegarlo bien? A mi se me ocurriò otra solución.

Cuando declaras una propiedad en una hoja de estílo el valor que le asignes sobreescribe cualquier valor anterior que hubiese tenido antes. Es decir, si yo en una hoja de estilos declarara algo asi:

body {
background-color:white;
background-color:red;
}

el fondo de la página sería rojo, ya que la segunda declaración es la que cuenta. Para evitar que una segunda declaración de una regla sobrescriba un valor asignado CSS nos permite usar !important seguido del valor. Lo que indica que no importa qué se declare después este valor no será sobreescrito. Asi, en :

body {
background-color:white !important;
background-color:red;
}

el color de la página quedaría blanco.

Bueno eso no sucede en IE porque simplemente no soporta la declaración !important. Eso es algo malo, pero podemos tomar ventaja de ello. He aqui lo que yo hice:

#cover{
background:transparent url('images/robot.png') no-repeat !important;
background:transparent url('images/ie_sucks.gif') no-repeat; 
}

de esta manera para todos los navegadores que soporten !important el fondo sera robot.png, para el resto será ie_sucks.gif.

Otra forma de aplicar esta técnica es mediante la propiedad display:block y display:none que puede ser utilizada para mostrar o esconder un elemento de bloque, como puede ser un DIV. Por ejemplo, miremos el siguiente código:

<div id="good_browser">
  Estás utilizando un buen navegador, se ve que eres conocedor.
</div>

<div id="suckin_browser">
  Your browser sucks.
	
	Tienes la puerta abierta para que sinnúmero de aplicaciones 
	malignas que poblan la red hagan lo que quieran con tu sistema.
	
	Cambiate a <a href="http://www.mozilla.org"> algo mejor</a>
</div>

tenemos dos elementos de bloque (DIV) con dos diferentes identificadores #good_browser y #suckin_browser. Ahora, si este código aplicamos las siguientes reglas de CSS:

body {
background-color:white !important;
background-color:red;
}

#suckin_browser{
display:none !important;
display:block; 
}

#good_browser{
display:block !important;
display:none; 
}

Tendremos un mensaje para IE y otro para el resto de los navegadores. Vean el ejemplo (es necesario verlo en ambos navegadores pa’ que se note el efecto)

Esta técnica puede ser utilizada de muchas maneras distinatas, puede mostrar un pequeño mensaje por ahí , mas amigables que los mìos si quieren o de plano pueden ponerse un tanto drásticos y reservarse el derecho de admisión solo para aquellos usuarios conocedores que sean dignos de ver su selecto contenido. Ver ejemplo drástico

Espero que les sea de alguna utilidad.