Правильный способ использования Modernizr для обнаружения IE?

Это может быть глупый вопрос, но я хотел использовать библиотеку Modernizr JS для обнаружения некоторых свойств браузера, чтобы определить, какой контент показывать или не показывать.

У меня есть приложение под названием Pano2VR, которое выводит как HTML5, так и SWF. Мне нужен HTML5 для пользователей устройств iOS.

Однако IE не выводит этот вывод "HTML5" вообще. Кажется, их вывод использует 3D3-преобразования CSS3 и WebGL, один или несколько явно не поддерживаемых в IE9.

Итак, для этих пользователей мне нужно отобразить версию Flash. Я планировал использовать IFRAME и либо пропускал SRC через Modernizr script, либо document.write из кода IFRAME, в зависимости от браузера.

Все это приводит к тому, как я могу использовать Modernizr для обнаружения IE или IE? Или определить для 3D-преобразования CSS?

Или есть ли другой способ сделать это?

Ответ 1

Modernizr не обнаруживает браузеры как таковые, он обнаруживает, какая функция и возможности присутствуют, и это весь смысл того, что он пытается сделать.

Вы можете попробовать подключиться к простому обнаружению script, как это, а затем использовать его, чтобы сделать свой выбор. Я включил версию Detection, а также в случае необходимости. Если вы хотите только проверить версию IE, вы можете просто найти навигатор .userAgent со значением "MSIE".

var BrowserDetect = {
        init: function () {
            this.browser = this.searchString(this.dataBrowser) || "Other";
            this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
        },
        searchString: function (data) {
            for (var i = 0; i < data.length; i++) {
                var dataString = data[i].string;
                this.versionSearchString = data[i].subString;

                if (dataString.indexOf(data[i].subString) !== -1) {
                    return data[i].identity;
                }
            }
        },
        searchVersion: function (dataString) {
            var index = dataString.indexOf(this.versionSearchString);
            if (index === -1) {
                return;
            }

            var rv = dataString.indexOf("rv:");
            if (this.versionSearchString === "Trident" && rv !== -1) {
                return parseFloat(dataString.substring(rv + 3));
            } else {
                return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
            }
        },

        dataBrowser: [
            {string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
            {string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
            {string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
            {string: navigator.userAgent, subString: "Opera", identity: "Opera"},  
            {string: navigator.userAgent, subString: "OPR", identity: "Opera"},  

            {string: navigator.userAgent, subString: "Chrome", identity: "Chrome"}, 
            {string: navigator.userAgent, subString: "Safari", identity: "Safari"}       
        ]
    };
    
    BrowserDetect.init();
    document.write("You are using <b>" + BrowserDetect.browser + "</b> with version <b>" + BrowserDetect.version + "</b>");

Ответ 2

Вы можете использовать Modernizr для обнаружения просто IE или не IE, путем проверки поддержки SVG SMIL.

Если вы включили обнаружение функции SMIL в настройке Modernizr, вы можете использовать простой подход CSS и настроить класс .no-smil, который применяется в Modernizr элемент html:

html.no-smil {
  /* IE/Edge specific styles go here - hide HTML5 content and show Flash content */
}

В качестве альтернативы вы можете использовать Modernizr с помощью простого JavaScript-подхода, например:

if ( Modernizr.smil ) {
  /* set HTML5 content */
} else {
  /* set IE/Edge/Flash content */
}

Помните, что IE/Edge может когда-нибудь поддерживать SMIL, но в настоящее время нет планов сделать это.

Для справки, здесь ссылка на таблицу совместимости SMIL на caniuse.com.

Ответ 3

Обнаружение 3D-преобразований CSS

Modernizr может обнаруживать 3D-преобразования CSS, да. Правка Modernizr.csstransforms3d сообщит вам, поддерживает ли браузер их.

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

Обнаружение IE специально

В качестве альтернативы, как и user356990, вы можете использовать условные комментарии, если вы ищете только IE и IE. Вместо создания глобальной переменной вы можете использовать HTML5 Boilerplate <html> условный комментарий для назначения класса:

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

Если вы уже инициализировали jQuery, вы можете просто проверить с помощью $('html').hasClass('lt-ie9'). Если вам нужно проверить версию IE, в которой вы находитесь, вы можете условно загрузить jQuery 1.x или 2.x, вы можете сделать что-то вроде этого:

myChecks.ltIE9 = (function(){
    var htmlElemClasses = document.querySelector('html').className.split(' ');
    if (!htmlElemClasses){return false;}
    for (var i = 0; i < htmlElemClasses.length; i += 1 ){
      var klass = htmlElemClasses[i];
      if (klass === 'lt-ie9'){
        return true;
      }
    }
    return false;
}());

N.B. IE условные комментарии поддерживаются только до IE9 включительно. Начиная с IE10, Microsoft поощряет использование обнаружения функций, а не обнаружения браузера.

Какой бы метод вы ни выбрали, вы затем проверите с помощью

if ( myChecks.ltIE9 || Modernizr.csstransforms3d ){
    // iframe or flash fallback
}

Не принимайте это || буквально, конечно.

Ответ 4

Если вы ищете версию JS (используя комбинацию обнаружения функций и нюхания UA) того, что использовали html5:

var IE = (!! window.ActiveXObject && +(/msie\s(\d+)/i.exec(navigator.userAgent)[1])) || NaN;
if (IE < 9) {
    document.documentElement.className += ' lt-ie9' + ' ie' + IE;
}

Ответ 5

CSS-трюки имеют хорошее решение для IE 11:

http://css-tricks.com/ie-10-specific-styles/

.NET и Trident/7.0 уникальны для IE, поэтому их можно использовать для обнаружения IE версии 11.

Затем код добавляет строку User Agent в тег html с атрибутом 'data-useragent', поэтому IE 11 может быть специально настроен...

Ответ 6

Вы можете использовать < !-- [if IE] > взломать глобальную переменную js, которая затем тестируется в вашем обычном js-коде. Немного уродливый, но сработал хорошо для меня.

Ответ 7

Мне нужно было обнаружить IE против большинства остальных, и я не хотел зависеть от строки UA. Я обнаружил, что использование es6number с Modernizr сделало именно то, что я хотел. Я не очень беспокоюсь об этом изменении, так как я не ожидаю, что IE когда-либо будет поддерживать ES6 Number. Итак, теперь я знаю разницу между любой версией IE vs Edge/Chrome/Firefox/Opera/Safari.

Подробнее здесь: http://caniuse.com/#feat=es6-number

Обратите внимание, что меня не очень беспокоят ложные негативы Opera Mini. Вы можете быть.

Ответ 8

Что ж, после дальнейших исследований по этой теме я использовал следующее решение для таргетинга IE 10+. Поскольку IE10 и 11 являются единственными браузерами, которые поддерживают высококонтрастный медиа-запрос -ms, это хороший вариант без JS:

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
}

Работает отлично.