Отзывчивый дизайн на HTML5 и CSS3 для любых устройств: Создавайте адаптивные веб-сайты, соответствующие требованиям завтрашнего дня, используя новейшие технологии HTML5 и CSS. 3 изд

Краткое оглавление

Об авторе

О научных редакторах

Предисловие

Для кого эта книга

Структура

Что нужно для работы с книгой

Загрузка файлов с примерами кода

Цветные изображений

Типографские соглашения

От издательства

1. Основы отзывчивого веб-дизайна

Браузеры и устройства

Что такое отзывчивый дизайн

Коротко об отзывчивом веб-дизайне

Поддержка браузерами

Текстовые редакторы

Инструменты для разработки софта

Первый пример отзывчивого дизайна

Базовый файл HTML

Укрощение изображений

Ввод медиазапросов

Несовершенство нашего примера

Итоги

2. Создание HTML-разметки

Правильное начало работы с HTML‑страницами

Элемент doctype

Тег html и атрибут lang

Кодировка символов

Добрый HTML5

Разумный подход к HTML-разметке

Да здравствует могущественный тег <a>

Новые семантические элементы в HTML5

Элемент main

Элемент section

Элемент nav

Элемент article

Элемент aside

Элемент header

Элемент footer

Алгоритм схемы HTML5

Замечания относительно элементов h1–h6

Элемент <div >

Элемент <p >

Элемент <blockquote >

Элементы <figure > и <figcaption >

Элементы <details > и <summary >

Элемент <address >

Семантика HTML на уровне текста

Элемент <span >

Элемент <b >

Элемент <strong >

Элемент <em >

Элемент <i >

Устаревшие функции 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 при создании конечного продукта

Скрытие, показ и загрузка содержимого для разных окон просмотра

Средства контроля качества кода

Повышение производительности

Инструменты для оценки производительности

В преддверии великих перемен

Итоги

Вы фуллстек-разработчик, которому нужно развивать навыки фронтенд-разработки? Или фронтенд-разработчик, ищущий качественный обзор современных возможностей HTML и CSS? А может, вы создаете свой веб-сайт и хотите сделать его отзывчивым? Тогда, эта книга вам просто необходима!

 Со времени выхода предыдущего издания многое изменилось, теперь отзывчивый дизайн — это не новая технология, а стандарт разработки на HTML5 и CSS3. Неформальный и открытый стиль автора позволяет быстро освоить все возможности современного веб-дизайна. Вы получите практические знания о SVG, разметке HTML, создании потрясающей эстетики и эффектов с помощью CSS, переходах, преобразованиях и анимациях и многом другом. Если же вы опытный веб-игрок, то смело переходите к новым темам — гридам (CSS Grid layout) или вариативным шрифтам. К концу книги вы не только получите полное представление об отзывчивом веб-дизайне и возможностях последних версий HTML5 и CSS, но и узнаете, как максимально эффективно использовать эти знания на практике. Все, что нужно для начала работы, — это представление о том, что такое HTML и CSS.