Обнаружение возможностей и определение браузера
Используйте обнаружение возможностей вместо анализа user-agent
«Обнаружение возможностей и определение браузера» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Два подхода к совместимости
Чтобы узнать, поддерживает ли текущий браузер определённую возможность, можно либо напрямую проверить наличие возможности ("IntersectionObserver" in window), либо проанализировать строку пользовательского агента (navigator.userAgent.includes("Chrome")). Один подход надёжен, а другой уже много лет является источником ошибок.
Почему анализ строк агента не работает
Строки пользовательского агента лгут. Edge выдаёт себя за Chrome (а также Safari и Firefox). Chrome на Android выдаёт другую строку UA, чем Chrome на iOS. Браузеры поддерживают «заморозку» строки UA ради конфиденциальности. Любая логика на основе строк UA ломается каждые несколько месяцев.
Шаблон определения возможностей
Проверьте фактический программный интерфейс, необходимый коду: if ("IntersectionObserver" in window) { ... }. Если свойство существует, браузер поддерживает эту возможность; иначе используйте резервную ветку. Проверка выполняется напрямую, быстро и не устаревает при появлении новых версий.
if ("IntersectionObserver" in window) {
const observer = new IntersectionObserver(handler);
} else {
loadPolyfill().then(() => { /* use IntersectionObserver */ });
}Сначала определите, затем используйте
Сочетайте определение возможности с настоящим резервным вариантом. Обнаружение отсутствующей возможности полезно только в том случае, если предусмотрено действие на этот случай: загрузить полифилл, отобразить статичную альтернативу или полностью скрыть возможность.
Запросы возможностей CSS
В CSS есть собственный механизм определения возможностей: @supports (display: grid) { ... }. Блок применяется только тогда, когда браузер понимает указанную пару свойства и значения. Используйте его, чтобы поставлять разметку на основе сетки с резервными вариантами на основе плавающих элементов для устаревших браузеров.
@supports (display: grid) {
.grid { display: grid; gap: 16px; }
}
@supports not (display: grid) {
.grid > * { float: left; width: 33%; }
}Подсказки клиента пользовательского агента
Современные браузеры предоставляют структурированную информацию через navigator.userAgentData (только Chromium). Вместо строки в свободной форме возвращаются пары бренда и версии. Всё же отдавайте предпочтение определению возможностей: подсказки UA полезны только тогда, когда возможность нельзя определить по проверке свойства.
Когда анализ строк агента допустим
Единственный узкий допустимый случай определения UA — отказ от использования неисправных браузеров: например, при известной ошибке Safari на iOS в версии X. Даже тогда отдавайте предпочтение отказу на основе возможностей (CSS.supports("aspect-ratio: 1")). Определение по UA должно быть последним средством.
Библиотеки в стиле Modernizr
Modernizr объединяет множество проверок возможностей и предоставляет их в виде классов у элемента <html> (html.flexbox, html.no-flexbox). Современным проектам он редко нужен — большинство проверок выполняется одной строкой, — но он по-прежнему полезен при переносе старых проектов.
Проверка резервного варианта
После добавления определения проверьте оба пути. Откройте DevTools, подмените возможность так, чтобы она имела неопределённое значение, и убедитесь, что резервный вариант работает. Непроверенные резервные варианты приходят в негодность: когда пользователю действительно требуется их использовать, они часто дают сбои, которые разработчик не мог себе представить.
Определение возможностей во фреймворках
У React, Vue и других фреймворков нет специального программного интерфейса для определения возможностей — используйте обычный JavaScript внутри эффекта или при инициализации компонента. Приложения, отображаемые на сервере, должны выполнять определение на клиенте, поскольку "IntersectionObserver" in window во время SSR имеет значение undefined.
Избегайте анализа UA по предполагаемым возможностям
Некоторые команды проверяют UA, чтобы предположить наличие возможности («Это iPhone? Тогда, вероятно, он поддерживает сенсорный ввод»). Такой подход смешивает две не связанные между собой вещи. Определяйте сенсорный ввод напрямую через "ontouchstart" in window или, что лучше, отдавайте предпочтение событиям указателя, скрывающим различия между способами ввода.
Проверка знаний
Почему при работе с возможностями браузера определение возможностей предпочтительнее анализа строк пользовательского агента?
Итоги
Отдавайте предпочтение определению возможностей ("API" in window), а не анализу строк пользовательского агента. Для той же цели в CSS есть @supports. Всегда сочетайте определение с настоящим резервным вариантом и проверяйте оба пути. Анализ UA следует использовать только для отказа от известных неисправных версий браузеров, но никогда — для предположения о возможностях.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Обнаружение возможностей и определение браузера» бесплатный?
Да — полный текст урока «Обнаружение возможностей и определение браузера» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обнаружение возможностей и определение браузера»?
Используйте обнаружение возможностей вместо анализа user-agent Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Обнаружение возможностей и определение браузера»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Философия PE: начинайте с HTML
- Обнаружение возможностей и определение браузера
- Плавная деградация и прогрессивное улучшение
- Создание аккордеона PE