Clicky

Aviso a los visitantes de tu página web para que actualicen el navegador

Outdated Browser

Outdated Browser, detecta navegadores obsoletos y recomienda a los usuarios actualizar a una nueva versión

Outdated Browser es una herramienta de ahorro de tiempo para los desarrolladores. Detecta navegadores obsoletos y recomienda a los usuarios actualizar a una nueva versión.

Así pues, si estás cansado de que la gente que visita tu moderno sitio web con un navegador obsoleto y no hace nada al respecto. Tal vez no sean usuarios "expertos", tal vez sea tu tía con un navegador del siglo pasado tratando de ver las impresionantes animaciones CSS3 y transforms. Deja que el usuario sepa que es un navegador obsoleto y asesórale a uno mejor.

Con esta solución se puede comprobar si el navegador del usuario puede manejar tu sitio web. Si no es así, se mostrará un aviso que aconseje al usuario que actualice el navegador. Será él/ella quien decida si actualiza o no. No fuerces al usuario!

Eso es todo! Así de simple se puede conseguir.

Cómo utilizarlo

1. Incluye el script del plugin:

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

2. Incluye el CSS localizado en el <head> html:

<style type="text/css" src="/outdatedBrowser.min.css"></style>

3. Pega el HTML necesario:

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

Close

4. Llama al plugin

 //PLAIN JAVASCRIPT
    //event listener form 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: '#3f3f3f',
            color: '#e3e3e3',
            lowerThan: 'IE10'
        })
    );

  //USING jQuery
    $( document ).ready(function() {
        outdatedBrowser({
            bgColor: '#3f3f3f',
            color: '#e3e3e3',
            lowerThan: 'IE10'
        })
    })

5. Orientación de navegadores:

Puedes hacerlo de dos maneras: utilizando el navegador Internet Explorer como referencia o especificando una propiedad CSS. El resultado es el mismo, elige lo que sea más fácil para ti.

Inferior a:

        "IE11","borderImage"
        "IE10", "transform" (Default property)
        "IE9", "boxShadow"
        "IE8", "borderSpacing"

Y ya está!

Puedes descargar los archivos necesarios desde la página de GitHub de Outdated Browser v1.0

Yo lo he incluido en un módulo en la parte superior del sidebar derecho de este sitio. Aquí puedes ver una página de demo en este sitio.

Ejemplo de código completo:

Outdated Browser Plugin v1.0

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

Close

Jesus_Caceres