IE10 + больше не поддерживает теги обнаружения браузера для идентификации браузера.
Для обнаружения IE10 я использую JavaScript, и определены методы тестирования возможностей для обнаружения определенных ms
стилей с префиксом, таких как msTouchAction
иmsWrapFlow
.
Я хочу сделать то же самое для IE11, но предполагаю, что все стили IE10 будут поддерживаться и в IE11. Может ли кто-нибудь помочь мне определить только стили или возможности IE11, которые я мог бы использовать, чтобы отличить их друг от друга?
Дополнительная информация
- Я не хочу использовать определение типа пользовательского агента, потому что он такой пятнистый и может быть изменен, а также я думаю, что читал, что IE11 намеренно пытается скрыть тот факт, что это Internet Explorer.
- В качестве примера того, как работает тестирование возможностей IE10 , я использовал этот JsFiddle (не мой) в качестве основы для своего тестирования.
- Также я ожидаю много ответов «Это плохая идея ...». Одна из моих потребностей в этом заключается в том, что IE10 утверждает, что он что-то поддерживает, но это очень плохо реализовано, и я хочу иметь возможность различать IE10 и IE11 +, чтобы в будущем я мог перейти к методу обнаружения на основе возможностей.
- Этот тест сочетается с тестом Modernizr, который просто делает некоторую функциональность «откатной» к менее эффектному поведению. Мы не говорим о критических функциях.
ТАКЖЕ я уже использую Modernizr, но здесь это не помогает. Мне нужна помощь в решении моего четко заданного вопроса.
Ответы:
В свете развивающейся темы я обновил следующее:
IE 6
или же
IE 7
или же
IE 6 и 7
или же
или же
IE 6, 7 и 8
IE 8
или же
Только в стандартном режиме IE 8
IE 8,9 и 10
Только IE 9
IE 9 и выше
IE 9 и 10
Только IE 10
IE 10 и выше
или же
Использование
-ms-high-contrast
означает, что MS Edge не будет использоваться, поскольку Edge не поддерживает-ms-high-contrast
.IE 11
Альтернативы Javascript
Modernizr
Выбор пользовательского агента
Javascript:
Добавляет (например) следующее к
html
элементу:Разрешить очень ориентированные селекторы CSS, например:
Сноска
Если возможно, выявите и исправьте любые проблемы без взлома. Поддержка прогрессивного улучшения и постепенной деградации . Тем не менее, это сценарий «идеального мира», который не всегда возможен, как таковой - вышеизложенное должно помочь предоставить несколько хороших вариантов.
Атрибуция / Основное чтение
источник
clip: auto\9;
все еще интерпретируется какclip: auto;
в IE 11. Каким-то образом это не игнорируется ...@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .relevant_selectors_for_situation {property:value;} }
я нашел его в mediacurrent.com/blog/…-ms-high-contrast: active
может быть чего-то, чего следует избегать, потому что согласно спецификациям MS вы на самом деле нацелитесь на пользователей высококонтрастных тем в Edge с вашими правилами IE 10/11. На странице, на которую ссылается этот ответ, на-ms-high-contrast
самом деле говорится, что просто-ms-high-contrast: none
значение больше не поддерживается. Думаю, никто об этом не упоминает, потому что у большинства людей не включен режим высокой контрастности, и большинство людей не используют Edge. Но все же есть кто-то , у кого есть такая конфигурация, и это, вероятно, для них не круто.Чтобы настроить таргетинг только на IE10 и IE11 (но не на Edge):
источник
В итоге я нашел собственное решение этой проблемы.
После поиска в документации Microsoft мне удалось найти новый стиль только для IE11.
msTextCombineHorizontal
В своем тесте я проверяю стили IE10 и, если они совпадают, проверяю только стиль IE11. Если найду, то IE11 +, если не найду, то IE10.
Пример кода: обнаружение IE10 и IE11 с помощью тестирования возможностей CSS (JSFiddle)
Показать фрагмент кода
/** Target IE 10 with JavaScript and CSS property detection. # 2013 by Tim Pietrusky # timpietrusky.com **/ // IE 10 only CSS properties var ie10Styles = [ 'msTouchAction', 'msWrapFlow', 'msWrapMargin', 'msWrapThrough', 'msOverflowStyle', 'msScrollChaining', 'msScrollLimit', 'msScrollLimitXMin', 'msScrollLimitYMin', 'msScrollLimitXMax', 'msScrollLimitYMax', 'msScrollRails', 'msScrollSnapPointsX', 'msScrollSnapPointsY', 'msScrollSnapType', 'msScrollSnapX', 'msScrollSnapY', 'msScrollTranslation', 'msFlexbox', 'msFlex', 'msFlexOrder']; var ie11Styles = [ 'msTextCombineHorizontal']; /* * Test all IE only CSS properties */ var d = document; var b = d.body; var s = b.style; var ieVersion = null; var property; // Test IE10 properties for (var i = 0; i < ie10Styles.length; i++) { property = ie10Styles[i]; if (s[property] != undefined) { ieVersion = "ie10"; createEl("IE10 style found: " + property); } } // Test IE11 properties for (var i = 0; i < ie11Styles.length; i++) { property = ie11Styles[i]; if (s[property] != undefined) { ieVersion = "ie11"; createEl("IE11 style found: " + property); } } if (ieVersion) { b.className = ieVersion; $('#versionId').html('Version: ' + ieVersion); } else { createEl('Not IE10 or 11.'); } /* * Just a little helper to create a DOM element */ function createEl(content) { el = d.createElement('div'); el.innerHTML = content; b.appendChild(el); } /* * List of IE CSS stuff: * http://msdn.microsoft.com/en-us/library/ie/hh869403(v=vs.85).aspx */
body { font: 1.25em sans-serif; } div { background: red; color:#fff; padding: 1em; } .ie10 div { background: green; margin-bottom:.5em; } .ie11 div { background: purple; margin-bottom:.5em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h1>Detect IE10 and IE11 by CSS Capability Testing</h1> <h2 id="versionId"></h2>
Я обновлю пример кода, добавив больше стилей, когда обнаружу их.
ПРИМЕЧАНИЕ. Это почти наверняка идентифицирует IE12 и IE13 как «IE11», поскольку эти стили, вероятно, сохранятся. Я буду добавлять дополнительные тесты по мере выхода новых версий и, надеюсь, снова смогу положиться на Modernizr.
Я использую этот тест для отката. Резервное поведение - это просто менее гламурный стиль, он не имеет ограниченной функциональности.
источник
if (document.documentMode === 11) { ... }
? Если, конечно, вы не хотите использовать свойство CSS в@supports
правилах (которые, кстати, еще не поддерживаются в IE).Кажется, это работает:
https://www.limecanvas.com/css-hacks-for-targeting-ie-10-and-above/
источник
Вот ответ на 2017 год, когда вы, вероятно, заботитесь только о том, чтобы отличить <= IE11 от> IE11 ("Edge"):
@supports not (old: ie) { /* code for not old IE here */ }
Более наглядный пример:
body:before { content: 'old ie'; } /**/@supports not (old: ie) { body:before { content: 'not old ie'; } /**/}
Это работает, потому что IE11 на самом деле даже не поддерживает
@supports
, как и все другие соответствующие комбинации браузера / версии .источник
Вы можете написать свой код IE11 как обычно, а затем использовать
@supports
и проверить свойство, которое не поддерживается в IE11, напримерgrid-area: auto
.Затем вы можете написать в нем свои современные стили браузера. IE не поддерживает это
@supports
правило и будет использовать исходные стили, тогда как они будут переопределены в современных браузерах, которые поддерживают@supports
.источник
@supports
, поэтому игнорирует все в@supports
блоке. Таким образом, вы можете поместить что угодно в условное выражение @supports (например@supports (display: block)
), и IE11 все равно пропустит его.Это сработало для меня
А затем в файле css все с префиксом
Когда этот браузер готов умереть?
источник
Попробуй это:
источник
Взгляните на эту статью: CSS: селекторы пользовательских агентов
В основном, когда вы используете этот скрипт:
Теперь вы можете использовать CSS для таргетинга на любой браузер / версию.
Итак, для IE11 мы могли бы сделать это:
FIDDLE
источник
rv:11.0
строку пользовательского агента.Используйте следующие свойства:
источник
Вам следует использовать Modernizr, он добавит класс в тег body.
также:
Обратите внимание, что IE11 все еще находится в предварительной версии, и пользовательский агент может измениться перед выпуском.
Строка User-agent для IE 11 в настоящее время следующая:
Это означает, что вы можете просто протестировать версии 11.xx,
источник
Возможно, Layout Engine v0.7.0 - хорошее решение для вашей ситуации. Он использует обнаружение функций браузера и может обнаруживать не только IE11 и IE10, но также IE9, IE8 и IE7. Он также обнаруживает другие популярные браузеры, включая некоторые мобильные браузеры. Он добавляет класс к тегу html, прост в использовании и хорошо себя показал при довольно глубоком тестировании.
http://mattstow.com/layout-engine.html
источник
Если вы используете Modernizr - тогда вы можете легко отличить IE10 от IE11.
IE10 не поддерживает это
pointer-events
свойство. IE11 делает. ( канюза )Теперь, основываясь на классе, который вставляет Modernizr, у вас может быть следующий CSS:
источник
Вы можете использовать js и добавить класс в html для поддержки стандарта условных комментариев :
Или используйте библиотеку типа Bowser:
https://github.com/ded/bowser
Или modernizr для обнаружения функций:
http://modernizr.com/
источник
Обнаружить IE и его версии на самом деле чрезвычайно просто, по крайней мере, интуитивно понятно:
.
Таким образом, вы также поймаете высокие версии IE в режиме совместимости / просмотре. Далее нужно назначить условные классы:
источник
Вы можете попробовать это:
источник
Я столкнулся с той же проблемой с Gravity Form (WordPress) в IE11. Стиль столбца формы "display: inline-grid" нарушил макет; применение приведенных выше ответов устранило несоответствие!
источник
Шаг назад: почему вы даже пытаетесь обнаружить «Internet Explorer», а не «мой веб-сайт должен делать X, поддерживает ли этот браузер эту функцию? Если да, хороший браузер. Если нет, то я должен предупредить пользователя».
Вам следует зайти на http://modernizr.com/ вместо того, чтобы продолжать то, что вы делаете.
источник