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

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.

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.

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