Вёрстка mobile-first — Примеры

Пример 1 — Настольная раскладка, снятая запросами max-width

Таблица стилей начинается с широкой двухколоночной раскладки и убирает её на маленьких экранах, причём оба узких правила требуют !important. Скажите, почему файл растёт, затем перестройте тот же дизайн от узкого случая.

/* база — это настольная раскладка */
.article { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; padding: 2rem 3rem; }

@media (max-width: 40rem) {
  .article { grid-template-columns: 1fr !important; padding: 1rem !important; }
}

Решение

.article { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }

/* два столбца перестают помещаться ниже 40rem */
@media (min-width: 40rem) {
  .article { grid-template-columns: 2fr 1fr; }
}

/* более широкий отступ оправдан, только когда есть запас места */
@media (min-width: 70rem) {
  .article { padding: 2rem 3rem; }
}

Запрос max-width обязан отменять объявление, сделанное раньше, поэтому специфичность подрастает, пока победить не сможет только !important. Если же базовый слой написан как одноколоночная раскладка, каждый запрос только добавляет, порядок исходника совпадает с порядком роста раскладки, и ничего не переопределяется; база при этом остаётся запасным вариантом на случай, когда запрос не применился, и потому должна быть полной сама по себе. Каждая точка перелома поставлена там, где содержимое действительно перестаёт работать, и несёт комментарий о том, какой элемент её вызвал.

Пример 2 — Визуальный порядок, расходящийся с DOM

На мобильном рекламная врезка появляется раньше статьи, которую она прерывает, и порядок клавиатуры совпадает с разметкой, а не с экраном. CSS-свойство order ставит статью первой на широких экранах. Объясните, какой порядок испытывает пользователь, затем исправьте это в разметке.

<div class="row">
  <aside class="promo">Предложение</aside>
  <main class="article">Статья</main>
</div>

.row { display: grid; grid-template-columns: 1fr; }

@media (min-width: 60rem) {
  .row { grid-template-columns: 2fr 1fr; }
  .article { order: -1; }   /* статья слева, промо справа */
}

Решение

<div class="row">
  <main class="article">Статья</main>
  <aside class="promo">Предложение</aside>
</div>

.row { display: grid; grid-template-columns: 1fr; }

@media (min-width: 60rem) {
  .row { grid-template-columns: 2fr 1fr; }
}

Порядок табуляции следует за порядком документа, поэтому переупорядочивание через CSS заставляет визуальную последовательность и последовательность клавиатуры расходиться: пользователь клавиатуры проходит страницу в том, что выглядит случайным порядком, а скринридер читает врезку раньше содержимого, рядом с которым она стоит. Однако свойство order здесь ещё и сохраняло мобильную проблему: на телефоне промо по-прежнему шло первым, а это никогда не задумывалось. Перестановка разметки исправляет порядок чтения при любой ширине и не требует CSS вообще, потому что grid и так помещает первого потомка в первую дорожку.