Урок 47. Примеры: Кроссбраузерность: @supports, фолбэки

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~80 мин 🎯 Сложность: Продвинутая
#supports #not

⚡ Кратко

Смотри на «Результат» рядом с кодом. Слева — как видит страницу старый браузер (фолбэк), справа — как видит современный (улучшение через @supports).

Рабочие примеры

Превью ниже эмулируют разницу: один блок показывает базу (фолбэк), второй — улучшенную версию, как если бы её включил @supports.

1. База против улучшения: сетка карточек

База раскладывает карточки в колонну (display: block). Современный браузер с поддержкой grid строит сетку.

🕸️ Старый браузер — фолбэк (block)

HTML
CSS
Grid

✨ Современный браузер — @supports (display: grid)

HTML
CSS
Grid
📄 lesson-47/index.html
<section class="cards">
  <article class="card">HTML</article>
  <article class="card">CSS</article>
  <article class="card">Grid</article>
</section>
📄 lesson-47/styles.css
.cards { display: block; }            /* база */
.card + .card { margin-top: 1rem; }

@supports (display: grid) {           /* улучшение */
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
  }
  .card + .card { margin-top: 0; }
}

2. @supports not (...) — стиль только для НЕподдерживающих

Иногда удобнее писать отдельный стиль для браузеров без фичи. Условие not применит блок, только если поддержки нет.

Карточка
без gap → запасной margin
Карточка
без gap → запасной margin
📄 lesson-47/styles.css
/* запасной отступ, если flex gap не поддерживается */
@supports not (gap: 1rem) {
  .cards > .card { margin: 0.5rem; }
}

3. Вендорный префикс: обрезка текста до 2 строк

-webkit-line-clamp требует префикса до сих пор. Текст обрезается многоточием на второй строке.

Очень длинный заголовок карточки, который не помещается в две строки и потому обрезается многоточием в конце.
📄 lesson-47/styles.css
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

4. Проверка нескольких условий: and / or

Условия можно комбинировать. Например, включить улучшение, только если поддержаны и grid, и gap.

grid ✔
gap ✔
📄 lesson-47/styles.css
@supports (display: grid) and (gap: 1rem) {
  .cards { display: grid; gap: 1rem; }
}
Проверь себя: открой DevTools (F12) и временно выключи поддержку свойства, добавив опечатку (display: griddd). Браузер не выполнит блок @supports (display: griddd) — и ты увидишь именно фолбэк-версию.

Навигация