Internet Explorer lejos de ser una solución es un gran problema en internet, y sobre todo para los que nos dedicamos a ello. Su falta de compatibilidad y el uso que hacen millones de usuarios de versiones antiguas del mismo, obliga a avisar a los internautas a que usen otro navegador ya que van a ver la página web totalmente descuadrada.
Con estos dos sencillos pasos, lograremos redireccionar las visitas que provengan de Internet Explorer 6 y 7 a un archivo HTML para avisar al usuario que nuestro sitio web no se puede ver con el actual navegador y le advertiremos de que para entrar en nuestro sitio, debe usar otro o actualizar la última versión.
Nota: sólo funcionará si estamos trabajando en Apache 2.
.htaccess
Creamos o añadimos al fichero .htaccess:
RewriteEngine On RewriteCond %{HTTP_USER_AGENT} "MSIE 7" [or] RewriteCond %{HTTP_USER_AGENT} "MSIE 6" RewriteRule . actualiza-explorer.html [L]
HTML
Creamos el archivo actualiza-explorer.html en el mismo directorio y añadimos dentro:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Actualice su navegador</title>
<style type="text/css">
body{
background-color: #404040;
font-family: Helvetica,Arial,sans-serif;
}
.warning {
width: 550px;
height: 250px;
margin-top: -125px;
margin-left: -275px;
left: 50%;
top: 50%;
position: absolute;
background-color: #ffffff;
text-align:center;
border:10px solid #2d2d2d;
border-radius:10px;
}
.texto{
text-align: justify;
margin:10px;
margin-bottom:40px;
}
button.cupid-green {
background-color: #7fbf4d;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
background-image: linear-gradient(top, #7fbf4d, #63a62f);
border: 1px solid #63a62f;
border-bottom: 1px solid #5b992b;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
box-shadow: inset 0 1px 0 0 #96ca6d;
color: #fff;
font: bold 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 7px 0 8px 0;
text-align: center;
text-shadow: 0 -1px 0 #4c9021;
width: 150px;
}
button.cupid-green:hover {
background-color: #76b347;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #76b347), color-stop(100%, #5e9e2e));
background-image: -webkit-linear-gradient(top, #76b347, #5e9e2e);
background-image: -moz-linear-gradient(top, #76b347, #5e9e2e);
background-image: -ms-linear-gradient(top, #76b347, #5e9e2e);
background-image: -o-linear-gradient(top, #76b347, #5e9e2e);
background-image: linear-gradient(top, #76b347, #5e9e2e);
-webkit-box-shadow: inset 0 1px 0 0 #8dbf67;
box-shadow: inset 0 1px 0 0 #8dbf67;
cursor: pointer;
}
button.cupid-green:active {
border: 1px solid #5b992b;
border-bottom: 1px solid #538c27;
-webkit-box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 4px #548c29, 0 1px 0 0 #eeeeee;
}
</style>
</head>
<body>
<div class="warning">
<h3>Internet Explorer está obsoleto</h3>
<div class="texto">Para obtener la mejor experiencia en nuestro sitio web, debe actualizar su navegador a una versión superior de Internet Explorer o bien elegir otro navegador. Debajo encontrará un enlace para actualizarlo.</div>
<button class="cupid-green" onclick="window.open('http://browsehappy.com','_blank')">Actualizar</button>
</div>
</div>
</body>
</html>Otros métodos
Existen otras maneras de realizar la misma acción sin tocar el archivo .htaccess como JReject pero aún no lo he probado.
Últimos comentarios