Detectar navegadores antiguos y mostrar un aviso

por .

Todos sabemos que uno de los principales inconvenientes de emplear las propiedades nuevas de CSS3 se relaciona con los navegadores más antiguos que no cuentan con soporte para ellas. Para solucionar este inconveniente podemos emplear librerías complementarias para ampliar el abanico de compatibilidades, sin embargo si el navegador es muy antiguo probablemente lo mejor es directamente no brindar soporte, especialmente si la cuota del navegador incompatible es muy reducida.

Para mostrar un aviso a aquellos usuarios que cuentan con un navegador muy antiguo podemos emplear la biblioteca Outdated Browser.

comprobar version del navegador con javascript

Outdated Browser es un proyecto escrito con JavaScript, su instalación es de lo más sencilla, y lo mejor es que podemos definir que propiedades especificas comprobar antes de mostrar el cartel de aviso.

Ejemplo de uso:

Incluimos el script a nuestro proyecto:

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

Agregamos la hoja de estilo.

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

Agregamos el código HTML que debemos personalizar según nuestras necesidades:

<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>

Por ultimo iniciamos el plugin:

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

Este proyecto funciona solo utilizando JavaScript como también de manera conjunta a jQuery, esto ultimo puede ser una ventaja si lo vemos desde el punto de vista de simplificar la inicialización del plugin.

Outdated Browser es un proyecto liberado bajo licencia MIT.

Web: Outdated Browser

Categorizado en: