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

Description

Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима! Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS. Краткое оглавление Об авторе О научных редакторах Предисловие Для кого эта книга Структура Что нужно для работы с книгой Загрузка файлов с примерами кода Цветные изображений Типографские соглашения От издательства 1. Основы отзывчивого веб-дизайна Браузеры и устройства Что такое отзывчивый дизайн Коротко об отзывчивом веб-дизайне Поддержка браузерами Текстовые редакторы Инструменты для разработки софта Первый пример отзывчивого дизайна Базовый файл HTML Укрощение изображений Ввод медиазапросов Несовершенство нашего примера Итоги 2. Создание HTML-разметки Правильное начало работы с HTML‑страницами Элемент doctype Тег html и атрибут lang Кодировка символов Добрый HTML5 Разумный подход к HTML-разметке Да здравствует могущественный тег Новые семантические элементы в HTML5 Элемент main Элемент section Элемент nav Элемент article Элемент aside Элемент header Элемент footer Алгоритм схемы HTML5 Замечания относительно элементов h1–h6 Элемент Элемент Элемент Элементы и  Элементы и  Элемент Семантика HTML на уровне текста Элемент Элемент Элемент Элемент Элемент Устаревшие функции HTML Практическое применение HTML‑элементов Использование WCAG и WAI-ARIA для повышения доступности веб‑приложений WCAG WAI-ARIA Медиавозможности, встроенные в HTML5 Добавление видео и аудио в разметку HTML Отзывчивое HTML5-видео и iFrames Итоги Упражнение 3. Медиазапросы — поддержка различных окон просмотра Метатег viewport Зачем нужны медиазапросы Основная условная логика в CSS Синтаксис медиазапроса Медиазапросы в тегах link Медиазапросы с использованием правила @import Медиазапросы в файле CSS Инверсия логики медиазапросов Объединение медиазапросов Ряд различных медиазапросов Повседневные медиазапросы Что можно тестировать с помощью медиазапросов Использование медиазапросов для изменения веб-дизайна Расширенные рекомендации по медиазапросам Организация медиазапросов Практические аспекты разделения медиазапросов Вложение медиазапросов через встраивание Что делать — объединять медиазапросы или же записывать их там, где они пригодятся? Спецификация Media Queries Level 4 Медиа-функции взаимодействия со страницей Медиа-функция prefers-color-scheme Итоги 4. Fluid Layout, Flexbox и отзывчивые изображения Преобразование фиксированного пиксельного дизайна в пропорциональный резиновый макет Зачем нужен Flexbox Представляем Flexbox Тернистый путь Flexbox Кому-то все еще нужны префиксы Возможность динамического изменения Различные макеты Flexbox внутри разных медиазапросов Свойство inline-flex Свойства выравнивания, предоставляемые Flexbox Простой зафиксированный подвал Изменение порядка следования исходных элементов Свертка flex-элементов Итоги по Flexbox Отзывчивые изображения Проблема, присущая отзывчивым изображениям Простое переключение разрешения с помощью srcset Более совершенный вариант переключения с помощью srcset и sizes Управление элементом picture Итоги 5. CSS Grid Что такое CSS Grid и какие проблемы она решает Базовый синтаксис Grid Терминология, специфичная для Grid Настройка сетки Явное и неявное позиционирование элементов Размещение и изменение размера элементов сетки Свойство gap Функция repeat() Единица fr Размещение элементов в сетке Ключевое слово span Ключевое слово dense Именованные линии сетки Свойство grid-template-areas Применение ваших знаний на практике Ключевые слова auto-fit и auto-fill Функция minmax() Сокращения в синтаксисе Сокращение grid-template Сокращение grid Итоги 6. CSS-селекторы, типографика, цветовые режимы и многое другое Селекторы, единицы измерения и возможности Анатомия правила CSS Псевдоэлементы и псевдоклассы Селекторы CSS Level 3 и как их использовать Структурные псевдоклассы Отзывчивые меры длины, выражаемые в процентных отношениях применительно к окнам просмотра (vmax, vmin, vh, vw) Функция calc() Пользовательские свойства CSS Использование @supports для создания альтернативных вариантов Веб-типографика Системные шрифты CSS-правило @font-face Реализация веб-шрифтов с помощью @font-face Оптимизация загрузки шрифтов с помощью @font-face Вариативные шрифты Форматы цвета в CSS и альфа‑прозрачность Цвет в формате RGB Цвет в формате HSL Итоги 7. Потрясающая эстетика с помощью CSS Создание теней для текста средствами CSS Если размытие не нужно, его значение можно опустить Создание теней для блоков Тень внутри элемента Создание нескольких теней Понятие протяженности Градиентные фоны Запись линейного градиента Радиальные градиентные фоны Удобные ключевые слова «распространения» для задания размеров отзывчивых конструкций Повторяющиеся градиенты Паттерны градиентных фонов Использование нескольких фоновых изображений Размер фона Позиционирование фона Краткая запись настроек фона Фоновые изображения с высоким разрешением CSS-фильтры Доступные CSS-фильтры Объединение CSS-фильтров Предупреждения, касающиеся CSS‑производительности CSS-свойство clip-path Свойство clip-path с URL-адресом Базовые формы CSS Анимация с помощью свойства clip-path Изображение в качестве маски Пример изображения-маски Свойство mix-blend-mode Итоги 8. SVG и независимость от разрешения Краткая история SVG Изображение — считываемый веб‑документ Корневой элемент SVG Пространство имен Теги title и desc Тег defs Элемент g Фигуры SVG SVG-пути Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений Сервисы SVG-значков экономят время Вставка SVG-графики в веб-страницы Использование тега img Использование тега object Вставка SVG-графики в качестве фонового изображения Краткое отступление о URI-идентификаторах данных Создание спрайтов изображений Непосредственная вставка SVG Повторное использование графических объектов из символов Встраиваемая в код SVG-графика позволяет задавать разные цвета в разных контекстах Изменение цветов SVG-изображений с помощью пользовательских свойств CSS Повторное использование графических объектов из внешних источников На что влияет способ вставки SVG‑данных? Особенности браузеров Дополнительные возможности и особенности технологии SVG SMIL-анимация Задание стилей SVG с помощью внешней таблицы стилей Задание стилей SVG с помощью внутренних стилей Анимация SVG-графики с помощью CSS Анимация SVG-графики с помощью JavaScript Простой пример анимации SVG-графики с помощью GreenSock Оптимизация SVG Использование SVG в качестве фильтров Медиазапросы внутри SVG Советы по внедрению Итоги Дополнительные ресурсы 9. Переходы, преобразование и анимация Что такое CSS-переходы, и как ими можно воспользоваться Свойства перехода Краткая форма записи перехода с помощью свойства transition Переходы различных свойств за разные периоды времени Функции развития процесса перехода по времени 2D-преобразования в CSS Масштабирование (scale) Перемещение (translate) Поворот (rotate) Наклон (skew) Матрица (matrix) Свойство transform-origin 3D-преобразования в CSS Свойство transform3d Использование преобразований при постепенном улучшении на примере функции translate3d Эффекты анимации с помощью CSS Свойство animation-fill-mode Упражнения и практика Итоги 10. Освоение форм с помощью HTML5 и CSS Формы HTML5 Основные сведения о компонентах формы HTML5 Атрибут placeholder Стилизация указателя ввода с помощью свойства caret-color Атрибут required Атрибут autofocus Атрибут autocomplete Атрибут list и элемент datalist Типы вводимой информации, определяемые HTML5 Тип email Тип number Тип url Тип tel Тип search Атрибут pattern Тип color Типы date и time Тип range Стилизация форм HTML5 с помощью CSS Обозначение полей, требующих обязательного заполнения Создание эффекта заливки фона Итоги 11. Бонусные техники и советы Разбивка длинных URL-адресов Обрезка текста Создание панелей с горизонтальной прокруткой Создание панелей с горизонтальной прокруткой с помощью Grid Модуль CSS Scroll Snap Свойство scroll-snap-type Свойство scroll-snap-align Свойство scroll-padding Плавная прокрутка с помощью свойства scroll‑behavior Привязка брейкпоинтов CSS к JavaScript Обкатка веб-дизайна в браузере на самых ранних стадиях Тестирование на реальных устройствах Использование принципа постепенного улучшения Определение матрицы браузерной поддержки Функциональное, но не эстетическое единообразие Выбор поддерживаемых браузеров Создание нескольких уровней пользовательского восприятия Отказ от использования сред разработки CSS при создании конечного продукта Скрытие, показ и загрузка содержимого для разных окон просмотра Средства контроля качества кода Повышение производительности Инструменты для оценки производительности В преддверии великих перемен Итоги