Table Of ContentБрайан Хоган
HTML5 и CSS3. Веб-разработка по стандартам
нового поколения
Заведующий редакцией А. Кривцов
Руководитель проекта А. Юрченко
Ведущий редактор Ю. Сергиенко
Художественный редактор Л. Адуевская
Корректор В. Листова
Верстка Е. Егорова
ББК 32.988.02-018
УДК 004.738.5
Хоган Б.
Х68 HTML5 и CSS3. Веб-разработка по стандартам нового поколения. — СПб.: Пи-
тер, 2012. — 272 с.: ил.
ISBN 978-5-459-00592-9
HTML5 и CSS3 — будущее веб-разработки, но не обязательно ждать будущего, чтобы начать
применять эти стандарты уже сегодня. Хотя спецификации этих языков еще находятся в разработ-
ке, большинство современных браузеров и мобильных устройств поддерживают HTML5 и CSS3.
Эта книга поможет вам использовать HTML5 и CSS3 прямо сейчас, применяя все богатые воз-
можности, появившиеся в новых веб-стандартах.
Вы научитесь применять новую разметку HTML5, разрабатывать улучшенные интерфейсы для
форм ввода данных, узнаете, как добавлять аудио, видео и векторную графику на веб-страницы
без использования Flash. Вы увидите, как хранение данных на стороне клиента в автономном ре-
жиме кэширования может кардинально улучшить скорость загрузки веб-страниц и как в этом по-
могают простые решения, доступные в CSS3. Каждый раздел книги сопровождается многочислен-
ными примерами, а для каждой описанной функции читателю предстоит создать небольшой учеб-
ный пример.
Права на издание получены по соглашению с Pragmatic Bookshelf. Все права защищены. Никакая часть данной
книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев
авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как
надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не
может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за
возможные ошибки, связанные с использованием книги.
ISBN 978-1934356685 англ. © Pragmatic Programmers, LLC, 2010
ISBN 978-5-459-00592-9 © Перевод на русский язык ООО Издательство «Питер», 2012
© Издание на русском языке, оформление
ООО Издательство «Питер», 2012
ООО «Мир книг», 198206, Санкт-Петербург, Петергофское шоссе, 73, лит. А29.
Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная.
Подписано в печать 14.10.11. Формат 70х100/16. Усл. п. л. 21,930. Тираж 2000. Заказ 0000.
Отпечатано по технологии CtP в ОАО «Первая Образцовая типография», обособленное подразделение
«Печатный двор». 197110, Санкт-Петербург, Чкаловский пр., 15.
Оглавление
Предисловие . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
HTML5: платформа и спецификация . ........................... 10
Как это делается ........................................... 10
Глава 1 . Обзор HTML5 и CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.1. Платформа веб-разработки . .............................. 14
1.2. Обратная совместимость . ................................ 17
1.3. Тернистый путь в будущее ................................ 18
ЧАСТЬ I
УСОВЕРШЕНСТВОВАНИЯ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА
Глава 2 . Новые структурные теги и атрибуты . . . . . . . . . . . . . . . . . . . . . . 27
Рецепт 1. Реструктуризация блога с использованием семантической
разметки ................................................. 30
Все начинается с правильной директивы doctype . ................. 31
Заголовки ................................................ 32
Завершители . ............................................ 33
Область навигации ......................................... 34
Разделы и статьи . ......................................... 35
Статьи .................................................. 35
Дополнения и боковые панели . ............................... 37
Не путайте дополнения с боковыми панелями страниц! .............. 38
Стилевое оформление ....................................... 39
Обходное решение . ........................................ 42
6 Оглавление
Рецепт 2. Создание всплывающих окон с пользовательскими атрибутами
данных .................................................. 44
Отделение поведения от контента, или Чем плохо решение с onclick .... 44
Нам помогут пользовательские атрибуты данных! .................. 46
Обходное решение . ........................................ 47
Перспективы .............................................. 47
Глава 3 . Новые возможности веб-форм . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Рецепт 3. Описание данных при помощи новых полей ................. 52
Улучшение формы проекта AwesomeCo .......................... 52
Построение базовой формы . ................................. 52
Создание ползунка . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Обходное решение . ........................................ 57
Рецепт 4. Использование автофокуса для перехода к первому полю ....... 60
Обходное решение . ........................................ 60
Рецепт 5. Заполняющий текст ................................... 62
Простая форма регистрации новых работников .................... 62
Обходное решение . ........................................ 64
Рецепт 6. Редактирование «на месте» . ............................ 69
Форма профиля ........................................... 70
Сохранение данных . ....................................... 71
Обходное решение . ........................................ 72
Перспективы .............................................. 75
Глава 4 . Совершенствование пользовательских интерфейсов
средствами CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Рецепт 7. Стилевое оформление таблиц с использованием псевдоклассов .. 79
Работа со счетами .......................................... 79
Чередование цвета строк (:nth-of-type) .......................... 81
Выравнивание текста столбцов (:nth-child) . ...................... 83
Выделение последней строки (:last-child) . ....................... 84
Поиск в обратном направлении (:nth-last-child) . . . . . . . . . . . . . . . . . . . . 85
Обходное решение . ........................................ 87
Рецепт 8. Печать ссылок (:after) .................................. 89
CSS ..................................................... 90
Обходное решение . ........................................ 91
Рецепт 9. Создание многостолбцовых макетов . ...................... 93
Разбиение на столбцы ....................................... 93
Обходное решение . ........................................ 97
Рецепт 10. Построение мобильных интерфейсов ...................... 99
Обходное решение . ....................................... 100
Перспективы ............................................. 101
Оглавление 7
Глава 5 . Улучшение доступности . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Рецепт 11. Роли ARIA и упрощение навигации . ..................... 104
Рецепт 12. Создание обновляемых областей с улучшенной доступностью .. 109
ЧАСТЬ II
ГРАФИКА И ЗВУК
Глава 6 . Рисование на «холсте» . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Рецепт 13. Рисование логотипа . ................................ 119
Рецепт 14. Построение диаграмм средствами RGraph . ................ 126
Глава 7 . Внедрение видео и аудио . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
7.1. Немного истории ...................................... 136
7.2. Контейнеры и кодеки . .................................. 137
Рецепт 15. Работа с аудио . .................................... 142
Рецепт 16. Внедрение видео ................................... 146
Глава 8 . Визуальные эффекты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Рецепт 17. Закругление прямых углов . ........................... 156
Рецепт 18. Тени, градиенты и преобразования ...................... 164
Рецепт 19. Использование шрифтов .............................. 175
ЧАСТЬ III
ЗА ПРЕДЕЛАМИ HTML5
Глава 9 . Работа с данными на стороне клиента . . . . . . . . . . . . . . . . . . . . 183
Рецепт 20. Сохранение настроек с использованием localStorage ......... 186
Рецепт 21. Хранение информации в реляционной базе данных
на стороне клиента ........................................ 193
Рецепт 22. Автономная работа .................................. 206
Глава 10 . Взаимодействие с другими API . . . . . . . . . . . . . . . . . . . . . . . . . 209
Рецепт 23. История просмотра .................................. 211
Рецепт 24. Передача информации между доменами . ................. 215
Рецепт 25. Чат на базе Web Sockets . ............................. 222
Рецепт 26. Определение местоположения: Geolocation ................ 230
Глава 11 . Что дальше? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
11.1. Переходы CSS3 ....................................... 236
11.2. Web Workers ......................................... 238
8 Оглавление
11.3. Встроенная поддержка перетаскивания . ................... 240
11.4. WebGL . ............................................ 246
11.5. Indexed Database API . ................................. 246
11.6. Проверка данных форм на стороне клиента ................. 247
11.7. Вперед! . ........................................... 248
ЧАСТЬ IV
ПРИЛОЖЕНИЯ
Приложение А . Краткий справочник . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
А.1. Новые элементы ....................................... 253
А.2. Атрибуты ............................................ 254
А.3. Формы .............................................. 254
А.4. Атрибуты полей форм . ................................. 255
А.5. Доступность .......................................... 256
А.6. Мультимедиа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
А.7. CSS3 ................................................ 257
А.8. Хранение данных на стороне клиента ....................... 259
А.9. Другие API ........................................... 259
Приложение Б . Введение в jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261
Б.1. Загрузка jQuery . ...................................... 261
Б.2. Основы jQuery . ....................................... 262
Б.3. Методы изменения контента .............................. 262
Б.4. Создание элементов .................................... 265
Б.5. События ............................................. 265
Б.6. Функция document.ready ................................. 267
Приложение В . Кодирование аудио и видео . . . . . . . . . . . . . . . . . . . . . . . 268
В.1. Кодирование аудио .................................... 268
В.2 Кодирование видео для Web .............................. 269
Приложение Г . Ресурсы . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
Приложение Д . Библиография . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Предисловие
Три месяца в веб-программировании — все равно что год реального
времени.
У веб-разработчиков время идет в ускоренном темпе: ведь мы посто-
янно слышим о чем-то новом. Еще год назад HTML5 и CSS3 казались
делом будущего, но уже сегодня компании используют эти технологии
в своей работе, потому что браузеры (Google Chrome, Safari, Firefox
и Opera) начали реализовывать отдельные части этой спецификации.
Технологии HHTTMMLL555 иии CCCCSSSSSSSS33333 зззззаааааккккклллллааааадддддыыыыыввввваааааюююююттттт оооооссссснннннооооовввввууууу дддддллллляяяяя ссссслллллееееедддддуууууююююющщщщщееееегггггооооо пппппооооо-----
коления веб-приложений. Сайты, созданные с применением этих техно-
логий, более просты в разработке и сопровождении и более удобны для
пользователей. В HTML5 появились новые элементы для определения
структуры сайта и встроенного контента, которые избавляют нас от необ-
ходимости использовать дополнительную разметку или плагины. CSS3
предоставляет расширенные селекторы, графические усовершенство-
вания и улучшенную поддержку работы со шрифтами, которые позво-
лят нам сделать наши сайты более привлекательными без применения
графической замены шрифтов, сложного кода JavaScript и графических
инструментов. Приложения Ajax станут более доступными для людей
с физическими недостатками, а поддержка автономной работы позволит
строить приложения, не нуждающиеся в подключении к Интернету.
В этой книге вы узнаете о том, как использовать HTML5 и CSS3
прямо сейчас, несмотря на то что браузеры ваших пользователей еще не
поддерживают всех возможностей. Но сначала мы немного поговорим
о HTML5 и некоторых модных словечках.
10 Предисловие
HTML5: платформа и спецификация
HTML55 —— ссппееццииффииккаацциияя,, ооппииссыыввааюющщааяя ннееккооттооррыыее ннооввыыее ттееггии ии рраазз--
метку, а также ряд замечательных Javascript API, но она попала в вихрь
рекламной шумихи и обещаний. К сожалению, стандарт HHTTMMLL555 ррраааззз---
вился до платформы HTML5, что создало невероятную путаницу среди
разработчиков, клиентов и даже авторов книг. В некоторых случаях
фрагменты спецификации CSS3 (например, тени, градиентные заливки
и трансформации) называются «HHTTMMLL���... СССоооззздддааатттееелллиии бббррраааууузззеееррроооввв ссстттааарррааа---
ются превзойти друг друга по тому, в какой степени их продукты под-
держивают «HTML5�. Заказчики начинают задавать странные вопросы:
«Мой сайт будет написан на HTML5, правда?�
В основной части этой книги мы сосредоточимся на спецификациях
HTML55 ии CCCSSSSSS3333 ииии ннннаааа ииииссссппппооооллллььььззззооооввввааааннннииииииии ооооппппииииссссаааанннннннныыыыхххх вввв нннниииихххх ммммееееттттооооддддоооовввв.... ВВВВ ззззааааввввеееерррр----
шающей части книги рассматривается группа сопутствующих специфи-
каций, которые когда-то были частью HTML5, а сейчас используются
на разных платформах. К их числу относятся спецификации Web SQL
Databases, Geolocation и Web Sockets. Хотя формально эти технологии
не относятся к HTML5, в сочетании с HTML5 и CSS3 они позволяют
добиться потрясающего эффекта.
Как это делается
Каждая глава книги посвящена конкретной группе задач, которые могут
решаться с использованием HTML5 и CSS3. В каждой главе приводится
сводка и таблица с перечислением тегов, возможностей и концепций,
рассмотренных в этой главе. Основной материал каждой главы состоит
из разделов, в которых излагается некоторая концепция, после чего рас-
сматривается процесс построения простого примера с использованием
этой концепции. Главы книги группируются по темам. Вместо деления
книги на части по технологиям (HTML5 и CSS3), нам показалось более
разумным сгруппировать материал в соответствии с решаемыми зада-
чами.
В каждом разделе присутствует подраздел «Обходное решение�,
в котором рассказано, что делать, если браузер пользователя еще не
поддерживает HHTTMMLL555 иии CCCCSSSSSSSS33333..... �����ааааабббббооооотттттоооооссссспппппооооосссссоооообббббннннноооооссссстттттььььь оооообббббхххххооооодддддннннныыыыыххххх рррррееееешшшшшеееее-----
ний обеспечивается разными средствами, от сторонних библиотек до
