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

. . . . . . . . . . . . . 24
Укрощение изображений . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Ввод медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
Несовершенство нашего примера . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Итоги. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

Глава 2. Создание HTML-разметки..............................................................38
Правильное начало работы с HTML‑страницами . . . . . . . . . . . . . . . . . . . . . . . . . 40
Элемент doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Тег html и атрибут lang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Кодировка символов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Оглавление

7

Добрый 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

8

Оглавление

Глава 3. Медиазапросы — поддержка различных окон просмотра ...65
Метатег viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Зачем нужны медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Основная условная логика в CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Синтаксис медиазапроса . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Медиазапросы в тегах link. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Медиазапросы с использованием правила @import . . . . . . . . . . . . . . . . 71
Медиазапросы в файле CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Инверсия логики медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Объединение медиазапросов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Ряд различных медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Повседневные медиазапросы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Что можно тестировать с помощью медиазапросов . . . . . . . . . . . . . . . . 73
Использование медиазапросов для изменения веб-дизайна. . . . . . . . . . . . . . . 74
Расширенные рекомендации по медиазапросам . . . . . . . . . . . . . . . . . . . . . . . . . 77
Организация медиазапросов. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Практические аспекты разделения --">