Browserslist: создание современных веб-приложений для разнообразной глобальной аудитории

В наше время веб-приложения обычно создаются для разнообразной аудитории, которая охватывает все страны и континенты. Проверив веб-аналитику, вы, вероятно, обнаружите, что ваша аудитория почти равномерно разделена между Северной и Южной Америкой, Азией и Европой, и, конечно, вы не можете игнорировать Африку и Океанию:

Использование веб-браузеров существенно отличается в разных регионах. Например, устройства на базе iOS гораздо менее популярны в Нидерландах, чем в США. В Китае вы увидите популярные местные браузеры, такие как QQ Browser или UC Browser, которых нет больше нигде в мире:

Однако поддержка современных веб-технологий также отличается в разных браузерах и версиях браузеров:

Поэтому нам, веб-разработчикам, необходимо найти правильный баланс между пользовательским опытом (UX) приложений, которые мы создаем, и нашим собственным опытом разработчика (DX):

  • мы хотим, чтобы наши приложения безупречно работали в любом браузере, который использует наша аудитория
  • мы также хотим, чтобы наши приложения были меньше по размеру, чтобы они загружались быстрее
  • в то же время мы хотели бы использовать современные возможности JavaScript и CSS.

Конечно, у нас есть отличные инструменты для этого: Autoprefixer, PostCSS и Stylelint для трансформации CSS, Babel и Webpack для транспиляции и пакетирования JavaScript, ESLint для анализа кода и многие другие.

Но как рассказать всем этим инструментам об аудитории нашего приложения, браузерах и поддерживаемых функциях?

На помощь приходит Browserslist! Browserslist — это библиотека, которая помогает поделиться конфигурацией совместимости браузеров с инструментами front-end. Все популярные инструменты, включая перечисленные выше, уже работают с Browserslist. Все больше инструментов интегрируются: например, Next.js присоединился к клубу в релизе v12.2.

Browserslist гарантирует, что ваше веб-приложение будет работать во всех целевых браузерах; код JavaScript и CSS будет правильно транспонирован. Кроме того, вы получите меньший размер пакета и время загрузки приложения.

Как начать работу с Browserslist

Во-первых, вам нужно добавить конфиг Browserslist прямо в package.json:

"browserslist": [
  ">0.1%"
]
Войти в полноэкранный режим Выйти из полноэкранного режима

Этот конфиг соответствует всем версиям браузеров, которые используются хотя бы 0,1 % аудитории по всему миру. Autoprefixer, Babel и другие инструменты будут автоматически находить целевые браузеры и компоновать код соответствующим образом.

Но что именно представляют собой эти целевые браузеры и их версии? Browserslist предоставляет CLI-интерфейс для проверки этого:

npx browserslist ">0.1%"
Войти в полноэкранный режим Выйти из полноэкранного режима

Вуаля! Мы получаем браузеры от QQ Browser и UC Browser до Internet Explorer и Opera Mini. Они все еще никуда не делись:

На самом деле, запросы могут быть гораздо сложнее: давайте включим самые последние версии всех браузеров, которые только что вышли, исключим мертвые браузеры и оставим только те, которые поддерживают модули ES6:

npx browserslist ">0.1% and last 2 versions and not dead and supports es6-module"
Войти в полноэкранный режим Выход из полноэкранного режима

CLI-интерфейс Browserslist достаточно хорош для быстрой проверки одного запроса. Однако при составлении и экспериментировании с запросами для вашего производственного приложения это может оказаться полезным:

  • лучшая визуализация данных для охвата аудитории
  • документация по линтеру запросов и синтаксису запросов

Прощай, консоль. Встречайте сайт browsersl.ist.

Простой способ проверить совместимость браузеров

Сайт browsersl.ist — это инструмент-компаньон для Browserslist. Проверьте его!

Во-первых, он может помочь с охватом аудитории. Рекомендуется использовать запрос defaults в качестве отправной точки, поскольку этот запрос обеспечивает разумную конфигурацию для большинства пользователей. Он охватывает глобальную аудиторию и соответствует последним версиям популярных и хорошо поддерживаемых браузеров по всему миру:

Вы можете просмотреть охват для определенных континентов и стран. Судя по всему, тюлени и пингвины, а также другие обитатели исследовательских станций в Антарктиде предпочитают использовать Safari:

Данные о покрытии передаются в базу данных Can I Use, поэтому вы можете проверить, какие версии браузеров поддерживают определенные функции, например, запросы CSS-контейнеров:

Browserslist имеет богатый синтаксис запросов, позволяющий точно настроить запрос под вашу аудиторию. Сайт browsersl.ist предоставляет полную документацию по функциям запросов; вы можете быть удивлены, обнаружив там, что вы также можете нацеливаться на версии Node.js:

Далее: попробуйте Browserslist и browsersl.ist сегодня

Browserslist — это обязательный инструмент для создания современных веб-приложений.

Здесь, в Cube, где мы создаем API для современных приложений данных, мы используем его на всех наших сайтах, включая блог, документацию и примеры приложений данных. С помощью Browserslist мы уверены, что глобальное сообщество разработчиков Cube получит наилучший опыт. Мы также можем использовать на ~10 % меньше кода JavaScript и CSS благодаря меньшим пакетам.

Теперь пришло время посетить сайт browsersl.ist и увидеть его в действии! Независимо от того, новичок вы в Browserslist или нет, browsersl.ist — это лучшая игровая площадка.

Не стесняйтесь поделиться ссылкой на browsersl.ist со своими друзьями или опубликовать в социальных сетях запросы с удивительными или неожиданными результатами. Мы будем рады узнать ваше мнение, поэтому оставляйте свои отзывы в комментариях и отмечайте нас в Twitter.

Оцените статью
devanswers.ru
Добавить комментарий