¿Estás harto de soportar IE 6? ¿Listo para cortarlo? No te culpo. En general, creo que la mayoría de los problemas que la gente tiene con IE 6 es bastante fácil de solucionar con la práctica, pero no siempre es así, y creo que el soporte de JavaScript es aún más problemático para los desarrolladores.
Muchas veces todo se reduce a cuál es la mejor manera de emplear su tiempo. Si tiene que elegir entre diseñar y codificar una nueva característica de su sitio web que el 80% de su audiencia usará y disfrutará o trabajará en la resolución de errores de IE 6 para el 20% (y cada vez más reducido) de su audiencia, iría con la nueva función.
Pero entonces surge la pregunta de CÓMO dejará de admitir IE 6. ¿Simplemente no hace nada y deja que los diseños se estropeen y la funcionalidad se corte? Yo diría que es una mala idea. Si deja de apoyar IE 6, hágalo con confianza e informe a esa parte de su audiencia de lo que pueden hacer.
Introducir el Script de bloqueador de IE 6. Usando un poco de detección simple de navegador de JavaScript y algo de jQuery, podemos dejar nuestro soporte de IE 6 con un mensaje muy claro.
Ver demostración Descargar archivos
A continuación, detallaremos cómo funciona y cómo usarlo.
Incluye y detección de navegador
En la sección
del sitio, necesitaremos incluir tanto jQuery como el archivo de script. ...
<script type="text/javascript" src="https://css-tricks.com/ie-6-blocker-script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="https://css-tricks.com/ie-6-blocker-script/jquery.ie6blocker.js"></script>
</head>El script ie6blocker.js realiza la detección del navegador en su primera línea:
var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
if(IE6) {
... do stuff ...
}Alternativamente, podríamos haber hecho la detección de nuestro navegador directamente dentro del archivo HTML con una declaración de comentarios condicionales:
<!--[if IE 6]>
<script type="text/javascript" src="https://css-tricks.com/ie-6-blocker-script/jquery.ie6blocker.js"></script>
<![endif]-->Sin embargo, dado que con nuestra técnica necesitaremos JavaScript habilitado para que funcione de todos modos, también podríamos dejar que JavaScript haga la detección. También puedes hacerlo de ambas formas …
El jQuery
Ahora que hemos detectado para IE 6, usaremos jQuery para crear algunos elementos de página nuevos e insertarlos en la página. El objetivo es una superposición negra transparente para toda la pantalla (haciendo que el sitio sea reconocible pero inútil). Luego, encima de eso, un cuadro de mensaje centrado que explica la falta intencional de los sitios de soporte para IE 6. Para aliviar un poco el golpe, es posible que desee ofrecer una forma alternativa de ver su contenido (como el feed RSS de blogs). Algunas personas no pueden actualizar sus navegadores, por lo que un mensaje que les diga que lo hagan por sí solos puede no ser lo suficientemente bueno.
Se necesitarán dos div. Uno para el cubrir, y uno para el buzon de mensaje. Podemos crearlos, CSS, contenido y todo, directamente dentro de jQuery JavaScript:
Aquí está la superposición:
$("<div>")
.css({
'position': 'absolute',
'top': '0px',
'left': '0px',
backgroundColor: 'black',
'opacity': '0.75',
'width': '100%',
'height': $(window).height(),
zIndex: 5000
})
.appendTo("body");Con un navegador moderno, podríamos configurar la parte superior, derecha, inferior e izquierda en 0px, pero a IE 6 no le gusta eso, por lo que debemos configurar la parte superior e izquierda en 0px, y el ancho en 100%. La altura es un poco más complicada. Establecerlo al 100% no funciona en IE 6. Podríamos usar un número estático realmente grande, pero eso no es divertido y activará una barra de desplazamiento que puede que no sea necesaria. Muchas superposiciones de “cajas de luz” utilizan las “expresiones” CSS patentadas para obtener la altura de la ventana de esta manera:
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); Eso no va a funcionar para nosotros aquí, porque jQuery aplica este estilo “en línea” y no se calculará de esa manera. Afortunadamente para nosotros, jQuery ahora tiene la capacidad de calcular la altura de la ventana. (Las versiones más nuevas de jQuery tienen incorporado el antiguo plugin de dimensiones). Aquí también se usa un valor de índice Z alto para asegurarse de que la superposición se ubique encima del resto del contenido.
Aquí está el cuadro de mensaje:
$("<div><img src="https://css-tricks.com/ie-6-blocker-script/no-ie6.png" alt="" style="float: left;"/><p><br /><strong>Sorry! This page doesn't support Internet Explorer 6.</strong><br /><br />If you'd like to read our content please <a href="http://getfirefox.org">upgrade your browser</a> or <a href="http://feeds.feedburner.com/CssTricks">subscribe to our RSS feed</a>.</p>")
.css({
backgroundColor: 'white',
'top': '50%',
'left': '50%',
marginLeft: -210,
marginTop: -100,
width: 410,
paddingRight: 10,
height: 200,
'position': 'absolute',
zIndex: 6000
})
.appendTo("body");Observe que todo el marcado para el cuadro de mensaje está ahí, en un gran objeto jQuery. El CSS de interés aquí es que establecemos los valores izquierdo y superior en 50% y luego lo colocamos nuevamente en el centro con márgenes negativos (la teoría). Luego usamos un valor de índice z más alto para colocarlo encima de la superposición.
¡Deberias hacer eso! Realmente bastante simple. No dude en descargar los archivos, modificarlos como mejor le parezca y utilizarlos usted mismo.
Ver demostración Descargar archivos
Nota: No estoy defendiendo que todos los sitios del mundo abandonen su compatibilidad con IE 6. Simplemente ofrezco esto como un tutorial y una teoría sobre cómo se puede hacer. Debe tomar sus propias decisiones basándose en su propia audiencia sobre si apoyará IE 6 o no.