Вместо использования префиксов я хочу попросить посетителей сайта обновить браузер

Я перестраиваю сайт, используя CSS flexbox.

При проверке совместимости браузера, я вижу, что flexbox поддерживается всеми современными браузерами, за исключением того, что Safari 8 и IE 10 требуют поставщика префиксы.

При проверке Google Analytics я вижу, что 96% посетителей сайта за последние 6 месяцев используют браузеры, которые полностью поддерживают flexbox. Остальные 4% используют браузеры, которые требуют префиксов или не поддерживают.

Поскольку мы говорим о 4% пользователей, и число будет уменьшаться (и мне нравится, когда мой код как можно более чистый и простой), я рассматриваю возможность использования префиксов и вместо этого запрашиваю пользователей для обновления браузеров.

Как настроить таргетинг на старые браузеры, чтобы отображать сообщение пользователям, предлагающим обновить их браузер?

Вот что я до сих пор:

<!--[if IE]>
    <div class="browserupgrade">
        <p>You are using an outdated browser. Please <a href="#" onclick="location.href='http://browsehappy.com/'; return false;">
           upgrade your browser</a> to improve your experience.</p>
    </div>
<![endif]-->

Этот условный комментарий IE охватывает меня для версий IE 6, 7, 8 и 9.

Эти посетители получат предупреждение со ссылкой для загрузки текущего браузера. Однако Microsoft прекратила поддержку условных комментариев, начиная с IE10.

Теперь мне нужно что-то подобное для:

IE 10
Safari 7-8
Opera Mini < 8
UC Browser для Android
Android Browser < 4.4

Есть ли простой JS/jQuery script для работы с этим заданием? Или другой легкий метод?

Решение

Спасибо за все ответы. Ясно, что есть много способов решить эту проблему (Modernizr, PHP, jQuery-функции, простой Javascript, CSS, browser-update.org и т.д.). Многие из этих методов будут выполнять эту работу полностью и эффективно.

Я пошел с самым простым: CSS (кредит @LGSon).

Этот CSS охватывает практически все целевые браузеры, за исключением IE <= 7.

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { .browserupgrade { display: none; }}

Подробнее см. ответ.

И для тех относительно немногих посетителей, которые используют IE <= 7, условный комментарий в HTML:

<!--[if lte IE 7]>
    <div style=" ... inline styles here ...">
        browser upgrade message here
    </div>
<![endif]-->

Ответы

Ответ 1

Пересмотренный ответ после редактирования вопроса

Вот только способ CSS для этого.

Поскольку CSS @supports не будет работать на ваших целевых (нежелательных) браузерах: Safari 7-8, IE <= 10, Android Browser < 4.4, UC Browser для Android и Opera Mini < 8, ваше сообщение "browserupgrade" будет видимым для тех, кто использует это правило.

@supports (display: flex) { .browserupgrade { display: none; }}

Существует несколько браузеров, которые по-прежнему поддерживают не префикс flex, но не поддерживают @supports, IE 11 ⁽¹⁾ и Opera Mini 8, но, к счастью, мы можем обратиться их с несколькими правилами CSS.

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

Вот полный код для показа обновления для ваших целевых браузеров.

CSS

.browserupgrade { display: block; }

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

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

(1): Правило IE 11 CSS должно работать и на IE Mobile 11, хотя не проверять его.

CSS @supports также доступен как API, CSS.supports(). Вот очень хорошо написанная статья Дэвида Уолша

Ответ 2

ПОМЕЩЕНИЕ

Свойство JavaScript style возвращает полный набор свойств CSS, поддерживаемых браузером для указанного элемента, который может быть протестирован с использованием следующего фрагмента:

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

Ответ 3

Вы можете использовать modernizr.js для обнаружения .

И затем напишите JavaScript, чтобы перенаправить пользователей на указанный выше URL, если функция не найдена.

Ответ 4

Да, у нас есть решение для этого...

сначала загрузите пользовательскую сборку Modernizr из (нажмите здесь -) https://modernizr.com/ (для свойства flexbox), затем добавьте последнюю страницу Jquery на свою страницу, добавьте таблицу стилей, и все будет готово!

(Примечание: нет необходимости загружать пользовательскую сборку Modernizr, вы можете использовать целую полную сборку непосредственно из Modernizr CDN, но по мере необходимости для проверки свойства Flexbox, поэтому я сказал вам загрузить пользовательскую сборку)

Проверьте этот скрипт flexbox скрипт поддержки

Вся ваша html-страница (с помощью css, jquery) будет выглядеть следующим образом:

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

Ваши шаги будут,

1. Загрузите пользовательский Modernizr для обнаружения свойства Flexbox

2. создайте html-страницу с class= "no-js", добавленным в тег html

3. создать div для отображения сообщения и скрыть его

4. добавьте jquery и Modernizr на свою страницу

5. показать div, когда браузер не поддерживает flexbox -property

(для этой цели используйте свойство "Modernizr.flexbox", как показано выше script)

или если вы не хотите использовать JQuery, используйте следующий script (спасибо @Shaggy) как,

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

Ответ 5

EDIT:

Существуют два жизнеспособных подхода: Modernizr или Feature Queries. Modernizr - это текущее стабильное решение, но функциональные запросы @support, полностью поддерживаемые всеми браузерами, будут лучшим чистым решением для CSS для обнаружения функции css.

В настоящее время вам нужно добавить некоторые префиксы для таргетинга на те браузеры, которые не поддерживают запросы функций, т.е. см. ответ LGSon.

Современный подход:

Вы можете создать flexbox пользовательскую конструкцию Modernizr довольно просто, как было рекомендовано ранее: Modernizr Custom flexbox Build. Ссылка на свой собственный javascript файл modernizr на вашем сайте, а затем добавьте некоторые классы разметки HTML и Css, что-то вроде этого:

ПРИМЕЧАНИЕ.. Откройте фрагмент в разных браузерах, чтобы проверить поддержку.

ИСПЫТАНИЯ:

Нет flexbox поддержка: Internet Explorer 10

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>

Ответ 6

Хорошо, также предлагаю использовать modernizr (скачать с https://modernizr.com/), но немного по-другому. Я считаю, что ваша фактическая проблема заключается только в том, чтобы определить, поддерживает ли браузер flexbox или нет, а не если это конкретный браузер или версия браузера.

После установки и загрузки вашей страницы, modernizr поместит классы в тег <body>. Что касается flexbox, он поместит в тег body как класс .flexbox ИЛИ класс .no-flexbox, например <body class="no-flexbox bgsizecover csscalc"> (и на самом деле много других классов, если вы не загрузите пользовательскую сборку modernizr только для flexbox). Таким образом, вы можете использовать простой комбинированный селектор для правила CSS, который выбирает блок DIV, в который вы пишете предупреждение о устаревшем браузере. Пример:

В HTML напишите что-нибудь вроде:

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

В таблице стилей CSS добавьте следующее:

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

Это сначала скроет это сообщение (по первому правилу), а затем (второе правило) отобразит его только в браузерах, которые не могут обрабатывать flexbox, и поэтому класс .no-flexbox помещается в тег body modernizr при загрузке страницы: комбинированный селектор .no-flexbox .browserwarning работает независимо от того, где в теле размещено предупреждение браузера - он не должен быть прямым дочерним элементом body, но может быть где угодно.

Это работает точно - я использовал это на страницах, которые я успешно выполнил...

Ответ 7

На передней панели вы можете использовать библиотеку modernizr и определить, поддерживает ли браузер современные функции, которые вы используете.

Еще одна вещь, которую нужно сделать, - это перенаправить непосредственно из задней части на специальную страницу. Если вы используете PHP для задней части, вы можете использовать функцию get_browser для обнаружения пользовательского агента, а затем загрузить обычную страницу или если браузер является одним из неподдерживаемых браузеров, откройте страницу, предлагающую пользователям обновиться.

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

Ответ 8

Более тщательный подход.

Вы можете получить строки пользовательского агента для каждого интересующего вас браузера и создать массив из всех тех, которые вы хотите исключить.

Список строк агента пользователя

Используйте navigator.userAgent для получения пользовательского агента посетителя и проверьте, находится ли он в массиве не поддерживаемых браузеров, используя jQuery inArray()

Простой оповещение javascript может быть брошен для посетителей, используя браузер, который является совпадением.

Вот пример получения информации, связанной с браузером (пример source: 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>

Ответ 9

Вы также можете вставить префиксы в таблицу стилей. Проверьте, действительно ли свойство стиля браузеров поддерживает свойства стиля, которые уже присутствуют, или динамически вставляются позже. Составил его в первую очередь для анимации, хотя его можно было модифицировать, чтобы протестировать любое свойство стиля css в браузере. Если props уже присутствует в stylesheet, префиксы поставщика вставляются в stylesheet. Если реквизит позже динамически вставлен, префиксы поставщиков также вставлены или прикреплены к этим реквизитам.

Например, добавление префиксов для animation, backface-visibility, border-radius, box-shadow, transform, transform-style, transition; также установив префикс в @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, "");
        };
    });
}());

github https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js

Ответ 10

Вы можете использовать UAParser.js. Он может дать вам имя браузера, версию, os и т.д. Здесь пример.

Для него есть плагин jQuery.

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();
    }
}

Ответ 11

Эта одна строка проверит значение ie10 и вернет true, если ie10 или false в противном случае.

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

Мои исследования здесь: https://blogs.msdn.microsoft.com/ie/2011/04/15/the-ie10-user-agent-string/

случай использования

Вариант 1

 if(ie10){

    //Do something

    }

ОБНОВЛЕНИЕ:

В браузерах Microsoft используется @cc_on, что позволит вам инициировать условные комментарии через script.

Вариант 2:

<script>
/*@cc_on

 @if (@_jscript_version == 10){

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

FYI. Только EI 10 и ниже не поддерживают flexbox css. Доказательство здесь: http://caniuse.com/#feat=flexbox

Надеюсь, что это поможет

Ответ 12

Смотрите: 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>

Ответ 13

Или другой легкий метод?

Если вы обслуживаете свою страницу через nginx, существует очень полезная директива ancient_browser.

Вам нужно установить список браузеров, которые вы не хотите поддерживать:

ancient_browser msie 9.0;

а затем перенаправить их на специальную страницу обновления браузера:

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

Таким образом, вы не загрязняете уже существующие страницы и не нуждаетесь в загрузке дополнительных css для пользователей, которым это не нужно.

Ответ 14

Вы можете использовать следующие функции для получения имени и версии браузера:

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];
    }

, и вы можете использовать следующий код, чтобы предупредить пользователя об обновлении браузера.

    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");
        }
    });

Ответ 15

Попробуйте следующее:

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(' ');
})();

Но вы пытаетесь изобрести колесо, с помощью Modernizr вы можете сделать:

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