Blog de Diseño
Código para mostrar un aviso en navegadores obsoletos ie6
| Publicado por TenTuLogo en Herramientas webmasters, ProgramaciónSi eres desarrollador web (webmaster), seguro que estarás harto de Internet Explorer 6. Nosotros mismos ya hicimos un artículo al respecto criticándo Internet Explorer y animando a que los ususarios cambiaran de navegador.
Afortunadamente, Microsoft parece que ya tiene en cuenta los estándares web y el nuevo Internet Explorer 9 es un ejemplo a seguir en cuanto a respetar los estánderes de la W3C, sobre todo para el nuevo y aclamado HMTL5. Hemos hecho también un artículo al respecto.
Un dato muy revelador:
Microsoft Internet Explorer 6.0 fue lanzado al mercado el 27 de agosto de 2001, poco después de que Windows XP fuera terminado.
O sea que… ¡ya es hora de dejarlo atrás!
Pero como muchos sabrán, hay personas que siguen utilizando el obsoleto y mohoso Internet Explorer 6, precisamente porque es el que viene por defecto en Windows XP, sistema operativo que muchos siguen reinstalándose, resistiéndose a usar versiones más nuevas de dicho sistema operativo.
Proponemos una solución radical que ayude a “exterminar” dicho navegador.
En webs como Youtube ya sale un mensaje de aviso para que actualices de navegador si visitas dicha web con IE6, y en casos como Facebook directamente ni funciona el sistema, te lanza un error.
En nuestro blog decidimos unirnos al grupo de páginas web que en vez de intentar adaptarse a IE6 con parches y apaños en el código, decidieron cambiar de estrategia y directamente mostrar un mensaje de aviso para que esas personas que visitan nuestra web a través de IE6 reciban un mensaje invitándoles a que actualicen de navegador.
En este artículo les enseñaremos como insertar este mismo aviso que tenemos nosotros implementado.
Como mostrar un aviso en navegadores obsoletos como Internet Explorer 6 mediante CSS
La solución es sencilla (para los que tengan conocimientos básicos de HTML y CSS):
Breve resumen de la solución:
Se trata de colocar un <div> con el aviso que permanecerá oculto mediante CSS, y por medio de una simple condicional, cuando la web se vea desde IE6, se cargarán otras CSS que dejarán visible dicho aviso.
Paso 1
Crearemos el div en cualquier parte del <body> de nuestra web. Puede estar en cualquier parte, pero recomendamos ponerlo abajo del todo para que no interfiera mucho en los textos de cara a los buscadores.
Nota importante: Para copiar correctamente los códigos mostrados a continuación, hace clic en el botoncito que hay en la esquina superior derecha de cada caja de código (el icono que está al lado izquierdo del de imprimir)
El div puede ser algo así:
<div id="aviso-navegador"> <p><strong>AVISO Y RECOMENDACIÓN</strong></p> <p>Su navegador web (Internet Explorer 6) <strong>está obsoleto</strong> lo cual puede provocar que <strong>ciertos elementos se muestren descolocados o no se carguen correctamente</strong>. Además, <strong>tampoco podrá ver bien</strong>, populares webs como <strong>Youtube o Facebook, entre otras muchas.</strong></p> <p><strong>Le recomendamos <a href="http://www.microsoft.com/spain/windows/internet-explorer/" target="_blank">actualizar su navegador aquí</a> </strong>o instalarse otros fantásticos nevagadores gratuitos como <a href="http://www.mozilla-europe.org/es/firefox/" target="_blank">Firefox</a> o <a href="http://www.google.com/chrome" target="_blank">Chrome</a>.</p> <p>Ah, y no olvide guardar nuestra web en favoritos! <strong>Muchas gracias :)</strong></p> </div>
Paso 2
Ahora pasaremos a ocultar dicho div desde nuestras css principales. Esto es lo más fácil de todo. Solo tenemos que añadir esta línea en nuestro archivo css:
#aviso-navegador {visibility:hidden;}
Paso 3
Ya tenemos entonces listo el aviso y ocultado mediante css. Solo nos interesa que lo vean los que usan Internet Explorer 6.
Para ello vamos a crear por otro lado un archivo css que en este ejemplo vamos a llamar ie6.css
Dicho archivo css tendrá los estilos que le quieras dar al aviso (colores, tamaño, posición, etc.) y lo más importante, le diremos que dicho div se muestre con un visibility:visible
Algo así te puede valer:
#aviso-navegador {
background-color:#FFFFCC;
border:5px solid #EE5113;
color:#333333;
font-size:9pt;
height:auto;
line-height:12pt;
padding:15px;
position:absolute;
right:7px;
top:7px;
width:428px;
z-index:2;
visibility:visible !important;
}
Lógicamente, este es nuestro ejemplo en concreto, que queda alineado y con los tamaños que nosotros hemos considerado para nuestro blog. Quizás tu debas configurar estas sencillas css para que quede bien visualmente en tu web.
Un consejo en este punto: Mientras haces pruebas para ajustar el diseño, tal vez te sea más cómodo que todos estos estilos los pongas en el archivo css principal de tu web, para así poder hacer pruebas por ejemplo con Firefox y Firebug, y una vez el mensajito esté con el diseño a tu gusto, ya pones los estilos editados en el archivo ie6.css y en tus css principales borras esos estilos, dejando ahí solamente lo que hemos indicado en el Paso 2
Paso 4
Por último y no por ello menos importante, es insertar la condicional que hará que se carguen nuestras css alternativas en el caso de que se visualice la web desde Internet Explorer 6.
Es una sencilla condicional que puede parecer un simple comentario en nuestro código, pero que funciona a la perfección.
Se coloca entre las etiquetas <head></head> de nuestra web, y dice así:
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" media="all" href="ie6.css" /> <![endif]-->
Explicación de la condicional:
Con este código estamos indicando que si el navegador es alguna versión anterior a IE7, que cargue el archivo de estilos “ie6.css”
Es decir, que no solo vale para IE6 sino que también incluso para aquellos pocos (pero que aún inexplicablemente quedan) que usan IE5. (¡ya les vale!)
Lógicamente, para probar esto, necesitarás tener esa pieza de “relicario” llamada Internet Explorer 6.
Hay algunos programas que te permiten mostrar una web en todas las versiones de IE sin la necesidad de tener dicho navegador instalado.
Cualquier duda o comentario que quieran hacer al respecto será bienvenida.
(5,00 sobre 5.00 / Votaciones totales: 1) Déjanos tu votación!
Loading ...
Entradas relacionadas:
- Importante: Google no permitirá navegadores antiguos A partir del 1 de agosto, quien quiera disfrutar de las magnificas y gratuitas herramientas como Gmail, Google Calendar, Talk, Docs, entre otros, deberá tener...
- El nuevo navegador de Microsoft rompe con “el mito” Todo apunta a que la nueva versión de Internet Explorer (9) (Aún en fase beta en las fechas en las que este artículo se ha...
- Les animamos a que NO usen Microsoft Internet Explorer, ¿por qué? Razones: A parte de que es lento, no es seguro y es inestable, creo que todos los que hemos diseñado webs alguna vez, hemos “sufrido”...
2 Comentarios a:
Código para mostrar un aviso en navegadores obsoletos ie6
Comenta:
Translator
Encuesta
Loading ...Encuesta
Loading ...
[...] lo mismo en sus webs. Para ello, prácticamente a la par, hemos publicado el siguiente artículo: Código para mostrar un aviso en navegadores obsoletos ie6 Aún no hay valoraciones. ¡Sé el primero en votar! Loading … ShareSi te gusta este [...]
Muchas gracias me fue muy útil, excelente sitio web.