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

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

⚡ Кратко

База display: block с отступами → grid внутри @supports → фолбэк-margin через not → обрезка заголовка префиксом. Поддержку — на caniuse.

Возможное решение

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

📄 lesson-47/solution.html
<section class="cards">
  <article class="card"><h3 class="card__title">HTML</h3></article>
  <article class="card"><h3 class="card__title">CSS</h3></article>
  <article class="card"><h3 class="card__title">Grid</h3></article>
</section>
📄 lesson-47/solution.css
/* 1. База — любой браузер */
.cards { display: block; }
.card + .card { margin-top: 1rem; }

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

/* 3. Запасной отступ, если flex/grid gap не поддержан */
@supports not (gap: 1rem) {
  .card + .card { margin-top: 1rem; }
}

/* 4. Обрезка заголовка (требует вендорного префикса) */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Результат

HTML
CSS
Grid
/* в современном браузере виден этот результат —
   сетка с равными промежутками */

Логика решения

  • База вне feature query гарантирует рабочую страницу даже без поддержки.
  • @supports (display: grid) включает сетку только там, где она сработает.
  • @supports not (gap: 1rem) страхует браузеры без gap.
  • Префикс оставлен явно, в реальном проекте его добавит Autoprefixer.

Навигация