Cómo detectar navegadores obsoletos con una línea de código

Señal de peligro conteniendo el logo de Internet Explorer

Lo has hecho. Has cortado relaciones con Internet Explorer 8. Ya no lo soportas. Fue bonito mientras duró, pero la vida sigue.

El caso es que la última vez que lo miré, IE8 tenía una cuota de mercado que rondaba el 0,5%. Dicho de otro modo, una de cada doscientas visitas a tu web podría ser, quizá, de algún usuario de IE8.

¿Cómo hacemos para avisar a esos pobres incautos de que se la están jugando con un navegador peligrosamente obsoleto?

Comentarios condicionales al rescate

Los comentarios condicionales son una sintaxis especial de comentarios HTML, que solo nuestro amigo Internet Explorer reconoce, y que hacen que el navegador incluya o ignore un fragmento de HTML, dependiendo de si se cumple o no una condición. Así:

<!--[if lt IE 9]>
  <div class="alert">Mucho ojo, estás usando una versión de IE inferior a la 9.</div>
<![endif]-->

Los comentarios condicionales solo funcionan en IE9, o anteriores. Esto quiere decir que [ if IE ] es equivalente a [ if lte IE 9 ]:

<!--[if IE ]>
  <div class="alert">Estás usando un IE9 o inferior.</div>
<![endif]-->

Si necesitamos detectar también IE10, pero no IE11, una posible solución es usar otra sintaxis exclusiva de Explorer (disponible a partir de IE4), llamada compilación condicional:

<script>
/*@cc_on
  @if (@_jscript_version <= 10)
    document.write("<div class=\"alert\">Estás usando un Explorer 4-10, actualizate al IE11, o cambia de navegador!!!</div>");
  @end 
@*/
</script>

¿Y qué hay del resto de navegadores?

Internet Explorer es el navegador obsoleto por antonomasia. Solamente IE11 (que data del 2015) sigue recibiendo actualizaciones de seguridad a día de hoy. El resto (IE10 y anteriores) es carne de cañón para piratas y códigos maliciosos.

Captura de Internet Explorer 8 en la web support.microsoft.com: la página dice «Tu explorador no es compatible»
¡La propia web de Microsoft no es compatible con IE8!

Los demás (Chrome, Firefox, Opera, Edge y Safari) son lo que se llama “navegadores perennes” (evergreen browsers, en el idioma de Trump), lo que significa que se actualizan a sí mismos, sin requerir intervención humana, ni actualizaciones del sistema operativo. Aquí, la práctica más común es programar para las dos últimas versiones y simplemente ignorar las anteriores.

Incluso en aquellos casos en que un navegador perenne deje de ser compatible con un sistema operativo antiguo (y, por tanto, no se pueda seguir autoactualizando) lo normal es que él mismo tenga la decencia de mostrar la correspondiente alerta. Esto lo he visto, por ejemplo, en Chrome sobre Window Vista y en Firefox sobre Android ICS.

Captura de Chrome en Windows Vista mostrando un aviso de fin de compatibilidad
Chrome alertando de que ya no es compatible con Vista ni XP (muy oportuna, la pintura rupestre del logo).

Así que… Sí, tiene sentido mostrar el aviso solo para Internet Explorer, ya que con esto se cubre la gran mayoría de los casos.

Pero, ¿y si realmente necesitas mostrar el aviso para otros navegadores? Te propongo el siguiente truco.

HTMLElement.style al rescate

Vía javascript, se puede consultar si el objeto HTMLElement.style contiene una determinada propiedad CSS. Podemos escoger estratégicamente dicha propiedad, para así dejar fuera a toda una gama de navegadores obsoletos.

La siguiente función recibe como argumento opcional un Array de nombres de propiedades. Si el navegador no admite ninguna de ellas, la función devolverá true.

Ejemplo de uso:

function avisoNavegadorObsoleto() {
  if (obsoleto()) {
    var aviso = document.createElement('div');
    aviso.innerHTML = 'Estás usando un navegador obsoleto.'
    aviso.className = 'aviso';
    document.body.insertBefore(aviso, document.body.firstChild);
  }
}

Aviso a los navegantes

Si avisas al usuario de que has detectado un navegador obsoleto, le estás haciendo no uno, sino dos favores:

  • Le estás aclarando por qué tu web, probablemente, no funciona bien en su navegador, o puede dar fallos.
  • Le estás previniendo del peligro que supone usar un navegador desactualizado.

¿Conoces alguna otra manera de mostrar este tipo de alertas? ¿Alguna alternativa? Házmelo saber. Soy todo orejas ?.

2 comentarios en “Cómo detectar navegadores obsoletos con una línea de código”

  1. Hola. La capa de personalización de mi sitio web no carga correctamente en Microsoft Edge, pero si en el resto de navegadores, incluso en Internet Explorer.
    Tengo los archivos .CSS alojados en OneDrive.
    ¿Hay alguna forma de mostrar esta alerta pero en el navegador Edge?

    1. Hola, Nicolás. Pues creo que la mejor forma de aislar Edge en este caso sería vía CSS, tal que así:


      .aviso-edge {
      color: red;
      display: none;
      }
      @supports (-ms-ime-align:auto) {
      .aviso-edge {
      display: block;
      }
      }

      Dicho esto, Edge no se considera un navegador obsoleto y esto del aviso debería ser como último recurso. La buena noticia es que pronto Edge estará basado en Chromium y no será necesario nada de esto (en este caso, además, el aviso dejaría de mostrarse).

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.