Mensajes que se ven solo con Internet Explorer

Hace un tiempo coloqué en la sidebar de mi blog un código que detecta si el visitante está usando Internet Explorer, y si es así, muestra un mensaje que le recomienda cambiarse a Mozilla Firefox para visualizar correctamente el sitio, con un botón desde el que puede descargarlo:

Truco para mostrar mensajes solo con Internet Explorer

Pensé en este truco con la finalidad de evitarme el trabajo de construir un sitio que se vea bien tanto con exploradores avanzados y respetuosos de los estándares como Firefox, Opera, Google Chrome y Safari; como con el totalmente obsoleto e inseguro Internet Explorer; una piedra en el zapato para cualquiera que pretenda crear un sitio web decente.

Ahora te mostraré cómo puedes añadirlo a tu blog o sitio web. El mensaje es muy fácil de personalizar y puedes recomendar el navegador que más te agrade; no necesariamente tiene que ser Firefox:

Método general

Existen unas etiquetas especiales del HTML llamadas comentarios condicionales, que sirven para mostrar contenido únicamente en Internet Explorer. La forma en que se usan es la siguiente:

<!–[if IE]>
Contenido a mostrar
<![endif]–>

Entonces, para el caso de los mensajes que se ven solo con IE, bastará con colocar el mensaje dentro de esos comentarios condicionales:

<!–[if IE]>
<p style="text-align:center;"><a href="http://www.mozilla.org/es-ES/firefox/new/" rel="nofollow" target="_blank"><img alt="Mozilla Firefox" src="http://www.duplika.com/img/ffx/otros-ff3.gif" title="Descargar la versión más reciente de Mozilla Firefox"/></a></p>
<p>Estás utilizando Internet Explorer y es posible que veas errores. Este sitio funciona mejor con <b>Mozilla Firefox</b>, que además es más rápido, seguro y 100% libre de virus. Haz clic en el botón para descargarlo (es GRATIS).</p>

<![endif]–>

Y ese es el código que puedes pegar en donde quieras que se muestre el mensaje o personalizarlo a tu gusto.

Método para Blogger

Si tu blog se encuentra alojado en Blogger puedes seguir perfectamente el procedimiento anterior; el problema surgirá si colocas el mensaje en tu sidebar y le pones un título: el mensaje se mantendrá invisible para los navegadores pero no así el nombre que le hayas puesto, lo que dará por resultado algo como esto:

Error con Internet Explorer

Para que el título también desaparezca solo hay que cambiar un poco las instrucciones.

Comenzaremos por añadir un nuevo elemento HTML en la sidebar, ponerle el título que consideremos adecuado (el del mío es “Advertencia”) y pegarle el código siguiente:

<style>
#HTML3 {
display:none;
}
</style>

<!–[if IE]>
<style>
#HTML3 {
display:block;
}
</style>
<p style="text-align:center;"><a href="http://www.mozilla.org/es-ES/firefox/new/" rel="nofollow" target="_blank"><img alt="Mozilla Firefox" src="http://www.duplika.com/img/ffx/otros-ff3.gif" title="Descargar la versión más reciente de Mozilla Firefox"/></a></p>
<p>Estás utilizando Internet Explorer y es posible que veas errores. Este sitio funciona mejor con <b>Mozilla Firefox</b>, que además es más rápido, seguro y 100% libre de virus. Haz clic en el botón para descargarlo (es GRATIS).</p>

<![endif]–>

Lo guardamos, colocamos el puntero sobre el enlace que dice "Editar", y nos fijamos en la dirección que aparecerá en la barra de estado (haz clic en la imagen para ampliarla):

ID elemento Blogger

Si en la parte señalada no dice #HTML3 la sustituiremos por la que se muestre en su lugar. Nótese que en el código aparece dos veces.

Ahora ya podemos entrar al blog con cualquier versión de Internet Explorer para ver cómo quedó.