Кроссбраузерность: как проверить и исправить сайт

Короткий ответ

Современные браузеры согласны в большинстве стандартов, но не во всех и не с одинаковой скоростью. Сайт кроссбраузерный, если его ключевые сценарии работают (не обязательно выглядят пиксель в пиксель) во всех браузерах, которыми реально пользуется ваша аудитория. Процесс простой:

1. Определите, какие браузеры вы поддерживаете.
2. Настройте инструменты сборки ровно под этот список.
3. Проверяйте поддержку функций до использования и делайте запасные варианты.
4. Тестируйте на реальных устройствах, особенно на iOS и во встроенных браузерах.

Где браузеры всё ещё различаются

• Safari на iOS и macOS. Он выпускает новые возможности по своему графику. На iOS все браузеры, включая Chrome, работают на одном движке WebKit, поэтому баг Safari — это баг iPhone. Типичные проблемы: 100vh не учитывает адресную строку (используйте единицы dvh/svh), другой интерфейс у полей даты и времени, ограничения автозапуска видео, более строгие правила для cookies и хранилища, особенности прокрутки и position: sticky внутри контейнеров с overflow.
• Мобильные WebView. Telegram, Instagram и Facebook открывают ссылки во встроенном браузере. На Android это обычно системный WebView, который может быть старше Chrome на том же телефоне; на iOS — WebKit. Ждите отличий в скачивании файлов, всплывающих окнах, window.open, платёжных сценариях и safe-area. У Telegram Mini Apps ещё и своя логика viewport и темы.
• Старые Android и бюджетные телефоны. Слабые процессоры выдают тяжёлый JavaScript и анимации, которые на ноутбуке разработчика кажутся быстрыми.
• Элементы форм, шрифты и скроллбары. Нативная отрисовка зависит от платформы — стилизуйте их осознанно или принимайте нативный вид.

Как проверить поддержку функций

Перед использованием CSS- или JS-возможности посмотрите её на Can I use или в таблицах совместимости на MDN. Если что-то поддерживается не всеми целевыми браузерами, выберите один из трёх вариантов:

• Прогрессивное улучшение: страница работает без функции и становится лучше с ней.
• Проверка поддержки в CSS или JS с запасным вариантом.
• Полифил, если функция критична.

.grid { display: flex; flex-wrap: wrap; }

@supports (display: grid) {
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

Задайте цель в browserslist

browserslist — единый конфиг, который сообщает Autoprefixer, Babel, PostCSS, SWC и другим инструментам, какие браузеры поддерживать. Его кладут в package.json или в файл .browserslistrc:

> 0.5%
last 2 versions
not dead
iOS >= 15

Составляйте список по своей аналитике, а не по умолчанию. Если много посетителей приходит из Telegram на Android, включите версии WebView, которые они используют. Команда npx browserslist покажет, во что разворачивается запрос.

Autoprefixer и полифилы

• Autoprefixer (плагин PostCSS) добавляет вендорные префиксы вроде -webkit- только там, где они нужны по вашему browserslist. Не пишите префиксы вручную. Во многих фреймворках он уже подключён.
• Транспиляция (Babel, SWC, esbuild) превращает современный синтаксис в код, понятный старым движкам.
• Полифилы добавляют отсутствующие API (например, structuredClone или возможности Intl). Подключайте только нужные: точечный импорт или дифференциальная сборка лучше, чем огромный бандл для всех.

Запомните: транспиляция чинит синтаксис, полифилы — отсутствующие API, и ни то ни другое не исправляет CSS-вёрстку и баги отрисовки WebKit.

Как тестировать

Практический минимум: один iPhone, один Android среднего уровня, десктопные Chrome, Safari и Firefox, плюс открытие сайта изнутри Telegram и других приложений, откуда приходит трафик. Для отладки iOS подключите телефон к Mac и используйте Safari Web Inspector, для Android — chrome://inspect.

Частые ошибки

• Проверять только в Chrome, потому что «им все пользуются».
• Считать эмуляцию в DevTools настоящим iPhone.
• Копировать чужой browserslist, не глядя в свою аналитику.
• Забывать про встроенные браузеры, куда попадает большая часть трафика из соцсетей.
• Чинить баг Safari через определение user-agent вместо проверки поддержки функции.