Определение браузера 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.

Полезные материалы

1. Azure portal: Classic portal retirement – Важное обновление о закрытии классического портала Azure, какое влияние это имеет на пользователей и как перейти на новый портал.

2. Обнаружение браузера с помощью строки агента пользователя – HTTP | MDN — Все, что вы хотели знать о поиске браузера, с упором на агента пользователя.

3. Обнаружение Internet Explorer 11 – Stack Overflow — Советы и приемы от сообщества об обнаружении IE11.

4. Can I use... Таблицы поддержки для HTML5, CSS3 и других технологий — Проверьте совместимость веб-функций в различных браузерах, включая IE.

5. Modernizr: библиотека для определения возможностей браузеров HTML5/CSS3 — Использование этой библиотеки для создания универсальных резервных решений в IE.

6. Переключатель User-Agent – добавление для 🦊 Firefox (ru-RU) — Мгновенная смена строки агента пользователей для имитации различных браузеров во время тестирования IE.