Определение браузера IE8 и выше в JavaScript перед функцией
Быстрый ответ
Заметить использование Internet Explorer становится простым с реализацией небольшой функции:
function isIE() {
return /MSIE|Trident/.test(window.navigator.userAgent);
}
// Пример применения:
if (isIE()) {
console.log('Вы используете Internet Explorer.'); // Вероятно, давно пора забыть об этом браузере!
}
Данная функция обнаруживает IE, проверяя наличие специфических для него идентификаторов в свойстве navigator.userAgent
.
Точное обнаружение IE
Распознавание IE может быть достаточно сложной задачей из-за различных совместимых режимов и особенностей строки агента пользователей. Для уточнения результатов можно использовать свойство document.documentMode
, которое присутствует только в IE:
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
if (msie > 0 || trident > 0) {
// IE никуда не девается, так что будем с этим справляться!
return true;
}
return false; // IE не обнаружен, слава технологиям!
}
Адаптация веб-контента для IE
Прекрасно, вы уже заботитесь о пользователях IE. Давайте дальше улучшим их переживания, настроив функциональность и дизайн сайта так, чтобы для которого был задан специальный класс 'ie':
if (detectIE()) {
document.documentElement.classList.add('ie'); // Приглашем пользователей IE на праздник!
}
При применении SCSS или стандартного CSS:
.ie {
// Стили конкретно для пользователей IE.
}
Для повышения функциональности используем условные операторы, пишем скрипты особенно для IE:
if (detectIE()) {
// Функции, специфичные только для IE, будут здесь.
}
Полезный совет от профессионала: у IE отсутствует поддержка @supports
, поэтому сохраните аварийные стили:
@supports (display: grid) {
/* Распишитесь под современной веб-технологией здесь! */
} else {
/* DNS: Запасные стили для пользователей IE. */
}
Как сделать больше, чем просто определить IE
Определение браузера через navigator.userAgent
— это лишь начало. Для глубокого анализа возможностей браузера подумайте об использовании библиотек по определению возможностей, таких как Modernizr, помогающие в создании кроссбраузерных приложений.
Кстати, Edge недавно перешел на движок Chromium. Следите за новейшими обновлениями на странице поддержки Microsoft, чтобы узнавать обо всех новостях, связанных с браузером и его пользователями.
Визуализация
Представьте разные поколения браузеров аналогично различным поколениям смартфонов:
- 📱 IE: этот скорее всего старый "кирпич", по которому всем так ностальгично!
- 📱📱 Современные браузеры: мощные и прогрессивные, как современные смартфоны.
Если бы вы нашли IE, это было бы все равно, что обнаружить старый добрый телефон-кирпич:
if (/MSIE|Trident/.test(window.navigator.userAgent)) {
// 📱 Вот и "кирпич". Любители раритетов, радуйтесь!
}
Важно помнить, что определение IE не обходится без использования регулярных выражений, чтобы обнаружить этот артефакт среди прочих современных устройств.
Усовершенствование адаптивного дизайна для IE
Работа с пользователями IE часто включает преодоление препятствий, связанных с недостаточной поддержкой CSS:
- Flexbox: IE10 и IE11 вносят в эту технологию свои отклонения от стандарта, требуют добавления префиксов.
- Media Queries: IE9 не участвует в чтении медиа-запросов; используйте дополнительные стили для IE9 и старше.
- Градиенты: IE9 поддерживает градиенты, но синтаксис отличается от общепринятого.
Следуйте принципу прогрессивного улучшения, чтобы ваш сайт был доступен и предлагал удобный пользовательский интерфейс даже в случае использования IE.
Полезные материалы
Azure portal: Classic portal retirement – Важное обновление о закрытии классического портала Azure, какое влияние это имеет на пользователей и как перейти на новый портал.
Обнаружение браузера с помощью строки агента пользователя – HTTP | MDN — Все, что вы хотели знать о поиске браузера, с упором на агента пользователя.
Обнаружение Internet Explorer 11 – Stack Overflow — Советы и приемы от сообщества об обнаружении IE11.
Can I use... Таблицы поддержки для HTML5, CSS3 и других технологий — Проверьте совместимость веб-функций в различных браузерах, включая IE.
Modernizr: библиотека для определения возможностей браузеров HTML5/CSS3 — Использование этой библиотеки для создания универсальных резервных решений в IE.
Переключатель User-Agent – добавление для 🦊 Firefox (ru-RU) — Мгновенная смена строки агента пользователей для имитации различных браузеров во время тестирования IE.