Detectar navegadores antiguos y recomienda a los usuarios actualizar a una nueva versión

julio 3, 2014 | Html5 & Css3, Recursos

Ciertas veces hacemos páginas web con tecnologías nuevas que no son soportadas por antiguos navegadores, ciertamente hoy existen varios hack para poder visualizar de una manera apropiada pero no correctamente del todo, es decir nuestro sitio no se aprecia como lo hicimos al 100%, es por eso que hoy les quiero presentar a Outdated Browser es un plugin super cool que nos hace la vida mas fácil, este reconoce si el usuario que accede a tu sitio usa un navegador antiguo que no muestra al 100% la funcionalidad de tu sitio y le sugiere descargarse o actualizar su navegador por una versión mas reciente, que obviamente permitirá ver tu sitio al 100% mejor con todas sus funcionalidades.

El plugin es ligero, y para agregarlo solo hay que agregar unas cuantas lineas de codigo a nuestro archivo, aquí detallo como hacerlo con unos cuantos pasos:

PASO.1:
Descargar los archivos
Nota: los archivos estan en el repositorio del creador llamado Büro el boton de descarga esta en la parte derecha inferior

PASO.2:
Carga el archivo css dentro de tu obviamente.

<link rel="stylesheet" type="text/css" href="css/outdatedBrowser.min.css">

y el archivo JS al final antes que cierre

<script src="js/outdatedBrowser.min.js"></script>

PASO.3:
Ahora incluye este es el html que avisara al usuario si su navegador es viejo y sugerirá que actualice, es la parte visual.

<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdate" href="http://outdatedbrowser.com/">Update my browser now</a></p>
    <p id="btnClose"><a href="#">Close</a></p>
</div>

PASO.4:
llamamos al plugin y lo colocamos al final de nuestro html, antes que cierre el

<script src="js/outdatedBrowser.min.js"></script>
<script>
//event listener: DOM ready
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
//call plugin function after DOM ready
addLoadEvent(
    outdatedBrowser({
        bgColor: '#f25648',
        color: '#ffffff',
        lowerThan: 'transform'
    })
    );
</script>

y listo, todos los pasos son esos, pero si desean tener una demo mucho mas clara de la que encontran en esa descarga y en español, hice una mucha mas sencilla con un ejemplo que pueden descargarlo, la contraseña es: antocas.com y si desean visualizar el diseño por defecto que tiene este plugin aquí dejo la demo, este es sola la parte visual, el archivo en acción esta en la descarga.

Relacionados