HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Содержание книги «HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.»:

• 14 Об авторе
• 15 О рецензентах
• 17 Предисловие
  • 17 О чем эта книга
  • 18 Что нужно для работы с книгой
  • 18 Для кого написана эта книга
  • 18 Соглашения
• 20 Глава 1. Основы адаптивного веб-дизайна
  • 20 Итак, вперед к неизведанному
  • 21 Определение адаптивного веб-дизайна
  • 21 Установка уровней поддержки браузеров
  • 24 Первый пример придания адаптивности
    • 24 Наш исходный файл HTML
    • 27 Укрощение изображений
    • 30 Ввод медиазапросов
  • 35 Несовершенство нашего примера
  • 36 Резюме
• 37 Глава 2. Медиазапросы — поддержка различных окон просмотра
  • 38 Зачем в адаптивном веб-дизайне нужны медиазапросы
  • 39 Синтаксис медиазапроса
  • 40 Объединение медиазапросов
    • 41 Медиазапросы с использованием @import
    • 41 Медиазапросы в CSS
    • 42 Что можно тестировать с помощью медиазапросов
  • 43 Использование медиазапросов для изменения дизайна
    • 45 В медиазапрос может быть заключен любой код CSS
    • 46 Медиазапросы для HiDPI-устройств
  • 46 Рассмотрение аспектов организации и разработки медиазапросов
    • 46 Привязка различных CSS-файлов с помощью медиазапросов
    • 47 Практические аспекты разделения медиазапросов
    • 48 Вложение медиазапросов путем их встраивания
  • 48 Как поступать — объединять медиазапросы или же записывать их там, где они пригодятся?
  • 50 Метатег viewport
    • 51 Спецификация Media Queries Level 4
    • 52 Медиасвойство использования сценариев
    • 53 Медиасвойства, связанные с взаимодействием со страницей
    • 54 Медиасвойство hover
    • 54 Медиасвойства среды
  • 55 Резюме
• 56 Глава 3. Динамически изменяемые разметки и адаптивные изображения
  • 57 Преобразование дизайна с фиксированными размерами в пикселах в подстраиваемую пропорциональную разметку
    • 61 Зачем нам нужен Flexbox
    • 62 Линейные блоки и свободное пространство
    • 62 Плавающие элементы (floats)
    • 62 Table и table-cell
  • 63 Представляем Flexbox
    • 63 Тернистый путь к сегодняшнему Flexbox
    • 63 Браузерная поддержка Flexbox
  • 65 Разбираемся с возможностью динамического изменения
    • 65 Текст, безупречно выровненный по вертикали
    • 67 Смещение элементов
    • 68 Изменение порядка следования элементов
    • 69 Различные разметки Flexbox внутри разных медиазапросов
    • 70 inline-flex
    • 71 Свойства выравнивания, имеющиеся у Flexbox
    • 76 Свойство flex
    • 78 Простой зафиксированный подвал
    • 79 Изменение порядка следования исходных элементов
    • 84 Краткое заключение по Flexbox
  • 85 Адаптивные изображения
    • 85 Проблема, присущая адаптивным изображениям
    • 86 Простое переключение разрешения с помощью srcset
    • 87 Более совершенный вариант переключения с использованием атрибутов srcset и sizes
    • 88 Вы что, сказали, что браузер может предпочесть одно изображение другому?
  • 88 Режиссура, применяемая в отношении элемента picture
  • 89 Резюме
• 91 Глава 4. Использование HTML5 в целях разработки адаптивного веб-дизайна
  • 92 Разметку на HTML5 понимают все современные браузеры
  • 93 Как правильно написать начало страницы на HTML5
    • 93 doctype
    • 93 Тег HTML и атрибут lang
    • 94 Указание альтернативных языков
    • 94 Кодировка символов
  • 94 Покладистость HTML5
    • 95 Разумный подход к разметке на HTML5
    • 96 Приветствую могучий тег <a>
  • 96 Новые семантические элементы в HTML5
    • 97 Элемент <main>
    • 98 Элемент <section>
    • 98 Элемент <nav>
    • 98 Элемент <article>
    • 99 Элемент <aside>
    • 99 Элементы <figure> и <figcaption>
    • 100 Элементы <details> и <summary>
    • 101 Элемент <header>
    • 102 Элемент <footer>
    • 102 Элемент <address>
    • 102 Замечания относительно элементов <h1> — <h6>
  • 103 Семантика HTML5 на текстовом уровне
    • 103 Элемент <b>
    • 104 Элемент <em>
    • 104 Элемент <i>
  • 104 Устаревшие функции HTML
  • 105 Практическое применение элементов HTML5
  • 106 Использование WCAG и WAI-ARIA для повышения доступности веб-приложений
    • 106 Руководство по обеспечению доступности веб-контента (WCAG)
    • 107 Стандарт предоставления возможности полноценного использования Интернета людьми с физическими ограничениями (WAI-ARIA)
    • 107 Если вы не в состоянии запомнить более одной рекомендации
    • 108 Развитие стандарта ARIA
  • 108 Медиавозможности, встроенные в HTML5
    • 109 Добавление видео и аудио средствами HTML5
    • 111 Работа audio и video практически ничем не различается
  • 111 Адаптивное HTML5-видео и iFrames
  • 112 Замечание относительно приоритетности автономной работы
  • 113 Резюме
• 114 Глава 5. CSS3. Селекторы, разметка, цветовые режимы и новые возможности
  • 115 Разве можно знать абсолютно все?
  • 115 Анатомия правила CSS
  • 115 Простые и полезные трюки CSS
    • 116 Использование CSS при создании многоколоночных разметок для адаптивных конструкций
  • 119 Перенос слов на новые строки
    • 119 Усечение текста с добавлением многоточия
    • 120 Создание панелей, прокручивающихся по горизонтали
  • 122 Предоставление возможности разветвления функций в CSS
    • 123 Запросы возможностей
    • 124 Комбинирование условий
    • 125 Modernizr
  • 126 Новые селекторы в CSS3 и порядок их использования
    • 126 Селекторы атрибутов в CSS3
    • 127 Селекторы CSS3, соответствующие подстрокам значений атрибутов
    • 129 Особенность выбора по атрибутам
    • 130 Селекторы атрибутов позволяют выбрать элементы, чьи идентификаторы и классы начинаются с цифр
  • 130 Структурные псевдоклассы CSS3
    • 131 Селектор :last-child
    • 131 Селекторы nth-child
    • 132 Усвоение порядка работы nth-правил
    • 135 Выбор на nth-основе в адаптивных веб-конструкциях
    • 137 Селектор отрицания (:not)
    • 138 Селектор пустого элемента (:empty)
    • 139 Работа с :first-line независимо от размеров окна просмотра
  • 139 Пользовательские свойства и переменные в CSS
  • 140 CSS-функция calc
  • 141 Селекторы CSS Level 4
    • 141 Псевдокласс :has
    • 141 Адаптивные меры длины, выражаемые в процентных отношениях применительно к окнам просмотра (vmax, vmin, vh, vw)
  • 142 Шрифтовое веб-оформление
    • 142 CSS-правило @font-face
    • 143 Реализация веб-шрифтов с помощью @font-face
    • 145 Предостережение, касающееся пользовательского шрифтового оформления с применением @font-face в адаптивных веб-конструкциях
  • 146 Новые форматы цвета в CSS3 и альфа-прозрачность
    • 146 Цвет в формате RGB
    • 147 Цвет в формате HSL
    • 148 Альфа-каналы
    • 149 Работа над цветовым оформлением с CSS Color Module Level 4
  • 149 Резюме
• 150 Глава 6. Создание эстетически привлекательных эффектов средствами CSS3
  • 151 Создание теней для текста средствами CSS3
    • 152 Если размытие не нужно, его значение можно опустить
    • 152 Получение нескольких теней для текста
  • 152 Создание теней для блоков
    • 153 Тень внутри элемента
    • 153 Создание нескольких теней
    • 154 Понятие протяженности
  • 155 Градиентные фоны
    • 155 Запись линейного градиента
    • 158 Радиальные градиентные фоны
    • 159 Удобные ключевые слова распространения для задания размеров адаптивных конструкций
  • 160 Повторяющиеся градиенты
  • 160 Узоры из градиентных фонов
  • 162 Использование нескольких фоновых изображений
    • 163 Размер фона
    • 163 Позиция фона
    • 164 Краткий метод записи фона
  • 165 Фоновые изображения с высоким разрешением
  • 165 CSS-фильтры
    • 167 Доступные CSS-фильтры
    • 171 Объединение CSS-фильтров
  • 172 Предупреждения, касающиеся CSS-производительности
  • 174 Резюме
• 175 Глава 7. Использование SVG для достижения независимости от разрешения
  • 177 Краткая история SVG
  • 178 Графика, представляющая собой документ
    • 179 Корневой элемент SVG
    • 180 Пространство имен
    • 180 Теги title и desc
    • 180 Тег defs
    • 180 Элемент g
    • 181 Фигуры SVG
    • 181 SVG-пути
  • 181 Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений
  • 182 Вставка SVG-графики в веб-страницы
    • 183 Использование тега img
    • 183 Использование тега object
    • 184 Вставка SVG-графики в качестве фонового изображения
    • 185 Краткое отступление по поводу URI-идентификаторов данных
    • 186 Создание спрайтов изображений
  • 187 Непосредственная вставка SVG
    • 187 Повторное использование графических объектов из символов
    • 189 Встраиваемая в код SVG-графика позволяет задавать различные цвета в разных контекстах
    • 190 Повторное использование графических объектов из внешних источников
  • 191 Что можно делать с любым методом вставки SVG-данных
  • 192 Дополнительные возможности и особенности технологии SVG
    • 193 SMIL-анимация
    • 194 Задание стилей SVG с помощью внешней таблицы стилей
    • 195 Задание стилей SVG с помощью внутренних стилей
    • 195 Анимация SVG-графики с помощью CSS
  • 197 Анимация SVG-графики с помощью JavaScript
  • 199 Оптимизация SVG
  • 200 Использование SVG в качестве фильтров
  • 202 Заметки по медиазапросам внутри SVG
    • 203 Советы по внедрению
    • 204 Дополнительные ресурсы
  • 204 Резюме
• 205 Глава 8. Переходы, преобразования и анимация
  • 206 Что такое CSS3-переходы и как ими можно воспользоваться
    • 208 Свойства перехода
    • 208 Краткая форма записи перехода с помощью свойства transition
    • 209 Переходы различных свойств за разные периоды времени
    • 209 Основные сведения о функциях развития процесса по времени
    • 211 Развлечение с переходами на адаптивных сайтах
  • 211 CSS32D-преобразования
    • 212 Масштабирование (scale)
    • 213 Перемещение (translate)
    • 215 Вращение (rotate)
    • 216 Наклон (skew)
    • 216 Матрица (matrix)
    • 217 Свойство transform-origin
  • 219 CSS33D-преобразования
    • 222 Свойство transform3d
    • 223 Использование преобразований при постепенном усложнении
  • 226 Создание эффектов анимации средствами CSS3
  • 229 Резюме
• 231 Глава 9. Обуздание форм с помощью HTML5 и CSS3
  • 231 Формы HTML5
  • 233 Основные сведения о компонентах формы HTML5
    • 233 placeholder
    • 234 required
    • 235 autofocus
    • 235 autocomplete
    • 236 Атрибут list и связанный с ним элемент datalist
  • 237 Типы вводимой информации, определяемые в HTML5
    • 238 email
    • 239 number
    • 240 url
    • 242 tel
    • 243 search
    • 243 pattern
    • 244 color
    • 244 Ввод даты и времени
    • 247 range
  • 248 Как воспользоваться полифиллами для тех браузеров, которые не поддерживают новые свойства
  • 249 Придание формам HTML5 стилевого оформления с помощью CSS3
    • 252 Обозначение полей, требующих обязательного заполнения
    • 254 Создание эффекта заливки фона
  • 255 Резюме
• 256 Глава 10. Подходы к адаптивному веб-дизайну
  • 257 Обкатка дизайна в браузере на самых ранних стадиях
  • 258 Просмотр и обкатка дизайна на реальных устройствах
  • 258 Использование принципа постепенного усложнения
  • 259 Определение матрицы браузерной поддержки
    • 260 Функциональное, но не эстетическое единообразие
    • 260 Выбор поддерживаемых браузеров
  • 261 Создание нескольких уровней пользовательского восприятия
  • 261 Привязка контрольных точек CSS к JavaScript
  • 263 Отказ от использования сред разработки CSS при создании конечного продукта
  • 264 Выработка наиболее практичных решений
  • 267 Использование как можно более простого кода
  • 267 Скрытие, показ и загрузка содержимого для всевозможных окон просмотра
  • 269 Средства контроля качества кода
  • 270 Производительность
  • 271 В преддверии великих перемен
  • 272 Резюме