Бен Фрэйн - Отзывчивый дизайн на HTML5 и CSS3 для любых устройств

медиазапросов . . . . . . . . . . . . . . . . . 78
Вложение медиазапросов через встраивание. . . . . . . . . . . . . . . . . . . . . . 79
Что делать — объединять медиазапросы или же записывать их там,
где они пригодятся?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Спецификация Media Queries Level 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Медиафункции взаимодействия со страницей . . . . . . . . . . . . . . . . . . . . . . 82
Медиафункция prefers-color-scheme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Глава 4. Fluid Layout, Flexbox и отзывчивые изображения .....................85
Преобразование фиксированного пиксельного дизайна
в пропорциональный резиновый макет . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Зачем нужен Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Представляем Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Тернистый путь Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Кому-то все еще нужны префиксы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Возможность динамического изменения . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Различные макеты Flexbox внутри разных медиазапросов . . . . . . . . . . . . . . . . . 98
Свойство inline-flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
Свойства выравнивания, предоставляемые Flexbox . . . . . . . . . . . . . . . 100
Простой зафиксированный подвал. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Изменение порядка следования исходных элементов . . . . . . . . . . . . . 109

Оглавление

9
Свертка flex-элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Итоги по Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Отзывчивые изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Проблема, присущая отзывчивым изображениям. . . . . . . . . . . . . . . . . 116
Простое переключение разрешения с помощью srcset. . . . . . . . . . . . 117
Более совершенный вариант переключения с помощью
srcset и sizes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Управление элементом picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Глава 5. CSS Grid . ........................................................................................ 121
Что такое CSS Grid и какие проблемы она решает . . . . . . . . . . . . . . . . . . . . . 121
Базовый синтаксис Grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Терминология, специфичная для Grid. . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Настройка сетки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Явное и неявное позиционирование элементов . . . . . . . . . . . . . . . . . . 127
Размещение и изменение размера элементов сетки . . . . . . . . . . . . . . . . . . . . 130
Свойство gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Функция repeat(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Единица fr. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Размещение элементов в сетке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Ключевое слово span . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Ключевое слово dense . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Именованные линии сетки. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Свойство grid-template-areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Применение ваших знаний на практике . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Ключевые слова auto-fit и auto-fill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Функция minmax(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Сокращения в синтаксисе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Сокращение grid-template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Сокращение grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Глава 6. CSS-селекторы, типографика, цветовые режимы
и многое другое ............................................................................................ 149
Селекторы, единицы измерения и возможности. . . . . . . . . . . . . . . . . . . . . . . . . 150
Анатомия правила CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Псевдоэлементы и псевдоклассы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Селекторы CSS Level 3 и как их использовать . . . . . . . . . . . . . . . . . . . . 152

10

Оглавление

Структурные псевдоклассы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Отзывчивые меры длины, выражаемые в процентных отношениях,
применительно к окнам просмотра (vmax, vmin, vh, vw). . . . . . . . . . . . 166
Функция calc() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Пользовательские свойства CSS . . . . . . . . . . . . --">