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

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

• 5 Краткое содержание
• 17 Об авторе
• 18 Благодарности
• 19 О рецензентах
• 21 Предисловие
  • 21 Какие темы рассматриваются в этой книге
  • 22 Что необходимо знать, прежде чем приступать к чтению
  • 22 Целевая аудитория книги
  • 22 Соглашения
  • 23 Отзывы читателей
  • 24 Опечатки
  • 24 Нарушение авторских прав
  • 24 Вопросы
• 25 От издательства
• 27 Глава 1. Знакомство с HTML5, CSS3 и адаптивным веб-дизайном
  • 28 1.1. Почему важна поддержка смартфонов (а устаревших версий Internet Explorer — нет)
  • 29 1.2. Бывают ли ситуации, когда адаптивный веб-дизайн не станет правильным выбором?
  • 30 1.3. Определение адаптивного веб-дизайна
  • 31 1.4. Почему следует отдавать предпочтение именно адаптивному веб-дизайну?
  • 31 1.5. Примеры адаптивного веб-дизайна
    • 32 Инструменты для тестирования веб-страниц в разных областях просмотра
    • 39 Онлайн-источники вдохновения
  • 40 1.6. Преимущества HTML5
    • 40 Экономия времени и кода благодаря HTML5
    • 41 Новые семантически значимые элементы тегов HTML5
  • 42 1.7. CSS3 делает возможным адаптивный веб-дизайн и многое другое
    • 43 Важный момент: применение CSS3 не приведет к каким-либо нарушениям!
    • 43 Как CSS3 позволяет решать повседневные задачи, связанные с дизайном?
  • 46 1.8. Смотри, мама, нет изображений!
  • 49 1.9. Можно ли реализовать потенциал HTML5 и CSS3 уже сегодня?
  • 50 1.10. Адаптивный веб-дизайн — это не чудодейственное средство
  • 50 1.11. Как объяснить заказчикам, что сайты не должны выглядеть одинаково во всех браузерах
  • 52 1.12. Резюме
• 53 Глава 2. Медиазапросы: поддержка разных областей просмотра
  • 53 2.1. Медиазапросы можно использовать уже сегодня
  • 54 2.2. Почему адаптивным веб-дизайнам необходимы медиазапросы?
    • 54 Синтаксис медиазапросов
    • 57 Что позволяют проверить медиазапросы?
    • 58 Использование медиазапросов для изменения дизайна
    • 58 Наилучший способ загрузки медиазапросов для адаптивных веб-дизайнов
  • 59 2.3. Наш первый адаптивный веб-дизайн
    • 59 Не пугайтесь, но наш дизайн имеет фиксированную ширину
    • 63 Адаптивные веб-дизайны: делаем изображения как можно более экономичными
    • 65 Обрезка содержимого в меньших по размеру областях просмотра
  • 67 2.4. Как сделать так, чтобы современные мобильные браузеры не изменяли автоматически размер нашей страницы
  • 71 2.5. Подстраиваем дизайн под области просмотра с разной шириной
  • 72 2.6. В адаптивных веб-дизайнах первым всегда должно идти содержимое
  • 77 2.7. Медиазапросы — это лишь часть решения
  • 77 2.8. Резюме
• 79 Глава 4. Использование «резиновых» макетов
  • 80 3.1. Фиксированные макеты не ориентированы на будущее
  • 80 3.2. Почему для адаптивных веб-дизайнов необходимы пропорциональные макеты
  • 81 3.3. Преобразование дизайна на основе фиксированного макета в дизайн на основе пропорционального макета
    • 81 Формула для запоминания
    • 83 Задание контекста для пропорциональных элементов
    • 90 Всегда важно помнить о контексте
  • 93 3.4. Использование единиц em вместо пикселов для задания размеров верстки
  • 95 3.5. «Резиновые» изображения
    • 95 Как сделать так, чтобы изображения масштабировались относительно области просмотра
    • 97 Приоритетные правила для конкретных изображений
    • 99 «Притормаживаем» «резиновые» изображения
    • 100 Невероятно универсальное свойство max-width
  • 101 3.6. Обеспечение разных по величине изображений для разных по размеру экранов
    • 102 Установка Adaptive Images
    • 104 Размещение фоновых изображений в другом месте
  • 106 3.7. Где «резиновые» сетки и медиазапросы объединяются друг с другом
  • 107 3.8. Сеточные системы CSS
  • 113 3.9. Резюме
• 115 Глава 4. HTML5 для адаптивных веб-дизайнов
  • 116 4.1. Какие части HTML5 можно использовать уже сегодня?
    • 116 Большинство сайтов может быть написано на HTML5
    • 116 Полизаполнения, прослойки и Modernizr
  • 117 4.2. Как писать HTML5-страницы
    • 118 Эффект экономии от использования HTML5
    • 119 Разумный подход к написанию HTML5-разметки
    • 120 Приветствуем великий тег a
    • 120 Устаревшие HTML-функции
  • 121 4.3. Новые семантические HTML5-элементы
    • 122 Элемент section
    • 122 Элемент nav
    • 122 Элемент article
    • 123 Элемент aside
    • 123 Элемент hgroup
    • 125 Элемент header
    • 125 Элемент footer
    • 125 Элемент address
  • 126 4.4. Практическое использование структурных элементов HTML5
  • 132 4.5. HTML5-семантика уровня текста
    • 132 Элемент b
    • 133 Элемент em
    • 133 Элемент i
    • 133 Применение семантики уровня текста в нашей разметке
  • 135 4.6. Обеспечение большей доступности для вашего сайта с помощью WAI-ARIA
  • 138 4.7. Вложение мультимедиа
  • 139 4.8. Добавление видео и аудио с использованием HTML5
    • 141 Обеспечение альтернативных файлов-источников
    • 141 Резервные варианты для устаревших браузеров
    • 142 Теги и работают почти одинаково
  • 142 4.9. Адаптивное видео
  • 145 4.10. Автономные веб-приложения
    • 146 Вкратце об автономных веб-приложениях
    • 146 Делаем веб-страницы доступными в автономном режиме
    • 147 Понятие файла манифеста
    • 148 Автоматическое добавление страниц в кэш
    • 148 О комментарии с указанием номера версии
    • 149 Просмотр сайта в автономном режиме
    • 149 Устранение неполадок с автономными веб-приложениями
  • 150 4.11. Резюме
• 151 Глава 5. CSS3: селекторы, типографика и цветовые режимы
  • 152 5.1. Что CSS3 предлагает разработчикам клиентских приложений
    • 152 Поддержка CSS3 в Internet Explorer версии от 6 до 8
    • 153 Использование CSS3 для дизайна и разработки страниц в браузере
  • 153 5.2. Анатомия CSS-правил
  • 153 5.3. Префиксы поставщиков и их использование
  • 156 5.4. Легко реализуемые и полезные CSS3-трюки
    • 156 Множественные колонки CSS3 для адаптивных веб-дизайнов
    • 159 Перенос слов
  • 160 5.5. Новые CSS3-селекторы и их использование
    • 160 Селекторы атрибутов CSS3
      • 160 Селекторы атрибутов CSS3 с совпадениями по подстроке
      • 161 Практический пример из реальной жизни
    • 162 Структурные псевдоклассы CSS3
      • 163 Селектор :last-child
      • 166 Селектор :nth-child
      • 167 Принцип работы :nth-правил
      • 170 Селектор псевдокласса отрицания (:not)
    • 171 Изменения в псевдоэлементах
  • 173 5.6. Пользовательская веб-типографика
    • 173 CSS-правило @font-face
    • 174 Реализация веб-шрифтов с помощью @font-face
  • 178 5.7. Помогите — мои заголовки с применением CSS3-правила @font-face выглядят неаккуратно
  • 180 5.8. Новые цветовые форматы CSS3 и альфа-прозрачность
    • 181 RGB-цвет
    • 182 HSL-цвет
    • 183 Значения резервных цветов для Internet Explorer версий 6, 7 и 8
    • 183 Альфа-каналы
  • 185 5.9. Резюме
• 187 Глава 6. Великолепная эстетика с использованием CSS3
  • 188 6.1. Создание теней, отбрасываемых текстом, с помощью CSS3
    • 188 Допустимые шестнадцатеричные, HSL- и RGB-значения цветов
    • 189 Пикселы, единицы em или rem
    • 190 Предотвращение отбрасывания текстом тени
    • 192 Создание эффекта рельефного текста
    • 193 Множественные тени, отбрасываемые текстом
  • 193 6.2. Создание теней, отбрасываемых блочными элементами
    • 194 Внутренняя тень
    • 195 Множественные тени
  • 197 6.3. Фоновые градиенты
    • 197 Линейные фоновые градиенты
    • 201 Радиальные фоновые градиенты
    • 204 Повторяющиеся градиенты
  • 206 6.4. Фоновые градиентные узоры
  • 208 6.5. Кое-какие соображения насчет CSS3
  • 210 6.6. Сводим воедино CSS3-свойства
  • 214 6.7. Множественные фоновые изображения
    • 215 Размеры фоновых изображений
    • 216 Позиционирование фоновых изображений
    • 216 Сокращенный способ определения фона
  • 216 6.8. Прочие CSS3-свойства
  • 216 6.9. Масштабируемые значки, идеально подходящие для адаптивных веб-дизайнов
  • 217 6.10. Резюме
• 219 Глава 7. CSS3-переходы, трансформации и анимации
  • 220 7.1. Что такое CSS3-переходы и как мы можем их использовать
    • 221 Свойства, используемые для объявления переходов
      • 222 Собирательное свойство transition
      • Применение разных по длительности эффектов
      • 223 перехода к различным свойствам
      • 223 Понятие временных՛ функций
    • 224 Занятные переходы для адаптивных сайтов
  • 225 7.2. 2D-трансформации CSS3
    • 226 Что можно трансформировать?
      • 227 scale
      • 227 translate
      • 228 rotate
      • 228 skew
      • 229 matrix
    • 230 Свойство transform-origin
  • 231 7.3. Вкратце об обеспечении 3D-трансформаций CSS3
    • 233 Анализ 3D-эффекта
    • 236 3D-трансформации не готовы к повсеместному внедрению
  • 237 7.4. Анимация с помощью CSS3
  • 244 7.5. Резюме
• 245 Глава 8. Покорение форм с помощью HTML5 и CSS3
  • 245 8.1. HTML5-формы
    • 248 Понятие составных частей HTML5-форм
      • 248 placeholder
      • 248 required
      • 250 autofocus
      • 250 autocomplete
      • 251 list (и ассоциированный элемент )
    • 252 Типы полей ввода HTML5
      • 252 email
      • 254 number
      • 254 url
      • 256 tel
      • 256 search
      • 258 pattern
      • 258 color
    • 259 Типы полей ввода date и time
      • 259 date
      • 260 month
      • 260 week
      • 261 time
      • 261 datetime и datetime-local
      • 263 range
  • 264 8.2. Добавление полизаполнений для браузеров, не поддерживающих требуемые функции
  • 266 8.3. Стилизация HTML5-форм с помощью CSS3
  • 272 8.4. Резюме
• 273 Глава 9. Решение кросс-браузерных проблем с адаптивностью
  • 277 9.1. Прогрессивное улучшение против плавного сокращения возможностей
  • 279 9.2. Следует ли вам заботиться о том, чтобы сайт работал в устаревших версиях Internet Explorer?
    • 279 Статистика
    • 280 Личный выбор
  • 281 9.3. Modernizr — «швейцарский армейский нож» разработчика клиентских приложений
    • 283 Устранение проблем со стилизацией с помощью Modernizr
    • 285 Modernizr добавляет поддержку HTML5-элементов в устаревшие версии браузера Internet Explorer
    • 286 Добавление поддержки медиазапросов min-width и max-width в Internet Explorer версий 6, 7 и 8
    • 288 Условная загрузка с помощью Modernizr
  • 290 9.4. Преобразование списка навигационных ссылок в раскрывающееся меню (условно)
  • 294 9.5. Устройства с экранами высокого разрешения (будущее)
  • 297 9.6. Резюме