PREMISA

La propiedad JavaScript style devuelve una colección completa de propiedades CSS que el navegador admite para el elemento especificado, que se puede probar utilizando el siguiente fragmento:

for(var x in document.body.style)
    console.log(x);

Esto es cierto independientemente de que una propiedad particular esté explícitamente establecida para el elemento especificado. Esto se puede probar ejecutando el siguiente fragmento de código en Chrome, por ejemplo; la primera línea devolverá false ya que Chrome aún no admite el unprofixed appearance propiedad mientras que la segunda línea devolverá true.

console.log("appearance" in document.body.style);
console.log("-webkit-appearance" in document.body.style);

body{
    appearance:none;
}

Sin embargo, debe tenerse en cuenta que si una propiedad no soportada se establece en un elemento usando JavaScript, a través de la propiedad style, entonces la comprobación de la presencia de esa propiedad devolverá true:

document.body.style.appearance="none";
console.log("appearance" in document.body.style);

Por lo tanto, usaremos document.createElement() para crear un elemento temporal para que podamos estar seguros de que ninguna de las propiedades que estamos comprobando se ha establecido en de esta manera. (Gracias a Gothdo por esta sugerencia, que eliminó la necesidad de hacer cualquier suposición.)

REQUISITOS

Mirando la lista de navegadores a los que dirigirse:

• Internet Explorer 10 soportó flexbox con el prefijo -ms-.
• Safari 7 & 8 soporta flexbox con el prefijo -webkit-.
• Opera Mini, según caniuse.com , ha soportado flexbox sin prefijo desde la versión 5, sin embargo no puedo dar fe de la exactitud de eso y estoy buscando a alguien que lo confirme.
• UC Browser actualmente (v9.9) soporta flexbox con el prefijo -webkit-.
• Antes de la v4.4, el navegador Android soportaba flexbox con el prefijo -webkit-.

SOLUCIÓN

Podemos ver en esa lista que todos los navegadores a los que se dirige requieren el prefijo de las propiedades de flexbox para que podamos dirigirlos simplemente comprobando la presencia de cualquiera de las propiedades no fijas en la colección style del elemento temporal. El siguiente fragmento devolverá true cuando se ejecute en cualquiera de los navegadores anteriores:

console.log(!("flex" in document.createElement("p").style));

Armado con este conocimiento ahora podemos crear una solución de trabajo para mostrar el mensaje de actualización del navegador a los navegadores necesarios.

if(!("flex" in document.createElement("p").style))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

<div id="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
</div>

NOTAS

Sintaxis antigua

Había una versión de la especificación flexbox actual que usaba una syntax con una de las diferencias siendo que la propiedad order fue nombrada flex-order. A lo mejor de mi conocimiento, el único navegador que alguna vez soportó esa sintaxis fue IE10 que requiere prefijo por lo que debe, por lo tanto, ser objetivo de la solución anterior. Sin embargo, en aras de la integridad, en caso de que haya algún navegador que admita esa sintaxis sin prefijo, puede incluir una comprobación adicional de la presencia de la propiedad flex-order mientras también comprueba que el order la propiedad no está presente en caso de que haya navegadores que soporten ambas versiones de la sintaxis.

var checkstyle=document.createElement("p").style;
if(!("flex" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

<div id="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
</div>

Firefox

Firefox agregó soporte para propiedades de flexbox no fijas en la versión 22, pero no soportó las propiedades flex-flow o flex-wrap hasta la versión 28, por lo que para agregar v22-27 a nuestra segmentación, deberíamos verificar la presencia de una de esas propiedades.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle)))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

<div id="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
</div>

Internet Explorer 11

A pesar de no requerir prefijo, el soporte de IE11 para flexbox sigue siendo extremadamente defectuoso por lo que es posible que desee considerar dirigirlo también. No hay manera de hacerlo usando cualquiera de las propiedades de flexbox, sin embargo IE 7-11 (más o menos) soportó el image-rendering propiedad a través de la propiedad no estándar -ms-interpolation-mode, con soporte más tarde eliminado en Edge/v12+ por lo que en su lugar podemos comprobar para que. Sin embargo, no hay garantía de que esta propiedad no se vuelva a agregar a un versión futura de Edge por lo que debe ser monitoreado.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||"-ms-interpolation-mode" in checkstyle)
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

<div id="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
</div>

Opera Mini

Aunque caniuse.com afirma que el soporte completo para flexbox ha existido en Opera Mini desde la versión 5 y es ampliamente considerado como una fuente autorizada para dicha información, si aún desea dirigirlo, puede hacerlo comprobando la presencia de una de las innumerables propiedades que no admite. Para mantener las cosas concisas, sin embargo, yo sugeriría sustitución de la comprobación -ms-interpolation-mode por una comprobación para transform-style que es no soportado por Opera Mini ni por versiones previas al borde de IE. Al igual que con la comprobación anterior, esta debe ser monitoreada ya que las futuras versiones de Opera Mini que no desee apuntar pueden continuar sin soportar la propiedad transform-style.

var checkstyle=document.createElement("p").style;
if(!("flex-flow" in checkstyle)||("flex-order" in checkstyle&&!("order" in checkstyle))||!("transform-style" in checkstyle))
    document.getElementById("browserupgrade").style.display="block";

#browserupgrade{
    display:none;
    font-family:sans-serif;
}

<div id="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
</div>

ACTUALIZACIONES

13/05/16: Se agregaron comprobaciones adicionales para apuntar a más navegadores después de que se formulara la pregunta actualizar.
16/05/16: Se agregaron explicaciones más detalladas de la solución propuesta basadas en la retroalimentación proporcionada en los comentarios y para hacerla digna de la recompensa que se ofrece. Se eliminaron las comprobaciones para las antiguas especificaciones de flexbox ya que eran redundantes.
17/05/16: Se agregó un elemento temporal para ejecutar las comprobaciones, en lugar de usar document.body, siguiendo la sugerencia de Gothdo, lo que llevó a la eliminación de sugerir el uso de getElementsByTagName() para un navegador más amplio apoyo.
23/05/16: Notas añadidas con comprobaciones sugeridas para Internet Explorer 11 y Opera Mini.

Puede usar modernizr.js for feature detection.

Y luego escriba algo de JavaScript para redirigir a los usuarios a la URL anterior si no se encuentra la función.

Sí, tenemos una solución para esto...

En primer lugar, descargue un Modernizr de compilación personalizada (haga clic aquí {) https://modernizr.com / (para propiedad flexbox) luego incluya la última Jquery a su página, agregue una hoja de estilo y listo!

(Nota: No es necesario descargar una compilación personalizada Modernizr, puede usar toda la compilación completa directamente desde Modernizr CDN pero como solo necesita marcar la propiedad Flexbox; es por eso que te dije que descargaras una compilación personalizada)

Compruebe este violín violín de soporte flexbox

Toda tu página html (con css, jquery ) será así...

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <title>BroswerCheck</title>
    <style type="text/css">
        #browserupgrade{
            display:none;
            text-align:center;
            background:#F1070B;
            color:#FFFFFF;
            font-family:Segoe, "Segoe UI", Verdana, sans-serif;
            font-size:15px;
            padding:10px;}

        #browserupgrade a{
            color:#FFFFFF;
            background:#000000;
            text-decoration:none;
            padding:5px 15px;
            border-radius:25px;}
    </style>
    <script src="modernizr.js"></script>
</head>

<body>
    <div id="browserupgrade">
        <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    </div>

    <script src="jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            if (!Modernizr.flexbox) { $("#browserupgrade").show(); }
        });
    </script>
</body>
</html>

Tus pasos serán,

1. Descargar Modernizr personalizado para detectar la propiedad flexbox

2. crear una página html con class="no-js" añadido en la etiqueta html

3. crear un div para mostrar un mensaje y ocultarlo

4. añadir jquery y Modernizr a su página

5. mostrar un div, cuando un navegador no es compatible con flexbox-property

(para ello, utilice " Modernizr.propiedad flexbox' como se muestra en el script anterior)

O si no quieres usar Jquery entonces usa el siguiente script (gracias a @Shaggy) como,

$(document).ready(function () { 
    if(!Modernizr.flexbox)document.getElementByID("browserupgrade").style.display="‌​block";
});

Está bien, también sugiero usar modernizr (descargar desde https://modernizr.com / ), pero un poco diferente. Lo tomo como un hecho que su preocupación real es solo detectar si el navegador es compatible con flexbox o no, y no si se trata de un navegador en particular o versión del navegador.

Después de instalarlo y cargar su página, modernizr pondrá clases en la etiqueta <body>. En cuanto a flexbox, pondrá la clase .flexbox O la clase .no-flexbox en la etiqueta del cuerpo, como <body class="no-flexbox bgsizecover csscalc"> (y en hecho muchas más clases, a menos que descargue una compilación personalizada modernizr solo para flexbox). Por lo tanto, puede usar un selector combinado simple para una regla CSS que selecciona un bloque DIV en el que escribe su advertencia sobre un navegador desactualizado. Ejemplo:

En el HTML, escribe algo como:

<div class="browserwarning">Your browser is outdated and cannot display this page properly! Please install an up-to-date browser, which you can get from <a href="http://www.example.com">here</a>.</div>

En la hoja de estilos CSS, agregue esto:

.browserwarning {
  display: none;
}
.no-flexbox .browserwarning {
  display: block;
  font-size: 24px;
  color: red;
  background-color: yellow;
}

Esto ocultará este mensaje primero (por la primera regla), y luego (segunda regla) solo lo mostrará en navegadores que no pueden maneje flexbox y por lo tanto tenga la clase .no-flexbox puesta en la etiqueta body por modernizr cuando se carga la página: El selector combinado .no-flexbox .browserwarning funciona independientemente de donde en el cuerpo se coloca la advertencia del navegador - no tiene que ser un hijo directo de body, pero puede estar en cualquier lugar allí.

Esto funciona con seguridad - he utilizado esto en páginas que hice con éxito...

EDITAR:

Hay dos enfoques viables: Modernizr o Consultas de características. Modernizr es la solución estable actual, pero las consultas de características @support, cuando son totalmente compatibles con todos los navegadores, serán la mejor solución CSS pura para la detección de características CSS.

Actualmente necesita agregar algunos prefijos para dirigirse a aquellos navegadores que no admiten consultas de características, es decir. vea la respuesta de LGSon.

Enfoque Modernizr:

Puede crear un flexbox personalizado Modernizr build bastante fácil, como se recomendó anteriormente: Modernizr Custom Flexbox Build. Haga referencia a su archivo javascript modernizr personalizado en su sitio web y luego agregue algunas clases de marcado Html y Css, algo como esto:

NOTA: Abra el fragmento en diferentes navegadores para comprobar el soporte.

PRUEBAS:

No hay soporte flexbox: Internet Explorer 10

Soporte Flexbox: Chrome 50

/*! modernizr 3.3.1 (Custom Build) | MIT *
 * https://modernizr.com/download/?-flexbox-setclasses !*/
! function(e, n, t) {
  function r(e, n) {
    return typeof e === n
  }

  function o() {
    var e, n, t, o, s, i, a;
    for (var l in C)
      if (C.hasOwnProperty(l)) {
        if (e = [], n = C[l], n.name && (e.push(n.name.toLowerCase()), n.options && n.options.aliases && n.options.aliases.length))
          for (t = 0; t < n.options.aliases.length; t++) e.push(n.options.aliases[t].toLowerCase());
        for (o = r(n.fn, "function") ? n.fn() : n.fn, s = 0; s < e.length; s++) i = e[s], a = i.split("."), 1 === a.length ? Modernizr[a[0]] = o : (!Modernizr[a[0]] || Modernizr[a[0]] instanceof Boolean || (Modernizr[a[0]] = new Boolean(Modernizr[a[0]])), Modernizr[a[0]][a[1]] = o), g.push((o ? "" : "no-") + a.join("-"))
      }
  }

  function s(e) {
    var n = x.className,
      t = Modernizr._config.classPrefix || "";
    if (_ && (n = n.baseVal), Modernizr._config.enableJSClass) {
      var r = new RegExp("(^|\\s)" + t + "no-js(\\s|$)");
      n = n.replace(r, "$1" + t + "js$2")
    }
    Modernizr._config.enableClasses && (n += " " + t + e.join(" " + t), _ ? x.className.baseVal = n : x.className = n)
  }

  function i(e, n) {
    return !!~("" + e).indexOf(n)
  }

  function a() {
    return "function" != typeof n.createElement ? n.createElement(arguments[0]) : _ ? n.createElementNS.call(n, "http://www.w3.org/2000/svg", arguments[0]) : n.createElement.apply(n, arguments)
  }

  function l(e) {
    return e.replace(/([a-z])-([a-z])/g, function(e, n, t) {
      return n + t.toUpperCase()
    }).replace(/^-/, "")
  }

  function f(e, n) {
    return function() {
      return e.apply(n, arguments)
    }
  }

  function u(e, n, t) {
    var o;
    for (var s in e)
      if (e[s] in n) return t === !1 ? e[s] : (o = n[e[s]], r(o, "function") ? f(o, t || n) : o);
    return !1
  }

  function d(e) {
    return e.replace(/([A-Z])/g, function(e, n) {
      return "-" + n.toLowerCase()
    }).replace(/^ms-/, "-ms-")
  }

  function p() {
    var e = n.body;
    return e || (e = a(_ ? "svg" : "body"), e.fake = !0), e
  }

  function c(e, t, r, o) {
    var s, i, l, f, u = "modernizr",
      d = a("div"),
      c = p();
    if (parseInt(r, 10))
      for (; r--;) l = a("div"), l.id = o ? o[r] : u + (r + 1), d.appendChild(l);
    return s = a("style"), s.type = "text/css", s.id = "s" + u, (c.fake ? c : d).appendChild(s), c.appendChild(d), s.styleSheet ? s.styleSheet.cssText = e : s.appendChild(n.createTextNode(e)), d.id = u, c.fake && (c.style.background = "", c.style.overflow = "hidden", f = x.style.overflow, x.style.overflow = "hidden", x.appendChild(c)), i = t(d, e), c.fake ? (c.parentNode.removeChild(c), x.style.overflow = f, x.offsetHeight) : d.parentNode.removeChild(d), !!i
  }

  function m(n, r) {
    var o = n.length;
    if ("CSS" in e && "supports" in e.CSS) {
      for (; o--;)
        if (e.CSS.supports(d(n[o]), r)) return !0;
      return !1
    }
    if ("CSSSupportsRule" in e) {
      for (var s = []; o--;) s.push("(" + d(n[o]) + ":" + r + ")");
      return s = s.join(" or "), c("@supports (" + s + ") { #modernizr { position: absolute; } }", function(e) {
        return "absolute" == getComputedStyle(e, null).position
      })
    }
    return t
  }

  function h(e, n, o, s) {
    function f() {
      d && (delete z.style, delete z.modElem)
    }
    if (s = r(s, "undefined") ? !1 : s, !r(o, "undefined")) {
      var u = m(e, o);
      if (!r(u, "undefined")) return u
    }
    for (var d, p, c, h, v, y = ["modernizr", "tspan", "samp"]; !z.style && y.length;) d = !0, z.modElem = a(y.shift()), z.style = z.modElem.style;
    for (c = e.length, p = 0; c > p; p++)
      if (h = e[p], v = z.style[h], i(h, "-") && (h = l(h)), z.style[h] !== t) {
        if (s || r(o, "undefined")) return f(), "pfx" == n ? h : !0;
        try {
          z.style[h] = o
        } catch (g) {}
        if (z.style[h] != v) return f(), "pfx" == n ? h : !0
      }
    return f(), !1
  }

  function v(e, n, t, o, s) {
    var i = e.charAt(0).toUpperCase() + e.slice(1),
      a = (e + " " + b.join(i + " ") + i).split(" ");
    return r(n, "string") || r(n, "undefined") ? h(a, n, o, s) : (a = (e + " " + E.join(i + " ") + i).split(" "), u(a, n, t))
  }

  function y(e, n, r) {
    return v(e, t, t, n, r)
  }
  var g = [],
    C = [],
    w = {
      _version: "3.3.1",
      _config: {
        classPrefix: "",
        enableClasses: !0,
        enableJSClass: !0,
        usePrefixes: !0
      },
      _q: [],
      on: function(e, n) {
        var t = this;
        setTimeout(function() {
          n(t[e])
        }, 0)
      },
      addTest: function(e, n, t) {
        C.push({
          name: e,
          fn: n,
          options: t
        })
      },
      addAsyncTest: function(e) {
        C.push({
          name: null,
          fn: e
        })
      }
    },
    Modernizr = function() {};
  Modernizr.prototype = w, Modernizr = new Modernizr;
  var x = n.documentElement,
    _ = "svg" === x.nodeName.toLowerCase(),
    S = "Moz O ms Webkit",
    b = w._config.usePrefixes ? S.split(" ") : [];
  w._cssomPrefixes = b;
  var E = w._config.usePrefixes ? S.toLowerCase().split(" ") : [];
  w._domPrefixes = E;
  var P = {
    elem: a("modernizr")
  };
  Modernizr._q.push(function() {
    delete P.elem
  });
  var z = {
    style: P.elem.style
  };
  Modernizr._q.unshift(function() {
    delete z.style
  }), w.testAllProps = v, w.testAllProps = y, Modernizr.addTest("flexbox", y("flexBasis", "1px", !0)), o(), s(g), delete w.addTest, delete w.addAsyncTest;
  for (var N = 0; N < Modernizr._q.length; N++) Modernizr._q[N]();
  e.Modernizr = Modernizr
}(window, document);

.support-container {
  display: none;
}
.no-flexbox .support-container {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #CE3426;
  padding: 100px;
}
.support-container__update-browser {
  color: #ffffff;
  font-size: 2em;
}
.support-container__can-i-use {
  font-size: 1.2em;
  font-style: italic;
  color: #dddddd;
}
.support-container__update-browser a,
.support-container__can-i-use a {
  background-color: #ffffff;
  text-decoration: underline;
  padding: 0 3px;
  border-radius: 4px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

<div class="support-container">
  <div id="browserupgrade" class="support-container__update-browser">
    <p>Dear user, you are using an outdated browser. Please
      <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  </div>
  <div class="support-container__can-i-use">
    <p>
      For more browser support info click
      <a href="http://caniuse.com/#feat=flexbox">here</a>
      .
    </p>
  </div>
</div>

EXPLICACIÓN ADICIONAL:

Modernizr comprueba si el navegador soporta su característica personalizada en este caso flexbox. Si el navegador no lo soporta, Modernizr agrega una clase a su etiqueta <html>. Así: <html class="no-flexbox>. Que puede utilizar a su conveniencia en su hoja de estilo.

Además , puede agregar una función para detectar el navegador del usuario y agregarla a su mensaje de actualización del navegador para una mejor experiencia de usuario. Crédito: kennebec

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

En el front-end podría utilizar la biblioteca modernizr y detectar si el navegador soporta las características modernas que está utilizando.

Otra cosa a hacer es redirigir directamente desde el back-end a una página especial. Si está utilizando PHP para el back-end, puede usar la función get_browser para detectar el agente de usuario y luego cargar una página normal o si el navegador es uno de los navegadores no compatibles, abra una página que sugiera a los usuarios actualización.

Http://php.net/manual/en/function.get-browser.php

También puede insertar prefijos en la hoja de estilos. Compruebe si la propiedad de estilo de los navegadores realmente admite las propiedades de estilo ya presentes o insertadas dinámicamente más tarde. Lo compuso principalmente para animaciones, aunque podría modificarse para probar cualquier propiedad de estilo css en el navegador. Si props ya está presente en stylesheet, los prefijos de proveedor se insertan en stylesheet. Si los accesorios se insertan dinámicamente más tarde, también se insertan prefijos de proveedor o se adjuntan a ellos apoyos.

Por ejemplo, agregar prefijos para animation, backface-visibility, border-radius, box-shadow, transform, transform-style, transition; también se establece el prefijo en @keyframes

(function prefix() {
    // var el = $(selector).get(0), i.e.g, $("body").get(0), $("#animated").get(0)
    var prefixes = {"MozAnimation": "-moz-","webkitAnimation": "-webkit-"
                   ,"msAnimation": "-ms-","oAnimation": "-o-"};
    var props = ["animation", "backface-visibility", "border-radius"
                , "box-shadow", "transform", "transform-style", "transition"];
    $.each(prefixes, function(key, val) {
        $("style")
        .attr({"data-prefix": val,"class": String(val).replace(/-/g, "")});
        return !(key in el.style);
    });
    $.each(props, function(index, value) {
        var cssPrefix = $("style").attr("data-prefix");
        if (value in el.style === false) {
            $.fn.pfx = function(prop, pfxprop, q) {
                return $("style").html($("style").text()
                       .replace(new RegExp(prop, "g"), q 
                       + $("style").attr("data-prefix") + pfxprop))
            };
            $("style").pfx("@keyframes", "keyframes", "@")
            .pfx(value, value, "");
        };
    });
}());

Un enfoque más completo.

Puede obtener las cadenas de agente de usuario para cada navegador que le interese y crear una matriz de todas las que desee excluir.

• Lista de Cadenas de Agente de Usuario

Use navigator.userAgent para obtener el agente de usuario del visitante y verificar si está en su matriz no compatible con navegadores utilizando jQuery inArray()

Se podría lanzar una simple alerta de javascript para los visitantes que usen un navegador que coincida.

Aquí hay un ejemplo de cómo obtener información relacionada con el navegador (fuente de ejemplo:w3schools.com )

var txt = "";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";

document.getElementById("demo").innerHTML = txt;

<div id="demo"></div>

UPDATE

Este es un enfoque muy simple, sin API de terceros involucrados. Simplemente use UAparser.js para filtrar los resultados. Todo lo que necesita verificar desde su parte es el nombre y la versión del navegador. Compruebe el ejemplo a continuación

var parser = new UAParser();
 var thisBrowser = parser.getBrowser();
 var thisOS = parser.getOS();
  switch(true) {
    case (thisBrowser.name=="IE" && thisBrowser.version<=10) :
      alert("IE versions older than v11 are not supported");
    break;
    case (thisBrowser.name=="Safari" && (thisBrowser.version>=7 || thisBrowser.version<9)):
      alert("Safari versions 7 and 8 are not supported");
    break;
    case (thisBrowser.name=="Android Webkit Browser" && thisBrowser.version<4.4):
      alert("Default browser of Android OS versions older than v4.4 are not supported.");
    break;
    case (thisBrowser.name=="UC Browser" && thisOS.name=="Android"):
      alert("UC browser versions for Android are not supported.");
    break;
    case (thisBrowser.name=="Opera Mini" && thisBrowser.version<8):
      alert("Default browser of Android OS versions older than v4.4 are not supported.");
    break;
    default:
    alert("Great this is a supported browser");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.10/ua-parser.min.js"></script>

Puede usar UAParser.js . Puede darle el nombre del navegador, la versión, el sistema operativo, etc. Aquí hay un ejemplo.

Incluso hay un plugin jQuery para ello.

var parser = new UAParser();
var browser = parser.getBrowser();

// leave only the major version and minor in order to compare
// eg 12.2.4 > 12.2
var secondDot = browser.version.indexOf(".", browser.version.indexOf(".") + 1);
browser.version = parseFloat(browser.version.substr(0, secondDot));

// debugging
$("#browserName").html(browser.name);
$("#browserVersion").html(browser.version);

if (["IE", "Safari", "Opera Mobi", "UCBrowser", "Android Browser"].indexOf(browser.name) != -1) {
    if (browser.name == "IE" && browser.version <= 10) {
        $("#browserupgrade").show();
    }
    if (browser.name == "Safari" && browser.version <= 10) {
        $("#browserupgrade").show();
    }
    if (browser.name == "UCBrowser") {
        $("#browserupgrade").show();
    }
    if (browser.name == "Android Browser" && browser.version <= 4.4) {
        $("#browserupgrade").show();
    }
}

Véase: https://browser-update.org /

<script> 
var $buoop = {c:2}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script> 

U otro método ligero?

Si está sirviendo su página a través de nginx, hay una directiva muy útil ancient_browser.

Debe establecer una lista de navegadores que no desea admitir:

ancient_browser msie 9.0;

Y luego redirigirlos a la página especial de actualización del navegador:

if ($ancient_browser) {
    rewrite ^ /install-chrome.html;
}

De esta manera no está contaminando sus páginas ya existentes y no necesita cargar CSS adicional para los usuarios que no lo necesitan.

Puede usar las siguientes funciones para obtener el nombre y la versión del navegador:

function get_browser() {
        var ua = navigator.userAgent, tem, M = ua
                .match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)
                || [];
        if (/trident/i.test(M[1])) {
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE ' + (tem[1] || '');
        }
        if (M[1] === 'Chrome') {
            tem = ua.match(/\bOPR\/(\d+)/)
            if (tem != null) {
                return 'Opera ' + tem[1];
            }
        }
        M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion,
                '-?' ];
        if ((tem = ua.match(/version\/(\d+)/i)) != null) {
            M.splice(1, 1, tem[1]);
        }
        return M[0];
    }

    function get_browser_version() {
        var ua = navigator.userAgent, tem, M = ua
                .match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i)
                || [];
        if (/trident/i.test(M[1])) {
            tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE ' + (tem[1] || '');
        }
        if (M[1] === 'Chrome') {
            tem = ua.match(/\bOPR\/(\d+)/)
            if (tem != null) {
                return 'Opera ' + tem[1];
            }
        }
        M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion,
                '-?' ];
        if ((tem = ua.match(/version\/(\d+)/i)) != null) {
            M.splice(1, 1, tem[1]);
        }
        return M[1];
    }

Y puede utilizar el siguiente código para alertar al usuario para actualizar el navegador.

    jQuery(document).ready(function() {
        var browser = get_browser();
        var browser_version = get_browser_version();
        if (browser == "Chrome" && browser_version <= 30) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
        if (browser == "Firefox" && browser_version <= 25) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
        if (browser == "MSIE" && browser_version <= 8) {
            alert("Your browser is below the minimum required version. Please update your browser for this site to function properly");
        }
    });

Esta línea comprobará si hay ie10 y devolverá true si hay ie10 o false de lo contrario .

var ie10 = /MSIE 10/i.test(navigator.userAgent) && /MSIE 10/i.test(navigator.vendor);

Hice mis estudios aquí : https://blogs.msdn.microsoft.com/ie/2011/04/15/the-ie10-user-agent-string/

Caso de uso

Opción 1

 if(ie10){

    //Do something

    }

ACTUALIZACIÓN:

Los navegadores de Microsoft usan @cc_on que le permitirá iniciar comentarios condicionales a través de script .

Opción 2 :

<script>
/*@cc_on

 @if (@_jscript_version == 10){

 document.write("You are using IE10");
}
@*/
</script>

FYI . Solamente EI 10 y abajo no apoyan flexbox css . Prueba aquí : http://caniuse.com/#feat=flexbox

Espero que esto ayude

Prueba esto:

navigator.browser = (function() {
    var ua = navigator.userAgent, tem,
        M  = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem =  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if (M[1]=== 'Chrome') {
        tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
        if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if ((tem = ua.match(/version\/(\d+)/i))!= null)
        M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

Pero estás tratando de reinventar la rueda, con Modernizr puedes hacer:

if (Modernizr.flexbox) {
  // Modern Flexbox supported
}
else {
  // Flexbox syntax not supported
}