1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Cómo ganarle a Internet Explorer 6 con estilo

He cambiado de opinión, En defensa de IE6.

Hace un par de días veo la idea de una campaña para deshacerse de Internet Explorer 6 liderada por Andrés Nieto.

La idea era bastante radical, el 18 de Octubre impedir el acceso a nuestras páginas a todos los visitantes que usen Internet Explorer 6.

En mi opinión ese tipo de actos atentan contra el derecho a la información.

Y por más que Odie a Internet Explorer 6, tengo que oponerme a iniciativas de ese tipo.

Estoy seguro que esa idea se le ocurrió en uno de esos momentos de desesperación a los que IE6 nos tiene tan acostumbrados.

Luego el mismo Andrés se dio cuenta del gran problema de esta campaña y la reformuló. Ahora la idea es dejar sin CSS a los usuarios de Internet Explorer 6!

Una idea simplemente genial!, así los usuarios no se pierden de ningún contenido y nosotros dejamos de preocuparnos por ese obsoleto navegador :)

En Aprendiendo web ya estabamos en contra de IE6 (aunque no de una forma tan radical), así que...

Apoyamos la lenta y dolorosa muerte de IE6...

Y contribuimos con un poco de XHTML, CSS y unas lineas de JS (cortesía de JuanPablo Scaletti)...

Ahora AprendiendoWeb.com en Internet Explorer 6 se verá así:

Aprendiendo Web en Internet Explorer 6

Lo único que tiene estilos para IE6 es el gran banner, que puede contener el mensaje que prefieras.

Si quieres unirte a la campaña necesitas 3 cosas:

  1. Un sitio Web
  2. Odiar a IE6 con toda tu alma
  3. Agregar sólo un poco de código en tus páginas

El código

Primero, y dentro de comentarios condicionales, el JS que elimina los estilos y luego el CSS que le da estilos al banner. El nombre realmente-odio-IE6.css es el que uso yo, elige el que más te guste.

Copia y pega este código inmediatamente antes de cerrar el elemento <head>, es decir, justo arriba de la etiqueta </head>.

<!--[if lte IE 6]>
<script type="text/javascript">for (var i=0, css; css=document.styleSheets[i]; i++){css.cssText=""}</script>
<link rel="stylesheet" href="/RUTA/realmente-odio-IE6.css" type="text/css" />
<![endif]-->

Ahora, para el archivo CSS, puedes simplemente bajarte el mio realmente-odio-IE6.css, eso es lo que le da estilos al banner... claro que para eso tambien necesitas el banner...

Así que ahora copia este código justo abajo de la etiqueta <body>.

<!--[if lte IE 6]>
<p id="no-more-ie6"><strong>¿Todavía usas IE6?</strong> &mdash;no te preocupes, no le diremos a nadie que aún festejas como si fuera 1999&mdash; pero si quieres una <strong>mejor experiencia web</strong>, entonces <a href="http://www.microsoft.com/windows/internet-explorer/download-ie.aspx" title="Internet Explorer 7">actualiza</a> tu navegador o prueba <a href="http://www.mozilla.com/en-US/firefox/" title="Get Firefox!">otro</a>.</p>
<![endif]-->

El texto que aparecerá será este:

¿Todavía usas IE6? —no te preocupes, no le diremos a nadie que aún festejas como si fuera 1999— pero si quieres una mejor experiencia web, entonces actualiza tu navegador o prueba otro.

Puedes cambiar este texto a lo que prefieras, pero si quieres mantener los estilos no le cambies el id.

Listo, ahora cada vez que alguien entre a tu sitio lo verá sin estilos, no te preocupes, te prometo que si usas un buen HTML tus visitantes no tendrán ningún problema... porque ¿usas un buen HTML no?...

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Sanbor Sanbor

    Me gusta el texto que has usado, es intuitivo y no del estilo "tu navegador es anticuado y sos un perdedor, cuando tengas un firefox vuelve por aqui". <a href="http://www.sanbor.name/2009/02/25/no-ie-modal-box/">Yo hice una iniciativa similar pero mas grafica</a>, para avisar cuando mis sitios no ofrecen soporte a ie6. Me ha gustado tu texto, tal vez lo utilice, gracias.

  2. Avatar de Martín Aberastegue Martín Aberastegue

    Y si recomendamos Opera y Safari tambien?, son excelentes opciones y si vamos al caso hay gente todavia utilizando versiones arcaicas de los mismos. No solo de IE6 tenemos que librarnos. Actualmente utilizo el script the "Pushup The Web" en mi blog:
    http://www.pushuptheweb.com/
    Es muchisimo menos ofensivo e informa a todo usuario que posea una version antigua de su navegador.

  3. Avatar de Jorge Jorge

    Odio a IE6 con toda mi alma y no pienso seguir agregando comentarios condicionales y hacks que me quitan muchas horas de trabajo. Pero también hay que tener en cuenta que hay usuarios de IE6 que lo usan porque simplemente les gusta, ya se que es increíble, pero es así. A algunas(muchas) personas no les importa demasiado el software que utilicen para navegar en la red, a otras simplemente no les gustan las otras opciones a pesar de conocerlas y en algunos casos haberlas probado (¿han probado Firefox en una Pentium 2?).
    Ahora, mi pregunta sería: ¿debemos discriminar a estos usuarios por el navegador que utilizan?

  4. Avatar de Phillipe Calmet Phillipe Calmet

    Es una muy interesante propuesta, y definitivamente un alivio al problema de estar acomodando los estilos para IE6. Veré de implementarlo al rediseñar mi web y mi blog.

    Sobre lo que dice Martín Aberastegue: sí es verdad que se podría considerar otros navegadores, aunque hasta donde se (por lo menos en FF), aparecen mensajes para actualizar el navegador, por lo que es mucho más probable que la gente actualice, lo cual no sucede con IE.

    Saludos.

  5. Avatar de Shisu Shisu

    la solucion que estas dando no es la unica lo que se puede hacer es lo siguiente, a mi me resulta bien, solucion para IE6 IE7 y firefox:

    /* Clase para Firefox */
    .elemento {
    margin: 10px 10px 10px 10px;
    background-color: #f00;
    }

    /* Clase para IE7 */
    *:first-child+html .elemento {
    margin: 5px 5px 5px 5px;
    background-color: #0f0;
    }

    /* Clase para IE6 */
    * html .elemento {
    margin: 2px 2px 2px 2px;
    background-color: #00f;
    }

    pruebenlo :)

  6. Avatar de Juan Pablo Juan Pablo

    @Shisu ¿De que estás hablando? Creo que te equivocaste de post.

  7. Avatar de Laren Laren

    No se olviden que esto es solo por un día.

    Y recuerden que aún hay miles de personas que entran a Internet desde una cabina, donde muchas veces no tienen control sobre el software que usan.

    Saludos

  8. Avatar de Germán Germán

    @Laren, no, esto no es sólo por un día, por lo menos Aprendiendo Web se va a quedar así.

    Sobre el argumento de las cabinas de internet,es cierto que muchas veces no tienes control sobre el software que usas, pero puedes elegir la cabina que más se adecue a tus gustos.

    Además, igual el acceso al contenido no se restringe de ninguna manera.

    Saludos.

  9. Avatar de alfredo alfredo

    Yo uso Firefox, pero eso de enlazar al sitio de Firefox cuando se recomienda cambiar a otro navegador no me parece.

    Sería mejor enlazar a sitios como http://browsehappy.com/why/ para que las personas sepan que existen otras alternativas, puede que no les guste firefox, como le sucede a muchas personas que les recomiendo.

    También están Chrome, Safari, Flock, Opera y muchos más.

    Lo importante es saber que hay muchas propuestas mejores que IE6

  10. Avatar de José José

    hola, de q estas hablando ?, quien te has creido o quienes se han creido para tratar de influir en los cybernautas ? bajanse de sus nubes, uds., no influyen a nadie, jajajajajajaja quienes se han creido q son ?????, microsoft ? Bill Gates ??, la gente visita esta pagina como visita a 50,000 paginas mas, y no les da ninguna importancia, y cada quien utiliza lo q le de la gana , suerte , bye

  11. Avatar de Germán Germán

    @jose,
    ¿Sabes que tu navegador es del 2001??
    ¿Sabes que según Microsoft IE7 es una actualización crítica de seguridad?

    Esta página se queda como está, eres bienvenido aquí con cualquier navegador, incluso IE6, sólo que en ese caso no habrán estilos.

    Suerte!

    (nota: el comentario de José fue escrito desde IE6)

  12. Avatar de Lalo Lalo

    @Jose...
    No se trata de cambiar la forma de pensar... se trata de mejorar la web. Muchos de nosotros "vivimos" de la web.
    De seguro eres de esas personas que, tira basura en la calle, no recicla etc.
    IE6, no es mas que un carro feo que conntamina la vialidad Web.

    @German...
    Creo que si dejamos sin estilos a IE6, no se daran cuenta de la necesidad de cambiar de navegador, creo que mas que nada hay que hacer ver PORQUE no deben de usar IE6, opino que deberiamos programar sin preocuparnos si se ve bien o no en IE6.
    (Obvio que esto solo se podria hacer en sitios como Blogs propios, seria imposible hacerlo en una web que vende algo)
    Los usuarios de IE6 deben de adaptarse a los que hacemos la web, no nosotros a ellos. Hay estandares que seguir, y si IE6 no los sigue simplemente ignoremoslo... IE6 es como un niño mal-creado que no sigue reglas, seriamos padres estupidos si dejamos que ese niño nos domine.

    Lalo

  13. Avatar de La kbina La kbina

    Vaya, que buen artículo me he encontrado. He tenido varios problemas con el diseño de mi sitio y todos en internet explorer 6. Estaba pensando utilizar unos hacks, pero la verdad es bastante trabajo y el css se llena de mucha basura.

    No entiendo como la gente se puede quedar con cosas obsoletas y no asumen los avances que a diario se dan. Además de que cómo les cuesta trabajo comprender que tienen bastantes alternativas y no las aprovechan.

    Muchas gracias! Mi sitio también se queda con el script, aunque sí le deje los estilos, pero muy deformados (gracias a ie6)

    saludos!

  14. Avatar de Tatuy Tatuy

    Es muy interesante el tema, y ver como todos nosotros los cybernautas comentamos sobre algo que nos interesa, la verdad me encanta esto, bueno mi opinion, prefiero guardarmela para otra ocacion. Les deseo lo mejor, suerte!.

  15. Avatar de Manuel Bea Manuel Bea

    La verdad que me ha gustado mucho no solo la idea que habeis tenido, sino que se hable de esto y se llegue a conclusiones serias, porque desde luego el tema de IE6 es algo que nos concierne a todos, a cualquiera que disfrute de web y a cualquiera que se dedique a crearla o modificarla, por suerte cada vez hay menos gente con IE6. En mi opinion , habria que hacer mas publicidad a este tipo de campanyas para que la gente se diera cuenta de que aparte del atraso estan quedandose sin acceso a sitios donde no deberian tener problema

  16. Avatar de Víctor Víctor

    Esta iniciativa simplemente es genial.

    Me estoy iniciando como diseñador web, e hice una página para practicar que navegadores como; Fire Fox, Opera, Chrome, Safari. Lucen un estilo impresionante del que yo mismo estoy orgulloso.

    Ahora viene la parte triste me toca probar la web con la obeja negra IE 6 ohhhh... Al carajo todo, las fotos se colocan donde quieren, la tipografía pixelada, marganes & padding ignorados o mal tratados, dificultando la accesibilidad del sitio con respecto a su lectura.

    @José
    Dejeme decirle querdio usuario de IE6 (sin animo de ofensa )
    que su comentario atacante y agresivo está fuera de lugar.

    Que pensaría ud. si decidiera estudiar English para viajar al extranjero y trabajar?
    Usted cree que le enseñarian a hablar el Old English ( Viejo Ingles de la edad media )? si, porsupesto, es un Ingles muy bonito, pero cree usted que se podrá comunicar con las personas.

    Creo que he sido claro...
    No se trata de gustos, sino de estandares que cumplir para que todas las personas tengamos acceso al contenido web, una gran autopista valiosa de información y gratis.

    IE6 y sus versiones hermanas siempre se han saltado a la torera los estandares "por ser los amos del mundo como sistema operativo" a la espera de que la W3c ( Org. Estandares web ) se adaptasen a IE por el simple hecho de acoger más usuarios.

    No, amigo. Está ud. equivocado, con pensamientos así no hay avance de ningún tipo.

    Muy buen tema. mi más sincera enohorabuena.
    Me uno a la iniciativa.

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910