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

Об авторе....5

О рецензентах....7

Предисловие....10

О чем эта книга....10

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

Для кого написана эта книга....12

Соглашения....13

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

Итак, вперед к неизведанному....16

Определение адаптивного веб-дизайна....17

Установка уровней поддержки браузеров....18

Первый пример придания адаптивности....22

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

Резюме....43

2. Медиазапросы — поддержка различных окон просмотра....45

Зачем в адаптивном веб-дизайне нужны медиазапросы....47

Синтаксис медиазапроса....49

Объединение медиазапросов....52

Использование медиазапросов для изменения дизайна....58

Рассмотрение аспектов организации и разработки медиазапросов....62

Как поступать — объединять медиазапросы или же записывать их там, где они пригодятся?....66

Метатег viewport....69

Спецификация Media Queries Level 4....73

Резюме....80

3. Динамически изменяемые разметки и адаптивные изображения....81

Преобразование дизайна с фиксированными размерами в пикселах в подстраиваемую пропорциональную разметку....83

Представляем Flexbox....93

Разбираемся с возможностью динамического изменения....97

Адаптивные изображения....132

Режиссура, применяемая в отношении элемента picture....138

Резюме....141

4. Использование HTML5 в целях разработки адаптивного веб-дизайна....142

Разметку на HTML5 понимают все современные браузеры....144

Как правильно написать начало страницы на HTML5....145

Покладистость HTML5....148

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

Семантика HTML5 на текстовом уровне....165

Устаревшие функции HTML....167

Практическое применение элементов HTML5....168

Использование WCAG и WAI-ARIA для повышения доступности веб-приложений....170

Медиавозможности, встроенные в HTML5....175

Адаптивное HTML5-видео и iFrames....180

Замечание относительно приоритетности автономной работы....182

Резюме....183

5. CSS3. Селекторы, разметка, цветовые режимы и новые возможности....185

Разве можно знать абсолютно все?....186

Анатомия правила CSS....187

Простые и полезные трюки CSS....188

Перенос слов на новые строки....192

Предоставление возможности разветвления функций в CSS....199

Новые селекторы в CSS3 и порядок их использования....206

Структурные псевдоклассы CSS3....213

Пользовательские свойства и переменные в CSS....229

CSS-функция calc....231

Селекторы CSS Level 4....231

Шрифтовое веб-оформление....234

Новые форматы цвета в CSS3 и альфа-прозрачность....241

Резюме....247

6. Создание эстетически привлекательных эффектов средствами CSS3....249

Создание теней для текста средствами CSS3....250

Создание теней для блоков....254

Градиентные фоны....257

Повторяющиеся градиенты....267

Узоры из градиентных фонов....268

Использование нескольких фоновых изображений....270

Фоновые изображения с высоким разрешением....275

CSS-фильтры....277

Предупреждения, касающиеся CSS-производительности....288

Резюме....291

7. Использование SVG для достижения независимости от разрешения....292

Краткая история SVG....295

Графика, представляющая собой документ....296

Создание SVG-графики с помощью популярных пакетов и сервисов редактирования изображений....303

Вставка SVG-графики в веб-страницы....305

Непосредственная вставка SVG....314

Что можно делать с любым методом вставки SVG-данных....321

Дополнительные возможности и особенности технологии SVG....324

Анимация SVG-графики с помощью JavaScript....333

Оптимизация SVG....337

Использование SVG в качестве фильтров....338

Заметки по медиазапросам внутри SVG....342

Резюме....346

8. Переходы, преобразования и анимация....348

Что такое CSS3-переходы и как ими можно воспользоваться....349

CSS3 2D-преобразования....360

CSS3 3D-преобразования....373

Создание эффектов анимации средствами CSS3....385

Резюме....392

9. Обуздание форм с помощью HTML5 и CSS3....394

Формы HTML5....395

Основные сведения о компонентах формы HTML5....397

Типы вводимой информации, определяемые в HTML5....405

Как воспользоваться полифиллами для тех браузеров, которые не поддерживают новые свойства....422

Придание формам HTML5 стилевого оформления с помощью CSS3....425

Резюме....435

10. Подходы к адаптивному веб-дизайну....437

Обкатка дизайна в браузере на самых ранних стадиях....438

Просмотр и обкатка дизайна на реальных устройствах....440

Использование принципа постепенного усложнения....441

Определение матрицы браузерной поддержки....443

Создание нескольких уровней пользовательского восприятия....446

Привязка контрольных точек CSS к JavaScript....447

Отказ от использования сред разработки CSS при создании конечного продукта....451

Выработка наиболее практичных решений....452

Использование как можно более простого кода....457

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

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

Производительность....462

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

Резюме....466

Приходилось ли вам создавать два сайта: один для мобильных, а другой — для более крупных устройств? Или, может быть, у вас уже есть первый продукт в стиле адаптивного веб-дизайна, но вы пока не можете собрать в нем все в единое целое? Если так, то второе издание этой книги даст вам все, что нужно для перевода ваших сайтов на следующий, более высокий уровень.

Чтобы следовать за авторской мыслью, нужны лишь некоторые познания в HTML и CSS, а все, что требуется знать об адаптивном веб-дизайне и создании качественных сайтов, включено в эту книгу!