Содержание: Краткое содержание Об авторе Благодарности О рецензентах Предисловие Какие темы рассматриваются в этой книге
Что необходимо знать, прежде чем приступать к чтению
Целевая аудитория книги
Соглашения
Отзывы читателей
Опечатки
Нарушение авторских прав
Вопросы
От издательства Глава 1. Знакомство с HTML5, CSS3 и адаптивным веб-дизайном 1.1. Почему важна поддержка смартфонов (а устаревших версий Internet Explorer - нет)
1.2. Бывают ли ситуации, когда адаптивный веб-дизайн не станет правильным выбором?
1.3. Определение адаптивного веб-дизайна
1.4. Почему следует отдавать предпочтение именно адаптивному веб-дизайну?
1.5. Примеры адаптивного веб-дизайна
Инструменты для тестирования веб-страниц в разных областях просмотра
Онлайн-источники вдохновения
1.6. Преимущества HTML5
Экономия времени и кода благодаря HTML5
Новые семантически значимые элементы тегов HTML5
1.7. CSS3 делает возможным адаптивный веб-дизайн и многое другое
Важный момент: применение CSS3 не приведет к каким-либо нарушениям!
Как CSS3 позволяет решать повседневные задачи, связанные с дизайном?
1.8. Смотри, мама, нет изображений!
1.9. Можно ли реализовать потенциал HTML5 и CSS уже сегодня?
1.10. Адаптивный веб-дизайн - это не чудодейственное средство
1.11. Как объяснить заказчикам, что сайты не должны выглядеть одинаково во всех браузерах
1.12. Резюме
Глава 2. Медиазапросы: поддержка разных областей просмотра 2.1. Медиазапросы можно использовать уже сегодня
2.2. Почему адаптивным веб-дизайнам необходимы медиазапросы?
Синтаксис медиазапросов
Что позволяют проверить медиазапросы?
Использование медиазапросов для изменения дизайна
Наилучший способ загрузки медиазапросов для адаптивных веб-дизайнов
2.3. Наш первый адаптивный веб-дизайн
Не пугайтесь, но наш дизайн имеет фиксированную ширину
Адаптивные веб-дизайны: делаем изображения как можно более экономичными
Обрезка содержимого в меньших по размеру областях просмотра
2.4. Как сделать так, чтобы современные мобильные браузеры не изменяли автоматически размер нашей страницы
2.5. Подстраиваем дизайн под области просмотра с разной шириной
2.6. В адаптивных веб-дизайнах первым всегда должно идти содержимое
2.7. Медиазапросы - это лишь часть решения
2.8. Резюме
Глава 4. Использование «резиновых» макетов 3.1. Фиксированные макеты не ориентированы на будущее
3.2. Почему для адаптивных веб-дизайнов необходимы пропорциональные макеты
3.3. Преобразование дизайна на основе фиксированного макета в дизайн на основе пропорционального макета
Формула для запоминания
Задание контекста для пропорциональных элементов
Всегда важно помнить о контексте
3.4. Использование единиц em вместо пикселов для задания размеров верстки
3.5. «Резиновые» изображения
Как сделать так, чтобы изображения масштабировались относительно области просмотра
Приоритетные правила для конкретных изображений
«Притормаживаем» «резиновые» изображения
Невероятно универсальное свойство max-width
3.6. Обеспечение разных по величине изображений для разных по размеру экранов
Установка Adaptive Images
Размещение фоновых изображений в другом месте
3.7. Где «резиновые» сетки и медиазапросы объединяются друг с другом
3.8. Сеточные системы CSS
3.9. Резюме
Глава 4. HTML5 для адаптивных веб-дизайнов 4.1. Какие части HTML5 можно использовать уже сегодня?
Большинство сайтов может быть написано на HTML5
Полизаполнения, прослойки и Modernizr
4.2. Как писать HTML5-страницы
Эффект экономии от использования HTML5
Разумный подход к написанию HTML5-разметки
Приветствуем великий тег <a>
Устаревшие HTML-функции
4.3. Новые семантические HTML5-элементы
Элемент <section>
Элемент <nav>
Элемент <article>
Элемент <aside>
Элемент <hgroup>
Элемент <header>
Элемент <footer>
Элемент <address>
4.4. Практическое использование структурных элементов HTML5
4.5. HTML5-семантика уровня текста
Элемент <b>
Элемент <em>
Элемент <i>
Применение семантики уровня текста в нашей разметке
4.6. Обеспечение большей доступности для вашего сайта с помощью WAI-ARIA
4.7. Вложение мультимедиа
4.8. Добавление видео и аудио с использованием HTML5
Обеспечение альтернативных файлов-источников
Резервные варианты для устаревших браузеров
Теги <audio> и <video> работают почти одинаково
4.9. Адаптивное видео
4.10. Автономные веб-приложения
Вкратце об автономных веб-приложениях
Делаем веб-страницы доступными в автономном режиме
Понятие файла манифеста
Автоматическое добавление страниц в кэш
О комментарии с указанием номера версии
Просмотр сайта в автономном режиме
Устранение неполадок с автономными веб-приложениями
4.11. Резюме
Глава 5. CSS3: селекторы, типографика и цветовые режимы 5.1. Что CSS3 предлагает разработчикам клиентских приложений
Поддержка CSS3 в Internet Explorer версии от 6 до 8
Использование CSS3 для дизайна и разработки страниц в браузере
5.2. Анатомия CSS-правил
5.3. Префиксы поставщиков и их использование
5.4. Легко реализуемые и полезные CSS3-трюки
Множественные колонки CSS3 для адаптивных веб-дизайнов
Перенос слов
5.5. Новые CSS3-селекторы и их использование
Селекторы атрибутов CSS3
Селекторы атрибутов CSS3 с совпадениями по подстроке
Практический пример из реальной жизни
Структурные псевдоклассы CSS3
Селектор :last-child
Селектор :nth-child
Принцип работы :nth-правил
Селектор псевдокласса отрицания (:not)
Изменения в псевдоэлементах
5.6. Пользовательская веб-типографика
CSS-правило @font-face
Реализация веб-шрифтов с помощью @font-face
5.7. Помогите - мои заголовки с применением CSS3-правила @font-face выглядят неаккуратно
5.8. Новые цветовые форматы CSS3 и альфа-прозрачность
RGB-цвет
HSL-цвет
Значения резервных цветов для Internet Explorer версий 6, 7 и 8
Альфа-каналы
5.9. Резюме
Глава 6. Великолепная эстетика с использованием CSS3 6.1. Создание теней, отбрасываемых текстом, с помощью CSS3
Допустимые шестнадцатеричные, HSL- и RGB-значения цветов
Пикселы, единицы em или rem
Предотвращение отбрасывания текстом тени
Создание эффекта рельефного текста
Множественные тени, отбрасываемые текстом
6.2. Создание теней, отбрасываемых блочными элементами
Внутренняя тень
Множественные тени
6.3. Фоновые градиенты
Линейные фоновые градиенты
Радиальные фоновые градиенты
Повторяющиеся градиенты
6.4. Фоновые градиентные узоры
6.5. Кое-какие соображения насчет CSS3
6.6. Сводим воедино CSS3-свойства
6.7. Множественные фоновые изображения
Размеры фоновых изображений
Позиционирование фоновых изображений
Сокращенный способ определения фона
6.8. Прочие CSS3-свойства
6.9. Масштабируемые значки, идеально подходящие для адаптивных веб-дизайнов
6.10. Резюме
Глава 7. CSS3-переходы, трансформации и анимации 7.1. Что такое CSS3-переходы и как мы можем их использовать
Свойства, используемые для объявления переходов
Собирательное свойство transition
Применение разных по длительности эффектов перехода к различным свойствам
Понятие временных функций
Занятные переходы для адаптивных сайтов
7.2. 2D-трансформации CSS3
Что можно трансформировать?
scale
translate
rotate
skew
matrix
Свойство transform-origin
7.3. Вкратце об обеспечении 3D-трансформаций CSS3
Анализ 3D-эффекта
3D-трансформации не готовы к повсеместному внедрению
7.4. Анимация с помощью CSS3
7.5. Резюме
Глава 8. Покорение форм с помощью HTML5 и CSS3 8.1. HTML5-формы
Понятие составных частей HTML5-форм
placeholder
required
autofocus
autocomplete
list (и ассоциированный элемент <datalist>)
Типы полей ввода HTML5
email
number
url
tel
search
pattern
color
Типы полей ввода date и time
date
month
week
time
datetime и datetime-local
range
8.2. Добавление полизаполнений для браузеров, не поддерживающих требуемые функции
8.3. Стилизация HTML5-форм с помощью CSS3
8.4. Резюме
Глава 9. Решение кросс-браузерных проблем с адаптивностью 9.1. Прогрессивное улучшение против плавного сокращения возможностей
9.2. Следует ли вам заботиться о том, чтобы сайт работал в устаревших версиях Internet Explorer?
Статистика
Личный выбор
9.3. Modernizr - «швейцарский армейский нож» разработчика клиентских приложений
Устранение проблем со стилизацией с помощью Modernizr
Modernizr добавляет поддержку HTML5-элементов в устаревшие версии браузера Internet Explorer
Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
Условная загрузка с помощью Modernizr
9.4. Преобразование списка навигационных ссылок в раскрывающееся меню (условно)
9.5. Устройства с экранами высокого разрешения (будущее)
9.6. Резюме
