For example, there is a task to weed out browsers from which a user comes in to give a warning that everything will go if the user has logged in from an ancient browser. For example, we have such a screening list: http://caniuse.com/#feat=flexbox .

Is there a supported plugin for bare JS or jQuery to stick a popup like that?

enter image description here

In the screenshot, the plugin http://jreject.turnwheel.com , but, unfortunately, it was last updated in 2014 - there is no support for mobile browsers.

  • five
    For good, you need to check not the browser version, but the features that you need. - Alexey Ten
  • Try looking at this library here: github.com/gabceb/jquery-browser-plugin half a year ago, the project showed itself quite well. can and will help you). - aleksandr revenko

3 answers 3

As correctly commented on - this task is divided into two. The first is to determine that the user's browser is not supported by the site. The second is to display a window that is most compatible with all ancient browsers.

The second task is still perfectly solved by the plugin http://jreject.turnwheel.com . For the first task, as @Alexey Ten wrote, you need to check the availability of critical features.

For example, the decision on the issue (popup with no support for flexbox):

var tst = document.createElement("div"); var flexSupportCaps = [ tst.style.flex, tst.style.flexWrap, tst.style.flexFlow, tst.style.flexGrow, tst.style.alignContent, tst.style.alignItems, tst.style.alignSelf, tst.style.justifyContent, tst.style.order ]; if (flexSupportCaps.indexOf(undefined)!=-1){ $(document).ready(function(){ $.reject({ reject: { all: true }, // Reject all renderers for demo header: 'Браузер не поддерживается', // Header Text paragraph1: 'Вы используете устаревший браузер.', // Paragraph 1 paragraph2: 'Для корректной работы портала vashsite.ru рекомендуем установить один из следущих браузеров, или обновить ваш до последней версии.', closeLink: 'Закрыть окно', closeMessage: 'Я согласен с тем, что отображение сайта может быть некорректно.', imagePath: '/externals/jReject-master/images/', closeCookie: true, browserInfo: { msie: { text: 'Microsoft Edge', url: 'https://www.microsoft.com/ru-ru/windows/microsoft-edge' } } }); }); } delete tst;

Flexbox support is detected, if it is not there, the pop-up jReject plug-in is spat out. It spits out once, as the closeCookie: true parameter closeCookie: true .

    1. Bowser

    If i need

    1. Write a warning for some outdated browsers that the content of the site page may not display correctly;

    or

    1. To display in one browser one text, in the second another - a real example ;

    I use the bowser library.

    2. Bowser features

    1. The ability to filter by the type of browser - mobile or desktop - operating systems, engines and names.
    2. Not the most popular software support: for example, Sailfish OS, Tizen, K-Meleon or Sleipnir.
    3. Ease of use. We connect bowser with no additional dependencies via the src attribute of the script tag and write scripts. Script syntax:
     if (bowser.$флаг для браузера, движка, ОС или типа устройства) { // Здесь пишем поведение, которое будет только у пользователей браузеров, объявленных флагом. } 
     if (bowser.$флаг для браузера, движка, ОС или типа устройства && bowser.version <= $Номер версии: поведение, описанное ниже между {фигурными скобками}, будет применяться к версии под данным номером и версиям, которые ниже её. ) { // Здесь пишем поведение, которое будет только у пользователей браузеров, объявленных флагом, в версиях, ниже или равной указанной. }

    3. Demonstration

    In this example

    • in all versions of browsers on the Trident engine, such as Internet Explorer, one text will be displayed;
    • in browsers on the Gecko engine, starting with version 50, is different;
    • users of Gecko browsers below version 50 will be shown a modal window with a suggestion to use a newer version;
    • users of other browsers will see an empty result.

     <meta charset=utf-8> <meta name=viewport content="width=device-width, initial-scale=1"> <script src="http://fenixrepo.fao.org/cdn/faostat3/js/bowser/1.0/bowser.min.js"></script> <style type="text/css"> #SashaBowserExplorer, #SashaBowserFirefox { color: mediumvioletred; font-size: 2rem; } </style> <div id="SashaBowserFirefox"></div> <div id="SashaBowserExplorer"></div> <script type="text/javascript"> // Отображение в браузерах на движке Trident <= 11 MSHTML.dll версии if (bowser.msie) { var SashaBowserExplorer = document.getElementById("SashaBowserExplorer"); SashaBowserExplorer.innerHTML = "Саша умнейшая, Она не станет пользоваться Internet Explorer."; // Отображение в браузерах на движке Gecko <= 49 } // Отображение в браузерах на движке Gecko <= 49 else if (bowser.gecko && bowser.version <= 49) { alert('Пожалуйста, используйте новые версии браузеров на движке Gecko, чтобы прочесть, насколько же Саша совершенна.'); } // Отображение в браузерах на движке Gecko > 49 else if (bowser.gecko) { var SashaBowserFirefox = document.getElementById("SashaBowserFirefox"); SashaBowserFirefox.innerHTML = "Саша легендарная!"; } </script>

    How does the result of the execution of this code in browsers look like:

    Internet Explorer 11.576.14393.0

    IE

    Firefox 31.0

    Old firefox

    Firefox 50.1.0

    New firefox

    4. Additional link

      Instead of filtering out browsers, it is better to determine the support of a particular feature, for example, using modernizr .

      Otherwise, you will have to keep your browser database up to date. For example, browser X does not support the opportunity you need, you add it to the "black list", a fresh version with the required feature comes out in six months, and if you do not update the conditions now, it will still be considered "not suitable" for your site. Another situation - another Yandex browser will be released, about which your site does not know anything.

      For the flexbox mentioned by you, checking through modernizir can look like this (with an additional condition - flexwrap support):

       if (Modernizr.flexbox && Modernizr.flexwrap) { // Modern Flexbox with `flex-wrap` supported } else { // Either old Flexbox syntax, or `flex-wrap` not supported }