Быстрый способ сообщить браузеру об использовании
Часто мы разрабатываем веб-приложение и готовимся за несколько часов до выпуска, просто чтобы понять, что пользовательский интерфейс не работает в IE или Safari. Во многих случаях решение может быть очень простым, однако некоторые проблемы можно исправить, только применив определенные правила, зная, какой браузер используется для просмотра веб-сайта. Браузеры давали вам эту информацию при доступе к navigator.appName, когда наиболее распространенные браузеры, такие как «Microsoft Internet Explorer» и «Netscape», использовали различные API-интерфейсы и функции (1). Разработчикам пришлось использовать методы обнаружения браузеров, чтобы писать код для каждого браузера отдельно.
Вы больше не можете получить имя браузера, используя вышеупомянутый метод, поскольку все браузеры теперь соответствуют одним и тем же стандартам, за исключением некоторых (только одного, я смотрю на вас, IE). Согласно Документации MDN, свойство сохраняется только для целей совместимости и возвращает Netscape независимо от того, какие браузеры вы используете для доступа к нему.
Обнаружение браузера - плохая практика
Позвольте мне отметить тот факт, что я также согласен со многими разработчиками в том, что обнаружение браузера - плохая практика. Почему? Крис Койер из CSS-Tricks (2) довольно хорошо резюмирует это в статье ниже. Короче говоря, вы не хотите препятствовать доступу браузеров к веб-сайту, как это делают все другие браузеры, даже если они на самом деле могут не поддерживать все недостающие функции на момент разработки.
Вместо обнаружения браузера вы всегда должны использовать обнаружение функций. Вам следует писать обходные пути или изменять дизайн только для браузеров, в которых отсутствуют необходимые вам функции. Надеясь, что с обновлениями он сможет получить к нему доступ так, как вы это задумали.
Итак, почему мы рассматриваем обнаружение браузера?
Иногда у вас просто не хватает времени или ресурсов для поддержки старых браузеров, и вы можете полностью исключить их. Это то, что многие сайты начали делать, как Codepen.io. Если вы открываете codepen в Internet Explorer. Вот что вы увидите:
Мы знаем, что IE не будет полностью поддерживать все интересные функции CSS3, такие как сетка. CSS3 предлагает отличный способ обнаружения функций с помощью @supports, подробнее читайте здесь. Однако IE и Safari его не поддерживают. Что оставляет мало вариантов для разработчиков, которые привязаны к срокам и доставке.
Обнаружение используемого браузера с помощью javascript
Если вы работаете с современными интерфейсными технологиями, скорее всего, вы используете что-то вроде React, Angular, VueJS или Svelte. В этом случае самый быстрый способ исправить несовместимость браузера - разработать пользовательский интерфейс так, как задумал вы или дизайнер, а затем определить, используется ли IE для визуализации примитивного пользовательского интерфейса, такого как таблица. Вы бы не захотели отображать и то, и другое и использовать обнаружение CSS для отображения или скрытия каждого из них, потому что это замедлит работу, поскольку повторная визуализация по-прежнему будет происходить со скрытым альтернативным пользовательским интерфейсом.
В большинстве случаев вы можете определить используемый браузер, просто открыв navigator.userAgent. userAgent не вернет имя в ясной форме, поэтому вам нужно написать небольшой фрагмент, который фиксирует эту информацию. Посмотрите следующий фрагмент:
Эта функция может обнаруживать все браузеры, однако я не смог найти способ обнаружить Brave или Vivaldi как эти два замаскированных под Chrome по уважительным причинам. Это по-прежнему не проблема, потому что оба они поддерживают все функции, поддерживаемые Chrome.
Вы могли заметить, что с обнаружением Safari есть небольшая сложность, связанная с тем, что в Chrome Mobile недавно была добавлена поддержка Apple Pay, поэтому мы не можем просто использовать !!window.ApplePaySetupFeature, чтобы определить, что это Safari.
Обнаружение используемого браузера с помощью CSS
Это наиболее разумно, потому что вы хотите писать исправления для определенных браузеров, но не хотите менять весь опыт или, что еще хуже, блокировать им доступ к пользовательскому интерфейсу. Вы можете использовать это, чтобы написать специальные исправления CSS для IE или Safari. Вот как этого добиться:
Как видите, вы все еще можете обнаруживать браузеры Chromium, но не сможете отличить их друг от друга, и это нормально, потому что будьте уверены, что они будут вести себя одинаково.
Демо
Для целей этой статьи я создал репозиторий, где весь упомянутый выше код используется для демонстрации обнаружения браузером. Вы можете просмотреть демонстрацию здесь:
Вы можете перейти по этой ссылке в любом браузере, чтобы увидеть его в действии. Вы увидите, что обнаружение происходит как в JavaScript, так и в CSS. На момент написания этой статьи все использованные методы работают. В будущем браузеры могут вести себя иначе.
Последние слова
Эти методы основаны исключительно на моем опыте, если вы знаете какие-либо надежные способы обнаружения браузеров, поделитесь ими в разделе комментариев ниже.
Я хочу особо поблагодарить omar boudfoust за помощь в тестировании его в IE, поскольку у меня нет доступа к машине с Windows.
использованная литература
- Дуглас Крокфор,« Как работает JavaScript , стр. 22.1, Virgule-Solidus, 2018.»
- Крис Койер,« Обнаружение браузера - это плохо , CSS-Tricks».
