Minitip: Detectar el navegador (javascript)

Ya sea porque quieras/necesites cargar una hoja de estilos diferente según el navegador, ya sea porque para ciertos navegadores hay cosas que no funcionan de una forma y necesitas hacerlas de otra (sobre todo si tu aplicación va a funcionar en Internet Explorer), saber en qué navegador estás puede resultar útil.

En nuestra app solo detectamos si se está en IE o no (adivinad por qué), y lo hacíamos buscando la cadena “msie” en el texto devuelto por el objeto “navigator.userAgent” (le concatenábamos un “toLowerCase()” para no tener problemas con las mayúsculas).

En nuestro IE, que es el 9, todo va bien. También forzamos el modo de compatibilidad para que se adapte a IE9, o sea que “nosotros” vamos a encontrar siempre la cadena “msie” en ese objeto. Pero no todo el mundo lo va a hacer. En concreto si tienes una aplicación que no fuerce el modo de compatibilidad, o si el usuario está usando Internet Explorer 11 (o el Edge, ya que estamos).

He estado rebuscando un poco en internet, y cómo no, he encontrado lo que buscaba en StackOverflow.

Aquí tenéis el código javascript para detectar si la aplicación se está ejecutando en cierto navegador:

  // Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
    // Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
    // Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
    // Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

Simple y útil 😀

Como siempre, espero que esta entrada pueda ser de utilidad para alguien. Y si no, pues también como siempre, aquí tenéis un gato para compensar: