45 Модуль 9 Качество и производительность 16 мин урок 20 из 25

Кроссбраузерность и деградация

Сайт должен работать везде — но не обязан выглядеть одинаково. Разбираем прогрессивное улучшение, @supports и что делать с Safari.

Что ты научишься делать

Построишь вёрстку так, чтобы новая фича была улучшением, а не условием работы
Научишься читать caniuse и решать, брать ли фичу в проект
Сделаешь раскладку с subgrid и рабочим запасным вариантом

#Главная мысль урока

Работать и выглядеть одинаково — разные требования, и путать их дорого.

Попытка добиться пиксель в пиксель во всех браузерах съедает недели и рождает костыли, которые ломаются на следующем обновлении. Требование «человек может сделать то, зачем пришёл» выполняется гораздо дешевле.

Отсюда подход: базовая версия работает у всех, современные возможности добавляют удобства тем, у кого они есть.

#Прогрессивное улучшение против изящной деградации

Два подхода, которые звучат похоже, а дают разный код.

Изящная деградация — сначала пишем современную версию, потом чиним для старых браузеров. Починка идёт вслед за поломками, и список костылей растёт.

Прогрессивное улучшение — сначала простая рабочая версия, потом улучшения поверх. Ничего не ломается, потому что база не зависит от новых возможностей.

Так не надо

/* Сначала современное… */
.cards {
  display: grid;
  grid-template-columns: subgrid;
}

/* …потом чиним, если не поддержано */
@supports not (grid-template-columns: subgrid) {
  .cards { display: flex; flex-wrap: wrap; }
  .card { flex: 1 1 240px; }
}

Отрицательная проверка. Каждая новая фича требует своей ветки «а если нет», и они накапливаются. Легко забыть одну и не заметить.

Так надо

/* База: работает везде */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card { flex: 1 1 240px; }

/* Улучшение поверх */
@supports (grid-template-rows: subgrid) {
  .cards { display: grid; }
}

База не знает о новых возможностях и не может из-за них сломаться. Улучшение либо применяется целиком, либо не применяется вовсе.

#Когда @supports не нужен

Проверка нужна реже, чем кажется. CSS устроен так, что непонятное объявление просто отбрасывается — и этого часто достаточно.

CSSЕстественный запасной вариант

1.panel {2  /* Старый браузер применит это… */3  background: #6544e0;45  /* …и отбросит это, если не поймёт функцию */6  background: color-mix(in oklab, #6544e0 80%, white);7}89.card {10  /* Пиксели поймут все */11  gap: 16px;12  /* Современные возьмут значение из шкалы */13  gap: var(--space-4, 16px);14}

Порядок здесь принципиален: сначала запасное значение, потом современное. Браузер применит последнее из тех, что понял.

Ситуация	Нужен ли @supports
Одно свойство с запасным значением выше	Нет — сработает естественный отбор
Незнакомый псевдокласс в селекторе	Нет — правило целиком не применится
Улучшение из нескольких свойств, которые нужны вместе	Да
База и улучшение конфликтуют между собой	Да
Незнакомое @-правило вроде `@container`	Нет — блок игнорируется целиком

#Что делать с Safari

Safari регулярно отстаёт по срокам и остаётся единственным движком на iOS: любой браузер там внутри — это WebKit. То есть «просто попросить поставить другой браузер» не работает.

Практические выводы.

Проверяй на настоящем Safari. Chrome с эмуляцией iPhone показывает движок Chrome, а не WebKit. Это не проверка.
Помни про -webkit-. У части свойств — backdrop-filter, mask, text-size-adjust — префикс до сих пор нужен.
Проверяй 100vh. На мобильном Safari он долго считался без панели браузера, и блок вылезал за экран. Современная замена — 100dvh.
Не полагайся на самые свежие фичи. Если возможность появилась в Chrome полгода назад, в Safari она может быть ещё в разработке.

CSSВысота экрана без сюрпризов

1.hero {2  /* Запасное значение для старых браузеров */3  min-block-size: 100vh;4  /* Динамическая высота: учитывает исчезающую панель браузера */5  min-block-size: 100dvh;6}

#Префиксы: что живо, что мертво

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

Свойство	Префикс
`border-radius`, `box-shadow`, `transition`, `transform`	Не нужен уже много лет
`flex`, `grid`	Не нужен
`backdrop-filter`	Нужен `-webkit-` для части сборок Safari
`mask-image`	Нужен `-webkit-`
`appearance`	Иногда нужен `-webkit-`
`::-webkit-scrollbar`	Собственное расширение WebKit, стандарта нет

#Как читать caniuse

Общий процент поддержки — наименее полезное число на странице. Смотреть нужно на другое.

Сравни свою аудиторию с общей
Девяносто пять процентов в мире ничего не говорят, если половина твоих людей приходит с одного старого устройства. Загляни в аналитику своего сайта.
Прочитай примечания
Зелёная клетка с цифрой означает частичную поддержку. Внизу страницы описано, чего именно не хватает, — часто это важнее самого факта поддержки.
Посмотри на дату появления
Фича, появившаяся полгода назад, есть только у тех, кто обновляется. Фича трёхлетней давности — практически у всех.
Реши цену отказа
Если без фичи сайт выглядит чуть скромнее — берём смело. Если без неё нельзя оформить заказ — нужен полноценный запасной путь.

#Тестирование без парка устройств

Покупать десять телефонов не нужно. Достаточно нескольких приёмов, которые ловят большинство проблем.

Настоящий Safari на любом Mac. Один компьютер закрывает весь iOS: движок тот же.
Замедление процессора в DevTools. Четырёхкратное замедление приближает поведение среднего телефона.
Отключение возможностей вручную. Временно переименуй @supports (grid-template-rows: subgrid) в заведомо неподдерживаемое — увидишь запасную ветку своими глазами.
Проверка без скриптов. Выключи JavaScript и пройди основной сценарий. Это же ловит проблемы у людей с блокировщиками.
Масштаб двести процентов. Ловит обрезанный текст и сломанную раскладку лучше, чем эмуляция маленьких экранов.

#Как это выглядит в реальном проекте

CSSgallery.css

1@layer components {2  /* База: флексы. Работают везде, начиная с очень старых браузеров */3  .gallery {4    display: flex;5    flex-wrap: wrap;6    gap: 16px;7  }89  .gallery__item {10    flex: 1 1 240px;11    display: flex;12    flex-direction: column;13  }1415  /* Кнопка прижата вниз — простое решение без сетки */16  .gallery__btn { margin-block-start: auto; }1718  /* Улучшение первого уровня: сетка вместо флексов */19  @supports (display: grid) {20    .gallery {21      display: grid;22      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));23    }24  }2526  /* Улучшение второго уровня: строки выравниваются между карточками */27  @supports (grid-template-rows: subgrid) {28    .gallery { grid-auto-rows: auto 1fr auto; }2930    .gallery__item {31      display: grid;32      grid-row: span 3;33      grid-template-rows: subgrid;34    }3536    .gallery__btn { margin-block-start: 0; }37  }38}

Три уровня, и каждый следующий необязателен. Человек со старым браузером увидит работающую галерею, просто с чуть менее ровными кнопками — и никогда об этом не узнает.

#Когда НЕ надо

Поддерживать браузеры, которых нет у аудитории. Каждая ветка совместимости — код, который надо сопровождать. Проверь аналитику, прежде чем платить эту цену.
Ставить префиксы «на всякий случай». Устаревшая префиксная реализация может перекрыть правильную и вести себя иначе.
Оборачивать в @supports всё подряд. Одиночное свойство и так безопасно отбрасывается.
Добиваться одинакового вида. Разные системы по-разному рисуют шрифты, поля и полосы прокрутки. Это нормально и не требует починки.

Где спотыкаются почти все

Современное значение написано выше запасного

Почему Браузер применяет последнее объявление, которое понял. Если современное идёт первым, запасное перекроет его у всех.

Как надо Сначала запасное значение, потом современное.

Проверка через <code>@supports not</code>

Почему Отрицательные ветки накапливаются: каждая новая фича требует своей. Одну обязательно забудут.

Как надо Делай базу рабочей, а улучшения добавляй положительной проверкой.

Тестирование iOS в режиме устройства Chrome

Почему Меняется только размер окна и строка User-Agent. Движок остаётся прежним, баги WebKit не проявятся.

Как надо Открой настоящий Safari — один Mac закрывает весь iOS.

Префикс после стандартного свойства

Почему Браузер, понимающий оба, применит устаревший префиксный вариант.

Как надо Префиксное объявление всегда идёт первым.

Прогрессивное улучшение progressive enhancement: Рабочая база плюс необязательные улучшения поверх.
Изящная деградация graceful degradation: Современная версия, дополненная починками для старых браузеров.
Проверка поддержки @supports: Правило, применяющее блок только если браузер понимает конструкцию.
Префикс поставщика vendor prefix: Приставка вроде -webkit- для экспериментальных реализаций.
Динамическая высота экрана dvh: Единица, учитывающая исчезающие панели мобильного браузера.

Задание

Раскладка с рабочим запасным вариантом

Галерея свёрстана только на subgrid: там, где его нет, карточки просто ложатся в столбик без выравнивания.

Переверни подход. Сделай базой флексы: карточки в ряд с переносом, кнопка прижата вниз через margin-block-start: auto. А subgrid добавь сверху через положительный @supports. Отрицательную проверку убери.

<div class="gallery">  <article class="gallery__item">    <h3>Эспрессо</h3>    <p>Двойная порция.</p>    <button class="gallery__btn">Заказать</button>  </article>  <article class="gallery__item">    <h3>Раф на кокосовом молоке</h3>    <p>Мягкий сладковатый напиток для тех, кому латте кажется резким.</p>    <button class="gallery__btn">Заказать</button>  </article>  <article class="gallery__item">    <h3>Фильтр</h3>    <p>Зерно из Эфиопии.</p>    <button class="gallery__btn">Заказать</button>  </article></div>

.gallery {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-auto-rows: auto 1fr auto;  gap: 12px;}.gallery__item {  display: grid;  grid-row: span 3;  grid-template-rows: subgrid;  gap: 6px;  padding: 12px;  background: #f5f5fa;  border-radius: 10px;}/* Отрицательная проверка — её надо убрать */@supports not (grid-template-rows: subgrid) {  .gallery { display: block; }}.gallery__item h3 { margin: 0; font-size: 15px; }.gallery__item p { margin: 0; font-size: 13px; color: #5b6070; }.gallery__btn {  padding: 8px;  font: inherit;  font-size: 13px;  color: #fff;  background: #6544e0;  border: 0;  border-radius: 8px;}

Открыть в песочнице

Подсказка 1

База: .gallery { display: flex; flex-wrap: wrap; gap: 12px; } и .gallery__item { flex: 1 1 200px; display: flex; flex-direction: column; }

Подсказка 2

Кнопке в базовом варианте: .gallery__btn { margin-block-start: auto; }

Подсказка 3

Улучшение: @supports (grid-template-rows: subgrid) { … } — внутрь переносишь всё, что было про grid.

Показать решение

HTMLindex.html

1<div class="gallery">2  <article class="gallery__item">3    <h3>Эспрессо</h3>4    <p>Двойная порция.</p>5    <button class="gallery__btn">Заказать</button>6  </article>78  <article class="gallery__item">9    <h3>Раф на кокосовом молоке</h3>10    <p>Мягкий сладковатый напиток для тех, кому латте кажется резким.</p>11    <button class="gallery__btn">Заказать</button>12  </article>1314  <article class="gallery__item">15    <h3>Фильтр</h3>16    <p>Зерно из Эфиопии.</p>17    <button class="gallery__btn">Заказать</button>18  </article>19</div>

CSSstyle.css

1/* База: работает везде */2.gallery {3  display: flex;4  flex-wrap: wrap;5  gap: 12px;6}78.gallery__item {9  flex: 1 1 200px;10  display: flex;11  flex-direction: column;12  gap: 6px;13  padding: 12px;14  background: #f5f5fa;15  border-radius: 10px;16}1718.gallery__btn { margin-block-start: auto; }1920/* Улучшение: строки выравниваются между карточками */21@supports (grid-template-rows: subgrid) {22  .gallery {23    display: grid;24    grid-template-columns: repeat(3, 1fr);25    grid-auto-rows: auto 1fr auto;26  }2728  .gallery__item {29    display: grid;30    grid-row: span 3;31    grid-template-rows: subgrid;32  }3334  .gallery__btn { margin-block-start: 0; }35}3637.gallery__item h3 { margin: 0; font-size: 15px; }38.gallery__item p { margin: 0; font-size: 13px; color: #5b6070; }3940.gallery__btn {41  padding: 8px;42  font: inherit;43  font-size: 13px;44  color: #fff;45  background: #6544e0;46  border: 0;47  border-radius: 8px;48}

Проверь себя

Базовая версия работает без единой современной фичи
Запасное значение стоит выше современного
Использую положительный @supports, а не отрицательный
Проверяю на настоящем Safari, а не в режиме устройства
Не добиваюсь одинакового вида во всех браузерах

Кроссбраузерность и деградация

Что ты научишься делать

#Главная мысль урока

#Прогрессивное улучшение против изящной деградации

#Когда @supports не нужен

#Что делать с Safari

#Префиксы: что живо, что мертво

#Как читать caniuse

Сравни свою аудиторию с общей

Прочитай примечания

Посмотри на дату появления

Реши цену отказа

#Тестирование без парка устройств

#Как это выглядит в реальном проекте

#Когда НЕ надо

Где спотыкаются почти все

Современное значение написано выше запасного

Проверка через <code>@supports not</code>

Тестирование iOS в режиме устройства Chrome

Префикс после стандартного свойства

Проверь себя

Раскладка с рабочим запасным вариантом

Проверь себя

Горячие клавиши

В редакторе кода

#Главная мысль урока

#Прогрессивное улучшение против изящной деградации

#Когда @supports не нужен

#Что делать с Safari

#Префиксы: что живо, что мертво

#Как читать caniuse

Сравни свою аудиторию с общей

Прочитай примечания

Посмотри на дату появления

Реши цену отказа

#Тестирование без парка устройств

#Как это выглядит в реальном проекте

#Когда НЕ надо

Где спотыкаются почти все

Современное значение написано выше запасного

Проверка через <code>@supports not</code>

Тестирование iOS в режиме устройства Chrome

Префикс после стандартного свойства

Проверь себя

Проверь себя

Рядом по теме