Бен Фрэйн Отзывчивый дизайн на HTML5 и CSS3 для любых устройств Третье издание Ф86 Фрэйн Бен Ф86 Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд. — СПб.: Питер, 2022. — 336 с.: ил. — (Серия «Библиотека программиста»). Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS. 16+ ( от 29 декабря 2010 г. № 436-ФЗ.) получены по соглашению с Packt Publishing. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме владельцев авторских прав. англ. © Packt Publishing 2020. First published in the English language under the title ‘Responsive Web Design with HTML5 and CSS3 — Third Edition — 9781839211560)’ © Перевод на русский язык ООО Издательство «Питер», 2022 © Издание на русском языке, оформление ООО Издательство «Питер», 2022 © Серия «Библиотека программиста», 2022 Краткое оглавление Предисловие......................................................................................................16 . Основы отзывчивого веб-дизайна................................................19 . Создание HTML-разметки..............................................................38 . Медиазапросы — поддержка различных окон просмотра.....65 . Fluid Layout, Flexbox и отзывчивые изображения.......................85 . CSS Grid........................................................................................... 121 . CSS-селекторы, типографика, цветовые режимы и многое другое........................................................................................ 149 . Потрясающая эстетика с помощью CSS.................................. 187 . SVG и независимость от разрешения....................................... 219 . Переходы, преобразование и анимация................................. 253 . Освоение форм с помощью HTML5 и CSS............................ 281 . Бонусные техники и советы....................................................... 309 Краткое оглавление . ........................................................................................5 Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 О научных редакторах. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Предисловие......................................................................................................16 Для кого эта книга . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Структура. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Что нужно для работы с книгой. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Загрузка файлов с примерами кода. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Цветные изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Типографские соглашения. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 От издательства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . Основы отзывчивого веб-дизайна . .............................................19 Браузеры и устройства. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Что такое отзывчивый дизайн . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Коротко об отзывчивом веб-дизайне . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Поддержка браузерами. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Текстовые редакторы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Инструменты для разработки софта. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Первый пример отзывчивого дизайна. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Базовый файл HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Укрощение изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Ввод медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Несовершенство нашего примера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 . Создание HTML-разметки..............................................................38 Правильное начало работы с HTML‑страницами . . . . . . . . . . . . . . . . . . . . . . . . . 40 Элемент doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Тег html и атрибут lang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Кодировка символов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Добрый HTML5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Разумный подход к HTML-разметке . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Да здравствует могущественный тег !. . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Новые семантические элементы в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Элемент main . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Элемент section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Элемент nav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Элемент article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Элемент aside. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Элемент header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Элемент footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Алгоритм схемы HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Замечания относительно элементов h1–h6 . . . . . . . . . . . . . . . . . . . . . . . . 48 Элемент

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Элемент

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Элемент

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Элементы
и
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Элементы
и
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Элемент
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Семантика HTML на уровне текста. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Элемент . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Устаревшие функции HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Практическое применение HTML‑элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Использование WCAG и WAI-ARIA для повышения доступности веб‑приложений. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 WCAG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 WAI-ARIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Медиавозможности, встроенные в HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Добавление видео и аудио в разметку HTML. . . . . . . . . . . . . . . . . . . . . . . 59 Отзывчивое HTML5-видео и iFrames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 Упражнение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 . Медиазапросы — поддержка различных окон просмотра ...65 Метатег viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Зачем нужны медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Основная условная логика в CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Синтаксис медиазапроса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Медиазапросы в тегах link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Медиазапросы с использованием правила @import . . . . . . . . . . . . . . . . 71 Медиазапросы в файле CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Инверсия логики медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Объединение медиазапросов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Ряд различных медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Повседневные медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Что можно тестировать с помощью медиазапросов . . . . . . . . . . . . . . . . 73 Использование медиазапросов для изменения веб-дизайна. . . . . . . . . . . . . . . 74 Расширенные рекомендации по медиазапросам . . . . . . . . . . . . . . . . . . . . . . . . . 77 Организация медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Практические аспекты разделения медиазапросов . . . . . . . . . . . . . . . . . 78 Вложение медиазапросов через встраивание. . . . . . . . . . . . . . . . . . . . . . 79 Что делать — объединять медиазапросы или же записывать их там, где они пригодятся?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Спецификация Media Queries Level 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Медиафункции взаимодействия со страницей . . . . . . . . . . . . . . . . . . . . . . 82 Медиафункция prefers-color-scheme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 . Fluid Layout, Flexbox и отзывчивые изображения .....................85 Преобразование фиксированного пиксельного дизайна в пропорциональный резиновый макет . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Зачем нужен Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Представляем Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Тернистый путь Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Кому-то все еще нужны префиксы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Возможность динамического изменения . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Различные макеты Flexbox внутри разных медиазапросов . . . . . . . . . . . . . . . . . 98 Свойство inline-flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Свойства выравнивания, предоставляемые Flexbox . . . . . . . . . . . . . . . 100 Простой зафиксированный подвал. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Изменение порядка следования исходных элементов . . . . . . . . . . . . . 109 Свертка flex-элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Итоги по Flexbox. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Отзывчивые изображения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Проблема, присущая отзывчивым изображениям. . . . . . . . . . . . . . . . . 116 Простое переключение разрешения с помощью srcset. . . . . . . . . . . . 117 Более совершенный вариант переключения с помощью srcset и sizes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Управление элементом picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 . 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 . CSS-селекторы, типографика, цветовые режимы и многое другое ............................................................................................ 149 Селекторы, единицы измерения и возможности. . . . . . . . . . . . . . . . . . . . . . . . . 150 Анатомия правила CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Псевдоэлементы и псевдоклассы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Селекторы CSS Level 3 и как их использовать . . . . . . . . . . . . . . . . . . . . 152 Структурные псевдоклассы. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Отзывчивые меры длины, выражаемые в процентных отношениях, применительно к окнам просмотра (vmax, vmin, vh, vw). . . . . . . . . . . . 166 Функция calc() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Пользовательские свойства CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Использование @supports для создания альтернативных вариантов . . . 171 Веб-типографика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Системные шрифты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 CSS-правило @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Реализация веб-шрифтов с помощью @font-face . . . . . . . . . . . . . . . . . 175 Оптимизация загрузки шрифтов с помощью @font-face . . . . . . . . . . . 176 Вариативные шрифты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Форматы цвета в CSS и альфа‑прозрачность . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Цвет в формате RGB. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Цвет в формате HSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 . Потрясающая эстетика с помощью CSS ................................. 187 Создание теней для текста средствами CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Если размытие не нужно, его значение можно опустить . . . . . . . . . . . 189 Создание теней для блоков. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Тень внутри элемента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Создание нескольких теней . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Понятие протяженности. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Градиентные фоны. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Запись линейного градиента . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Радиальные градиентные фоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Удобные ключевые слова «распространения» для задания размеров отзывчивых конструкций . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Повторяющиеся градиенты. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197 Паттерны градиентных фонов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 Использование нескольких фоновых изображений . . . . . . . . . . . . . . . . . . . . . 199 Размер фона. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Позиционирование фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Краткая запись настроек фона . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Фоновые изображения с высоким разрешением . . . . . . . . . . . . . . . . . 202 CSS-фильтры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Доступные CSS-фильтры . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Объединение CSS-фильтров. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208