Кроссбраузерность

Одинаковая работа сайта в любом браузере: прогрессивное улучшение, @supports, резервные значения, префиксы и проверка в caniuse.

Уровень: начальный 11 разделов 1,5 часа

1. Что такое кроссбраузерность

Сайт открывается в Chrome, Safari, Firefox, Edge и на старых версиях — и должен работать везде. Кроссбраузерность не значит «пиксель в пиксель»: прогрессивное улучшение уступает старым браузерам, а в новых — добавляет красоту. Критерий — функциональность и читаемость, а не баг-репорт дизайнера.

на старых браузерах сайт работает, а не «прости, сделай новее»;
современные фичи деградируют до «просто работает»;
стили не ломают чтение: контент виден без отдельной стилизации;
критические сценарии (корзина, вход) одинаковы везде.

Реальность: большинство посетителей — Chrome (десктоп и Android) и Safari (iOS). Firefox и Edge — объединяющий фоновый шум. Планируйте ресурсы так: обязательный минимум — современный Chrome и Safari iOS, дальше — по данным аудитории.

2. caniuse и данные

Caniuse.com отвечает на вопрос «поддерживает ли браузер эту фичу» с процентами и таблицей версий. Перед спорным свойством — справка: посмотреть покрытие, найти альтернативу и решить, нужен ли полифилл.

# пример запроса: поддержка gap в flex
https://caniuse.com/flexbox-gap

# если фичи (например, aspect-ratio) нет у 3% — пишите прогрессивно:
img { height: 200px; }               /* запас для старых Safari */
img { height: auto; aspect-ratio: 4/3; }  /* современность переопределяет */

смотрите не «поддержку вообще», а вашу аудиторию (Google Analytics: версии браузеров);
для внутренних корпоративных систем спектр уже — хром + edge осмысленный;
caniuse-link в код-ревью — железный аргумент против спорного приёма.

3. Прогрессивное улучшение

Прогрессивное улучшение — базовый рабочий вариант для всех, а современные возможности добавляются поверх. Внутри CSS это реализуется резервными значениями: браузер берёт последнее поддерживаемое правило из пары.

.card {
  /* старое значение — также запасной вариант */
  display: block;
  /* современное перекрывает там, где есть поддержка */
  display: grid;

  gap: 16px;                    /* не ломает, где нет поддержки */
  gap: 1rem;                  /* то же для новичков rem в размерах */
}

/* net-good: страница читаема, когда grid нет — блоки просто в стопке */

пишите сначала «примитивно», потом современно (правило cascades);
неверное значение свойства игнорируется, остальные правила работают;
фичи, ломающие вёрстку (не декоративные), — через @supports, а не резерв;
принцип «mobile-first» — это тоже прогрессивное улучшение интерфейса.

4. @supports

@supports — условный блок: применить правила, только если браузер знает нужное свойство. Это способ достроить уникальный опыт (sticky, gap-анимацию, container queries), не трогая базовую вёрстку.

@supports (position: sticky) {
  .sidebar { position: sticky; top: 24px; }
}

@supports not (display: grid) {
  .grid { display: flex; flex-wrap: wrap; }
}

/* базовый вариант пишем всегда снаружи, @supports — как усилитель */

@supports проверяет свойства, а не браузер: вы спрашиваете «умеешь ли ты», а не «кого ты»;
поддерживается во всех современных и большинстве старых (Safari 9+, IE нет);
для IE не паникуйте: базовый вариант и снаружи @supports решают 90%.

Правильное место @supports — оформление, а не суть. Если карточки без grid «рассыпаются» — значит, базовая вёрстка не прогрессивна, а зависима: чините разнос, а не дописывайте grid.

5. Резервные значения

Резервные значения работают связкой «старое свойство, затем новое». Браузер перезаписывает первое, если понимает второе: незнакомое правило просто игнорируется, а остальные продолжают работать.

.btn {
  /* 1. запасной цвет */
  background-color: #1d4ed8;
  /* 2. современная альтернатива */
  background-image: linear-gradient(#2563eb, #1d4ed8);

  /* старые браузеры без gap */
  margin-bottom: 8px;
  /* везде, где gap известен — он и решает */
  gap: 1rem;
  margin-bottom: 0;
}

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

6. Префиксы и автопрефиксер

Раньше современные свойства требовали экспериментальных префиксов: -webkit-, -moz-. Сейчас почти всё работает без них, но отдельные фичи ещё живут под префиксами (например, -webkit-sticky в Safari). Автопрефиксер добавляет префиксы по caniuse-данным автоматически при сборке.

/* исходник */
.card { display: grid; }

/* после autoprefixer — при необходимости добавляет префиксы:
   -webkit- для old Safari, -moz- для Old Firefox и т.д. */
.card {
  display: -webkit-box;
  display: -ms-grid;
  display: grid;
}

руками префиксы не пишут: поддерживаются-postcss/autoprefixer в сборке;
одно отстающее свойство решает caniuse+autoprefixer, а не приступ бесполезных -webkit-;
свойства, появившиеся после 2020-х, уже не требуют префиксов;
не копируйте префикс-таблицы «на всякий случай» — они зашумляют код.

Исключение — старые iOS-версии: некоторые свойства still требуют -webkit-. Решается подключением autoprefixer с настройкой «поддерживаемые браузеры», а не ручным добавлением.

7. Полифиллы

Полифилл — код, который добавляет браузеру поведение AP-фичи, которой у него нет. Классика: Array.prototype.includes, IntersectionObserver, aspect-ratio в некоторых старых движках.

<!-- полифилл подгружается только там, где фичи нет -->
<script>
  if (!("IntersectionObserver" in window)) {
    document.write('<script src="js/intersection-observer-polyfill.js"><\/script>');
  }
</script>

полифилл = проверка «нет ли фичи» → подключить замену;
используйте полифиллы для функциональности, а не для красоты: картинку-тяжёлый PNG проще отдать резервом;
автовариантов современных фич (aspect-ratio, gap) полифиллы почти не нужны из-за резервных значений;
в 2026-м типичный сайт обходится без полифиллов вообще.

Не тяните полифилл под каждый декоративный приём: каждый скрипт весит и выполняется. Сперва спросите «а что произойдёт без этой фичи?» — часто ответ «ничего страшного» закрывает вопрос.

8. Типичные подводные камни

Ряд проблем всплывает у всех, кто верстает кроссбраузерно. Держите их в голове, они экономят часы дебага.

Проблема	Что обычно пишут
gap в flex не работает в старом Safari	запасные margin или padding через миксин
100vh на мобильных «прыгает»	dynamic viewport: svh/lvh, или min-height: 100lvh
свойство sticky "зависает"	у предка нет overflow: hidden; проверьте поддержку
grid не принимается старыми браузерами	базовый display:block + grid
aspect-ratio у img в Safari 14	width/height атрибуты + height:auto
clamp/rem не в старых Android	px-запас ниже

.hero {
  height: 100vh;                /* запас */
  height: 100dvh;              /* настоящая высота вьюпорта */
}
.sidebar {
  position: -webkit-sticky;    /* Safari нужен префикс */
  position: sticky;
  top: 1rem;
}

9. Проверка в браузерах

Полноценная кроссбраузерная проверка — набор браузеров и устройств. Для инженера достаточно: десктоп Chrome, десктоп Firefox, Safari (macOS/iOS) и Android Chrome. Всё остальное — по данным аудитории проекта.

# скриншот-тесты на настоящих движках
npx playwright install --with-deps chromium firefox webkit
npx playwright screenshot --device="iPhone 13" https://site.com front.png

эмуляция устройств в DevTools — база, реальные устройства — лучше;
светлая/тёмная тема, zoom 200%, reader-mode — тоже кроссбраузерность;
проверьте: историю, возврат и «назад» через браузерное меню на iOS;
скриншот-тесты (Playwright) автоматизируют повторную проверку регрессий.

Самый полезный минимум: открыть страницы на iOS Safari и Android Chrome (самые частые пары) и пройти главные сценарии. Две версии — половина реального покрытия интернета.

10. Degradation: деградация без паники

Когда фича не поддержана, страница должна стать проще, а не сломаться. Этот принцип — graceful degradation (условно «мягкое ухудшение»): современное приложение, в старом браузере — хорошо читаемая версия.

/* деградация в действии: фото всегда имеет размер и текст */

/* 1. база */
.post__img img { width: 100%; height: auto; }

/* 2. современное: финальный слой */
.post__img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

контент сначала, оформление потом: читается без стилей;
медиа — с альтернативой (alt, подпись), вес — по базам данных;
кнопки и формы работают без JS: отправка через action;
у каждой фичеры степени: «без неё ничего не ломается».

11. Чек-лист кроссбраузерности

Перед сдачей проекта прогоните быструю таблицу-чек.

основные сценарии работают в Chrome, Safari, Firefox (актуальные версии);
на iOS Safari проверены: sticky, gap (если используем flex), 100vh;
картинки имеют размеры (aspect-ratio/width/height) — старые браузеры без искажения;
у сайта есть примитивная осмысленная версия без JS;
префиксы не руками: autoprefixer по caniuse-данным;
спорные приёмы — с резервными значениями или под @supports;
проверять не только Хром: «у меня же работает» — не метрика.

Приоритет действий

Когда время ограничено: сперва передовые браузеры, потом мобильные, потом старые. Если пользователь проекта — админы и корпоративный хром, а не вся планета — адаптируйте чек-лист под реальных посетителей.

Что дальше

Курс завершён.

← Вернуться к курсам