HTML5 и CSS3. Мастер-класс

Санкт-Петербург «БХВ-Петербург» 2024

УДК 004.43 ББК 32.973.26-018.1 Н64 Никсон Р. Н64 HTML5 и CSS3. Мастер-класс: Пер. с англ. — СПб.: БХВ-Петербург, 2024. — 464 с.: ил. ISBN 978-5-9775-1929-8 Книга посвящена разработке веб-сайтов и веб-приложений с нуля, с применением самых современных клиентских и серверных технологий, селекторов CSS и подходов к веб-дизайну. Рассмотрены стандарт CSS 3+, отрисовка на холсте (технология Canvas), адаптивный веб-дизайн (технологии Flexbox и Grid), технология SASS, расширяющая возможности CSS, а также художественные аспекты веб-дизайна, обеспечение кроссплатформенности сайтов и приложений и приверженность отзывчивому веб-дизайну. Для веб-дизайнеров и веб-разработчиков УДК 004.43 ББК 32.973.26-018.1 Группа подготовки издания: Руководитель проекта Олег Сивченко Зав. редакцией Людмила Гауль Перевод с английского Николая Вильчинского Редактор Дарья Кустовская Компьютерная верстка Натальи Смирновой Корректор Светлана Крутоярова Оформление обложки Зои Канторович Copyright 2022 BPB Publications, India. All rights reserved. First published in the English language under the title HTML5 and CSS3. Masterclass: In-depth Web Design Training with Geolocation, the HTML5 Canvas, 2D and 3D CSS Transformations, Flexbox, CSS Grid, and More, ISBN 9789355511218 by BPB Publications India ([email protected]). Russian translation rights arranged with BPB Publications, India. © 2022 BPB Publications, Индия. Все права защищены. Впервые опубликовано на английском языке под названием HTML5 and CSS3. Masterclass: In-depth Web Design Training with Geolocation, the HTML5 Canvas, 2D and 3D CSS Transformations, Flexbox, CSS Grid, and More, ISBN 9789355511218 издательством BPB Publications India ([email protected]). Права на перевод на русский язык предоставлены издательством BPB Publications, Индия. "БХВ-Петербург", 191036, Санкт-Петербург, Гончарная ул., 20. ISBN 978-93-55511-218 (англ.) ISBN 978-5-9775-1929-8 (рус.) © BPB Publications, India, 2022 © Перевод на русский язык, оформление. ООО «БХВ-Петербург», ООО «БХВ», 2023

Содержание Предисловие ................................................................................................................... 15 Об авторе.......................................................................................................................... 17 ГЛАВА 1. Начальные сведения о HTML5 и CSS3.................................................. 19 Введение .......................................................................................................................... 19 Структура......................................................................................................................... 21 Цели.................................................................................................................................. 21 Знакомство с HTTP и HTML.......................................................................................... 21 Знакомство с CSS............................................................................................................ 24 Использование атрибутов id и class............................................................................... 25 Чем обусловлена необходимость применения HTML5 и CSS3 ................................. 28 Заключение ...................................................................................................................... 29 ГЛАВА 2. Установка веб-сервера .............................................................................. 31 Вступление ...................................................................................................................... 31 Структура......................................................................................................................... 31 Цели.................................................................................................................................. 31 Представление о WAMP, MAMP и LAMP ................................................................... 32 Установка под Windows ................................................................................................. 32 Работа с корнем документа ............................................................................................ 36 Установка под MacOS .................................................................................................... 39 Работа с корнем документа ............................................................................................ 41 Установка под Linux ....................................................................................................... 43 Работа с корнем документа ............................................................................................ 44 Заключение ...................................................................................................................... 44 ГЛАВА 3. Visual Studio Code....................................................................................... 45 Вступление ...................................................................................................................... 45 Структура......................................................................................................................... 45 Цели.................................................................................................................................. 45 Популярность VS Code................................................................................................... 46 Установка VS Code под Windows.................................................................................. 47

6 | Содержание Установка VS Code под MacOS..................................................................................... 49 Установка VS Code под Linux........................................................................................ 51 Начало работы с VS Code............................................................................................... 52 Заключение ...................................................................................................................... 54 ГЛАВА 4. Консоль разработчика............................................................................... 55 Вступление ...................................................................................................................... 55 Структура......................................................................................................................... 55 Цели.................................................................................................................................. 55 Доступ к консоли разработчика..................................................................................... 56 Польза, извлекаемая из работы с консолью ................................................................. 60 Автозавершение .............................................................................................................. 61 Просмотр элементов ....................................................................................................... 63 Заключение ...................................................................................................................... 65 ГЛАВА 5. Введение в HTML5..................................................................................... 67 Введение .......................................................................................................................... 67 Структура......................................................................................................................... 67 Цели.................................................................................................................................. 68 HTML5 гораздо серьезнее, чем просто HTML4 + 1..................................................... 68 SVG и MathML................................................................................................................ 79 Заключение ...................................................................................................................... 80 ГЛАВА 6. Использование холста в HTML5............................................................. 81 Введение .......................................................................................................................... 81 Структура......................................................................................................................... 81 Цели.................................................................................................................................. 81 Ускоренный курс JavaScript........................................................................................... 82 Размещение кода внутри тегов <script>........................................................................ 82 Размещение кода в отдельном файле ............................................................................ 85 Функция getElementByID()............................................................................................. 87 Превращение холста в изображение ............................................................................. 88 Заключение ...................................................................................................................... 90 ГЛАВА 7. Прямоугольники и заливки..................................................................... 91 Введение .......................................................................................................................... 91 Структура......................................................................................................................... 91 Цели.................................................................................................................................. 91 О примерах работы с холстом ....................................................................................... 92 Рисование прямоугольников.......................................................................................... 93 Использование переменных........................................................................................... 94 Применение стилей рисования ...................................................................................... 95

Содержание | 7 Изменение толщины линии............................................................................................ 96 Очистка прямоугольника ............................................................................................... 97 Применение градиентной заливки................................................................................. 98 Применение радиального градиента ........................................................................... 100 Разноцветные градиентные заливки............................................................................ 101 Использование заполнения узором ............................................................................. 103 Использование перемещения....................................................................................... 106 Заключение .................................................................................................................... 109 ГЛАВА 8. Надписи на холсте .................................................................................... 111 Введение ........................................................................................................................ 111 Структура....................................................................................................................... 111 Цели................................................................................................................................ 111 Создание надписей........................................................................................................ 112 Изменение способа отображения текста..................................................................... 112 Выравнивание текста .................................................................................................... 113 Изменение толщины обводки ...................................................................................... 115 Надписи с заполнением................................................................................................ 118 Использование узора для заполнения надписи .......................................................... 121 Заключение .................................................................................................................... 122 ГЛАВА 9. Рисование на холсте................................................................................. 123 Введение ........................................................................................................................ 123 Структура....................................................................................................................... 123 Цели................................................................................................................................ 123 Рисование линий с использованием путей ................................................................. 124 Применение заполнений............................................................................................... 128 Ограничения областей холста...................................................................................... 128 Рисование кривых линий.............................................................................................. 131 Выбор направления....................................................................................................... 132 Рисование дуги к конкретной точке............................................................................ 136 Использование аттракторов ......................................................................................... 138 Завершение и схождение линий .................................................................................. 141 Заключение .................................................................................................................... 144 ГЛАВА 10. Работа с холстом..................................................................................... 145 Введение ........................................................................................................................ 145 Структура....................................................................................................................... 145 Цели................................................................................................................................ 145 Рисование с использованием изображений ................................................................ 146 Извлечение частей изображений ................................................................................. 148 Использование холста в качестве исходного изображения ...................................... 149 Прикрепление теней ..................................................................................................... 151

8 | Содержание Тени прикрепляются не только к изображениям....................................................... 153 Непосредственное редактирование пикселей............................................................. 154 Как хранятся данные о цвете ....................................................................................... 156 Последовательный перебор данных............................................................................ 157 Обработка данных изображения.................................................................................. 157 Усреднение данных о цвете ......................................................................................... 158 Другие эффекты ............................................................................................................ 158 Создание собственных данных изображения............................................................. 162 Заключение .................................................................................................................... 162 ГЛАВА 11. Расширенные возможности работы с холстом................................. 163 Введение ........................................................................................................................ 163 Структура....................................................................................................................... 163 Цели................................................................................................................................ 163 Выстраивание композиции и прозрачность ............................................................... 164 Использование цикла.................................................................................................... 167 Рисование изображения................................................................................................ 167 Изменение прозрачности.............................................................................................. 168 Применение преобразований ....................................................................................... 169 Использование поворотов ............................................................................................ 171 Применение перемещений ........................................................................................... 172 Применение сразу нескольких преобразований......................................................... 173 Заключение .................................................................................................................... 173 ГЛАВА 12. Применение геолокации ....................................................................... 175 Введение ........................................................................................................................ 175 Структура....................................................................................................................... 175 Цели................................................................................................................................ 176 Что такое GPS................................................................................................................ 176 Альтернативы применению GPS ................................................................................. 176 Проверка доступности геолокации ............................................................................. 177 Использование консоли разработчика ........................................................................ 179 Перенаправление пользователей ................................................................................. 180 Получение сведений о местоположении пользователя ............................................. 182 Именованные функции................................................................................................. 184 Когда получено разрешение......................................................................................... 185 Заключение .................................................................................................................... 186 ГЛАВА 13. Работа с формами................................................................................... 187 Введение ........................................................................................................................ 187 Структура....................................................................................................................... 187 Цели................................................................................................................................ 187 Атрибуты формы HTML5 ............................................................................................ 188

Содержание | 9 Атрибут autofocus.......................................................................................................... 188 Атрибут autocomplete.................................................................................................... 190 Атрибут form ................................................................................................................. 191 Атрибут formaction........................................................................................................ 193 Другие переопределения формы ................................................................................. 194 Атрибут multiple............................................................................................................ 195 Атрибут novalidate ........................................................................................................ 196 Атрибуты width и height ............................................................................................... 196 Атрибут list и теги <datalist> и <option>..................................................................... 197 Атрибуты min, max и step............................................................................................. 198 Другие типы ввода даты и времени............................................................................. 200 Атрибут pattern.............................................................................................................. 200 Атрибут placeholder ...................................................................................................... 201 Атрибут required............................................................................................................ 202 Тип ввода color.............................................................................................................. 203 Числа и диапазоны........................................................................................................ 204 Тип ввода search ............................................................................................................ 206 Заключение .................................................................................................................... 207 ГЛАВА 14. Локальное хранилище и многое другое ............................................. 209 Введение ........................................................................................................................ 209 Структура....................................................................................................................... 209 Цели................................................................................................................................ 209 Использование локального хранилища....................................................................... 210 Хранение и извлечение локальных данных................................................................ 210 Удаление и очистка локальных данных...................................................................... 213 Использование взамен этого хранилища сеансов ...................................................... 214 Микроданные ................................................................................................................ 214 Веб-воркеры................................................................................................................... 217 Автономные веб-приложения ...................................................................................... 220 Как работают автономные веб-приложения............................................................... 220 Перетаскивание ............................................................................................................. 222 Обмен сообщениями между документами ................................................................. 223 Заключение .................................................................................................................... 223 ГЛАВА 15. Аудио и видео.......................................................................................... 225 Введение ........................................................................................................................ 225 Структура....................................................................................................................... 225 Цели................................................................................................................................ 225 Аудио в HTML5 ............................................................................................................ 226 Аудиокодеки.................................................................................................................. 226 Воспроизведение аудио................................................................................................ 227 Видео в HTML5............................................................................................................. 229

10 | Содержание Видеокодеки .................................................................................................................. 230 Воспроизведение видео ................................................................................................ 230 Заключение .................................................................................................................... 236 ГЛАВА 16. Введение в CSS3...................................................................................... 237 Введение ........................................................................................................................ 237 Структура....................................................................................................................... 237 Цели................................................................................................................................ 237 Разработка CSS3 продолжается ................................................................................... 238 Новое в CSS3 ................................................................................................................. 239 Селекторы атрибутов.................................................................................................... 239 Фоновые решения ......................................................................................................... 240 Границы ......................................................................................................................... 242 Тени блоков ................................................................................................................... 244 Столбцы и перетекания ................................................................................................ 246 Цвета и прозрачность.................................................................................................... 247 Текстовые эффекты и шрифты .................................................................................... 248 Перемещения и преобразования.................................................................................. 250 Flexbox-разметка ........................................................................................................... 252 Flexbox как отдельный модуль .................................................................................... 252 CSS grid .......................................................................................................................... 255 Заключение .................................................................................................................... 258 ГЛАВА 17. Селекторы атрибутов CSS3.................................................................. 259 Введение ........................................................................................................................ 259 Структура....................................................................................................................... 259 Цели................................................................................................................................ 259 Селекторы атрибутов CSS............................................................................................ 260 Селектор по имени атрибута........................................................................................ 260 Селектор по значению атрибута .................................................................................. 261 Селектор по слову из списка........................................................................................ 262 Селектор по дефису ...................................................................................................... 263 Селектор по начальным символам .............................................................................. 264 Селектор по конечным символам................................................................................ 265 Глобальный селектор.................................................................................................... 267 Флажок невосприимчивости к регистру символов.................................................... 268 Флажок восприимчивости к регистру символов........................................................ 269 Заключение .................................................................................................................... 270 ГЛАВА 18. Создание фона......................................................................................... 271 Введение ........................................................................................................................ 271 Структура....................................................................................................................... 271 Цели................................................................................................................................ 271

Содержание | 11 Обрезка и начало фона ................................................................................................. 272 Литералы шаблонов ...................................................................................................... 272 Использование свойства background-clip.................................................................... 274 Использование свойства background-origin ................................................................ 275 Совместное использование обрезки и начала фона................................................... 275 Раздел сценария JavaScript ........................................................................................... 278 Размер фона ................................................................................................................... 280 Использование градиентов........................................................................................... 282 Точки остановки цвета ................................................................................................. 284 Удаленность точек остановки цвета и повторения.................................................... 284 Радиальные и конические градиенты.......................................................................... 285 Заключение .................................................................................................................... 286 ГЛАВА 19. Построение границ................................................................................. 287 Введение ........................................................................................................................ 287 Структура....................................................................................................................... 287 Цели................................................................................................................................ 287 Радиус границы ............................................................................................................. 288 Цвета границ.................................................................................................................. 290 Градиентные границы................................................................................................... 291 Использование нескольких фонов............................................................................... 293 Использование одного изображения........................................................................... 295 Заключение .................................................................................................................... 298 ГЛАВА 20. Свойства блока и текста ....................................................................... 299 Введение ........................................................................................................................ 299 Структура....................................................................................................................... 299 Цели................................................................................................................................ 299 Добавление теней.......................................................................................................... 299 Переполнение элементов.............................................................................................. 302 Макет, составленный из нескольких колонок ............................................................ 303 Заключение .................................................................................................................... 309 ГЛАВА 21. Цвета и прозрачность............................................................................ 311 Введение ........................................................................................................................ 311 Структура....................................................................................................................... 311 Цели................................................................................................................................ 311 RGB-цвета...................................................................................................................... 312 Использование цветового круга .................................................................................. 315 RGBA-цвета................................................................................................................... 316 HSL-цвета ...................................................................................................................... 318 Применение прозрачности ........................................................................................... 321 Заключение .................................................................................................................... 323

12 | Содержание ГЛАВА 22. Текстовые эффекты и шрифты........................................................... 325 Введение ........................................................................................................................ 325 Структура....................................................................................................................... 325 Цели................................................................................................................................ 326 Задание размеров блока................................................................................................ 326 Текстовое переполнение............................................................................................... 328 Перенос длинных слов.................................................................................................. 329 Изменение размеров элементов пользователем......................................................... 331 Выделение фокуса......................................................................................................... 333 Текстовые тени.............................................................................................................. 334 Веб-шрифты................................................................................................................... 335 Заключение .................................................................................................................... 339 ГЛАВА 23. Двумерные преобразования................................................................. 341 Введение ........................................................................................................................ 341 Структура....................................................................................................................... 341 Цели................................................................................................................................ 342 Преобразования............................................................................................................. 342 Переходы ....................................................................................................................... 344 Перемещения................................................................................................................. 347 Ожидаемое вскоре свойство translate .......................................................................... 347 Масштабирование ......................................................................................................... 347 Вращение ....................................................................................................................... 349 Наклон............................................................................................................................ 350 Использование матриц.................................................................................................. 352 Заключение .................................................................................................................... 354 ГЛАВА 24. Трехмерная графика и анимация ....................................................... 355 Введение ........................................................................................................................ 355 Структура....................................................................................................................... 355 Цели................................................................................................................................ 355 3D-преобразования ....................................................................................................... 356 Задание перспективы.................................................................................................... 358 Два способа изменения перспективы.......................................................................... 360 Задание стиля преобразования..................................................................................... 362 Изменение исходной точки преобразования .............................................................. 363 Работа в 3D-пространстве ............................................................................................ 364 Управление кубом......................................................................................................... 366 3D-перемещение............................................................................................................ 367 3D-масштабирование.................................................................................................... 367 3D-вращение.................................................................................................................. 367 Видимость обратных сторон граней ........................................................................... 369 Заключение .................................................................................................................... 370

Содержание | 13 ГЛАВА 25. Макет Flexbox ......................................................................................... 371 Введение ........................................................................................................................ 371 Структура....................................................................................................................... 371 Цели................................................................................................................................ 371 Сведения о Flexbox ....................................................................................................... 372 Создание интерактивной среды Flexbox..................................................................... 372 Как работает пример..................................................................................................... 375 Работа с примером ........................................................................................................ 378 Flex-направление........................................................................................................... 379 Перенос flex-элементов ................................................................................................ 382 Выравнивание всего содержимого по главной оси.................................................... 382 Выравнивание элементов по поперечной оси ............................................................ 386 Выравнивание всего содержимого по поперечной оси ............................................. 389 Другие свойства ............................................................................................................ 393 Заключение .................................................................................................................... 394 ГЛАВА 26. CSS Grid ................................................................................................... 395 Введение ........................................................................................................................ 395 Структура....................................................................................................................... 395 Цели................................................................................................................................ 395 Сведения о CSS Grid ..................................................................................................... 396 Как работает пример..................................................................................................... 399 Работа с примером ........................................................................................................ 400 Задание потока Grid-элементов ................................................................................... 401 Выравнивание содержимого ........................................................................................ 402 Выравнивание элементов ............................................................................................. 407 Задание промежутков ................................................................................................... 412 Изменение местоположения и размеров..................................................................... 412 Заключение .................................................................................................................... 417 ГЛАВА 27. Знакомство с Sass ................................................................................... 419 Введение ........................................................................................................................ 419 Структура....................................................................................................................... 419 Цели................................................................................................................................ 420 Sass — достойное решение .......................................................................................... 420 Сведения о Sass ............................................................................................................. 420 Различные версии Sass.................................................................................................. 421 Установка под Windows ............................................................................................... 421 Другие установщики под Windows ............................................................................. 424 Установка под MacOS .................................................................................................. 424 Установка под Linux ..................................................................................................... 426 Альтернативные установки под Linux ........................................................................ 427 Препроцессинг в CSS.................................................................................................... 428 Заключение .................................................................................................................... 429

14 | Содержание ГЛАВА 28. Переменные и потоки выполнения в Sass......................................... 431 Введение ........................................................................................................................ 431 Структура....................................................................................................................... 431 Цели................................................................................................................................ 431 Переменные в CSS ........................................................................................................ 432 Переменные в Sass........................................................................................................ 434 Значения переменных, используемые по умолчанию ............................................... 435 Область видимости переменных ................................................................................. 437 Принудительное задание глобальной видимости ...................................................... 438 Управление потоком выполнения ............................................................................... 439 Sass-операторы.............................................................................................................. 439 Sass-выражения (Sass-сценарий) ................................................................................. 440 @if … @else................................................................................................................... 441 Влияние скобок ............................................................................................................. 443 @else if ........................................................................................................................... 443 @each … in..................................................................................................................... 444 @for … from … through ................................................................................................ 445 @for … from … to ......................................................................................................... 447 @while ............................................................................................................................ 448 Заключение .................................................................................................................... 448 ГЛАВА 29. Расширенный Sass.................................................................................. 449 Введение ........................................................................................................................ 449 Структура....................................................................................................................... 449 Цели................................................................................................................................ 450 Вложенность, используемая в Sass.............................................................................. 450 Вложенные свойства..................................................................................................... 452 Наследование в Sass...................................................................................................... 453 Использование миксинов ............................................................................................. 455 Модули Sass................................................................................................................... 456 Будущие версии............................................................................................................. 457 Заключение .................................................................................................................... 458 Метаданные.................................................................................................................. 459 Описание........................................................................................................................ 459 Чему вы сможете научиться......................................................................................... 460 Для кого эта книга......................................................................................................... 460 Содержание.................................................................................................................... 461 Биография автора .......................................................................................................... 462

Предисловие Эта книга предназначена для всех, кто заинтересован в совершенствовании своих знаний и навыков в области веб-дизайна, причем неважно, кем именно будет читатель: просто любителем, профессиональным разработчиком или специалистом, намеревающимся построить карьеру веб-дизайнера. Инструменты, доступные веб-разработчикам, постоянно совершенствуются, сообразуясь с ростом потребностей профессиональных разработчиков в более объемных, качественных, более эффективных и интерактивных веб-свойствах. В прошлом основная масса улучшений вынужденно создавалась с применением кода JavaScript, но теперь в веб-браузеры встроено так много новых технологий, что вебдизайнеры могут создавать воистину фантастические страницы и сайты. Единственная проблема заключается в необходимости получения сведений о том, что доступно и как все это использовать. Вот тут-то и пригодится эта книга, поскольку она позволяет ознакомиться со всеми последними усовершенствованиями как HTML5, так и CSS3, а также уяснить их суть и научиться их использованию. Материал изложен простым и понятным языком. Эта книга полна рабочих примеров и рисунков, иллюстрирующих весь изучаемый на каждом этапе обучения материал. Кроме того, каждая глава начинается с краткого описания того, что предстоит изучить, и с постановки целей, которых следует добиться к моменту завершения изучения главы. Ознакомившись с материалом книги, вы действительно сможете усвоить всю нужную информацию о самых интересных улучшениях, появившихся в HTML5 и CSS3, и будете готовы продолжить карьеру веб-разработчика в полной уверенности обладания способностями, позволяющими создавать сайты любых нужных типов, основанной на успешном освоении следующего материала: В главе 1 вы узнаете о тех функциональных возможностях, которые уже доступны как в HTML5, так и в CSS3, и поймете, зачем они были добавлены, и что могут вам предложить. В главе 2 вы пройдете весь технологический путь установки на свой компьютер веб-сервера, позволяющего вести локальную разработку и тестирование своих проектов, не испытывая потребностей их выкладки на разработочный сервер.

16 | Предисловие В главе 3 вы узнаете наверное о лучшем из доступных бесплатном редакторе программного кода, Visual Studio Code, и поймете, в чем его высокая эффективность, а также узнаете, как его можно будет установить и использовать. В главе 4 вы узнаете все о консоли разработчика, встроенной во все современные браузеры, позволяющей проводить тестирование и отладку ваших проектов. В главе 5 начнется изучение основ самых новых функций HTML5 и того, что они могут для вас сделать. В главе 6 состоится знакомство с холстом HTML5, позволяющим создавать на этом холсте надписи и рисунки непосредственно в веб-браузере для получения разнообразных изображений и эффектов. В главе 7 начнется детальное изучение различных функций холста, начиная с прямоугольников и их заливки. В главе 8 предстоит изучение всех приемов создания надписей на холсте разнообразными способами, с применением разных текстовых размеров и шрифтов. В главе 9 будут осваиваться приемы рисования на холсте с использованием простых и понятных инструкций на языке JavaScript. В главе 10 начнется освоение холста с приемами непосредственного манипулирования цветом и прозрачностью его содержимого. В главе 11 вы перейдете к самым совершенным функциям холста, которые могут понадобиться для получения доступа ко всем остальным вариантам его использования. В главе 12 будет изучена геолокация, используемая для картографирования и помогающая пользователям добраться до мест, представляющих для них определенный интерес. В главе 13 предстоит изучение целого ряда новых и весьма комфортных функций обработки форм, которые теперь уже встроены в HTML5. В главе 14 предстоит изучение способов совершенствования возможностей, ранее предоставляемых cookie-файлами, за счет замены их доступом к локальному хранилищу. В главе 15 предстоит знакомство с аудио- и видеовозможностями HTML5, и освоение способов помещения этих медиа-источников непосредственно на ваши веб-страницы. В главе 16 начнется переключение вашего внимания на CSS3 и на новые функции, которые может предложить эта технология. В главе 17 предстоит изучить всё, что касается новых селекторов атрибутов CSS3, и освоить приемы их наиболее эффективного использования. В главе 18 вы приступите к созданию фонов, недоступных до появления CSS3. В главе 19 будут представлены новые функции границ, включенные в CSS3, и показан ряд способов их использования.

Предисловие | 17 В главе 20 предстоит изучение всех новых свойств CSS3, касающихся блоков и текста, которыми можно будет воспользоваться для улучшения ваших дизайнерских решений. В главе 21 будут показаны все новые функции цвета и прозрачности, которые теперь стали доступны благодаря CSS3. В главе 22 предстоит исследование способов простого добавления к вашему тексту целого ряда разнообразных эффектов и даже получения доступа к тысячам бесплатных веб-шрифтов. В главе 23 предстоит рассмотреть способы преобразования любых двумерных веб-элементов путем их растяжения, вращения и многого другого. В главе 24 эти преобразования будут подняты на следующий уровень для манипулирования трехмерными объектами, а также применения к ним приемов анимации. В главе 25 состоится знакомство с весьма эффективным макетом Flexbox, способным как никогда ранее упростить создание страниц с привлекательным внешним видом, работающих на устройствах любого размера. В главе 26 предстоит изучение альтернативы технологии Flexbox с еще более развитой гибкостью, которая называется CSS Grid. В главе 27 состоится знакомство с препроцессором Sass, который служит расширением CSS, и вне всяких сомнений позволит поднять ваш дизайн на более высокий уровень. В главе 28 предстоит научиться использованию в Sass переменных и управлению потоком выполнения инструкций. И наконец, в главе 29 вы завершите свое исследовательское путешествие, овладев различными передовыми технологиями Sass. Об авторе Робин Никсон — веб-разработчик и преподаватель, активно занимающийся программированием с 1980-х годов. Ранее он редактировал компьютерный журнал, был директором нескольких компаний-разработчиков программного обеспечения, а в последнее время стал автором ряда самых продаваемых книг о компьютерах и компьютерных технологиях, выходящих в издательстве O’Reilly. Области интересов Робина — фронтенд-разработка с использованием HTML, CSS и JavaScript, а также управление серверной частью с помощью PHP и MySQL. Он также активный исследователь в области искусственного интеллекта.

ГЛ А В А 5 Введение в HTML5 Введение По названию можно подумать, что HTML5 — просто очередная версия HTML, но это не так; в эту технологию заложено нечто большее. Чтобы уяснить это, нужно понять, что веб-разработка — своеобразное сближение и слияние технологий, и, хотя речь может идти о HTML5 и CSS3, они в известном смысле также переплетаются и взаимодействуют с JavaScript. Попытка полностью обособить HTML5 обречена на провал, поскольку весьма существенная часть спецификации HTML5 зависит от использования как CSS3, так и JavaScript, но мы приложим все силы, чтобы различать их везде, где только можно, а затем укажем, где именно размываются границы между ними. Например, одна из наиболее важных особенностей HTML5 — применение нового элемента холста <canvas>, но воспользоваться им можно только с помощью инструкций на языке JavaScript. С другой стороны, некоторые графические эффекты, проявляющиеся на холсте, также могут быть получены с помощью преобразований, присущих CSS3. Поэтому зачастую лучше думать о триаде HTML5, CSS3 и JavaScript, и в данной книге будет показано, как все три технологии интегрируются друг с другом. Но тем из вас, кто не считает себя программистом, не стоит волноваться: изучать программирование на JavaScript в полном объеме не придется, поскольку к холсту HTML5 и другим функциям HTML можно получить доступ с помощью весьма простого подмножества инструкций JavaScript, которые несложно выучить, так как они используются больше как расширение HTML, чем что-либо иное. И все же не стоит выстраивать предположения, что все сведется к изучению новых HTML-тегов и атрибутов, поскольку HTML5 — нечто большее. После всего сказанного давайте начнем с выяснения, что именно HTML5 привносит в набор инструментов программиста, делая при этом основной упор на новые элементы. Структура В этой главе рассматриваются следующие темы: Все новые функции HTML5.

68 | Глава 5 Основные особенности работы этих функций. Несколько примеров в ваш арсенал. Особенности использования HTML5. Цели Здесь состоится знакомство со всеми основными технологиями и функциями, входящими в состав HTML5. Изучив предлагаемый материал, вы поймете, какие новые инструменты доступны в HTML5, и будете готовы приступить к изучению порядка их использования для достижения наивысших результатов при разработке ваших собственных проектов, следуя информации, представленной в остальных главах этого раздела. HTML5 гораздо серьезнее, чем просто HTML4 + 1 Во введении к главе уже говорилось, что HTML5 — это не просто очередная версия HTML, а нечто гораздо большее. Но давайте подойдем к исследованию того, чем по сути является HTML5, внимательно изучив те части этой спецификации, которые представлены новыми функциями языка HTML. Завершив эту работу, мы перейдем к рассмотрению той части спецификации HTML5, где начинают стираться ее границы с другими технологиями. А поскольку в поле нашего зрения уже попадал новый элемент под названием холст (canvas), то с него и начнем. Элемент <canvas> Чего так долго не хватало в HTML — это возможности рисования и манипулирования графикой. Сначала эта проблема была исправлена с помощью элементов управления Microsoft ActiveX, а затем с помощью плагина Adobe Flash. Но они оказались сбойными и открывали слишком много уязвимостей с точки зрения безопасности. Кроме того, они требовали установки, а нужно было встроенное решение. ПРИМЕЧАНИЕ Проблемы с этими плагинами, и, в частности, с Flash, были настолько велики, что автор этой книги еще в 2015 году опубликовал статью в журнале Computer Weekly Magazine под названием «Why HTML Must Replace Flash» («Почему HTML должен заменить Flash»), подробно описав все основные связанные с плагинами проблемы, и объяснив, почему спецификация HTML5 была вполне очевидным решением. Если интересно, полная версия статьи, объясняющая сложившуюся на то время ситуацию, до сих пор доступна по адресу https://tinyurl.com/ flash-html5.

Введение в HTML5 | 69 Основным ответом на Flash (наряду с добавлением аудио- и видеофункций) стал элемент <canvas>, который впервые был поддержан компонентом MacOS WebKit еще в 2004 году, повышавшим эффективность использования браузеров Dashboard и Safari. В 2006 году его поддержка была добавлена в Firefox и Opera, и только потом Рабочая группа Web Hypertext Application Technology Working Group (WHATWG) добавила этот элемент в качестве стандарта, а такие браузеры, как Google Chrome, включили его в свой состав в 2010 году. Это один из примеров того, как происходило поэтапное развитие веб-стандартов, и напоминание о тех днях, когда для обнаружения запущенного браузера с целью определения доступности тех или иных функций приходилось включать в вебстраницу условный код. Это был сущий кошмар для разработчиков, который теперь уже, к счастью, развеялся как дурной сон, поскольку соблюдение спецификации HTML5 теперь считается вполне состоявшимся фактом. Следует все же заметить, что в дальнейшем, наверное, не обойдется и без появления новых вебтехнологий, в связи с чем понадобится некоторое время, чтобы отшлифовать их во всех браузерах, добившись однообразного внешнего вида и стиля их работы. Как бы то ни было, но теперь при правильной настройке элемента холста в HTML и включении в код всего лишь нескольких инструкций на JavaScript, мы располагаем фантастически мощными средствами рисования непосредственно в браузерной среде. Разъяснения даются в следующей главе, а пока на рис. 5.1 изображен элемент холста, в котором нарисован прямоугольник с заполненным цветовым градиентом, полученный путем использования простых команд из следующего примера: Рис. 5.1. Прямоугольник, заполненный цветовым градиентом, на элементе холста HTML5

70 | Глава 5 Пример 5.1 1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="utf-8"> 5. <title>Gradient Example</title> 6. </head> 7. <body> 8. <canvas id='canvas'></canvas> 9. <script> 10. canvas = document.getElementById('canvas') 11. context = canvas.getContext('2d') 12. w = 640 13. h = 320 14. canvas.width = w 15. canvas.height = h 16. gradient = context.createLinearGradient(0, 0, w, 0) 17. 18. gradient.addColorStop("0", "magenta") 19. gradient.addColorStop(".25", "blue") 20. gradient.addColorStop(".50", "green") 21. gradient.addColorStop(".75", "yellow") 22. gradient.addColorStop("1.0", "red") 23. 24. context.fillStyle = gradient 25. context.fillRect(0,0,640,320) 26. </script> 27. </body> 28. </html> Геолокация Одной из самых заметных новых функций, необходимых для мобильного просмотра содержимого в Интернете, считается геолокация. С ее помощью можно вызвать карту своей местности, если заблудились, или же найти ближайшие заправочные станции или другие объекты. К сожалению, для полноценного использования геолокации несведущим в программировании все же понадобятся весьма незначительные знания JavaScript, позволяющие воспользоваться всего лишь несколькими строками кода, которые потом можно будет вырезать и вставлять в новый код. Например, на рис. 5.2 показана карта, отображенная на экране в результате поиска места, где используется веб-браузер (в данном случае — юго-восток Англии). Документ, использованный для создания этого снимка экрана, можно увидеть в примере 5.2. Опустим пока вопрос о том, как это работает, поскольку подробный ответ на него можно будет найти в главе 12 «Применение геолокации», а пока просто посмотрите на строку 8, в которой фигурируют две функции: granted (предоставлено)

Введение в HTML5 | 71 и denied (отказано). Дело в том, что пользователь сам решает, раскрывать ли свое местоположение браузеру или нет, поскольку это может быть сопряжено с угрозами безопасности. Рис. 5.2. Карта, отображаемая в результате геолокационного поиска Пример 5.2 1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <title>Geolocation Example</title> 5. </head> 6. <body> 7. <script> 8. navigator.geolocation.getCurrentPosition(granted, denied) 9. 10. function granted(position) 11. {

72 | Глава 5 12. var lat = position.coords.latitude 13. var lon = position.coords.longitude 14. 15. alert("Permission Granted. You are at location:\n\n" 16. + lat + ", " + lon + "\n\nClick 'OK' to load " 17. + "Google Maps with your location") 18. 19. window.location.replace("https://www.google.com/maps/@" 20. + lat + "," + lon + ",8z") 21. } 22. 23. function denied(error) 24. { 25. var message 26. 27. switch(error.code) 28. { 29. case 1: message = 'Permission Denied'; break; 30. case 2: message = 'Position Unavailable'; break; 31. case 3: message = 'Operation Timed Out'; break; 32. case 4: message = 'Unknown Error'; break; 33. } 34. 35. alert("Geolocation Error: " + message) 36. } 37. </script> 38. </body> 39. </html> Если пользователь не против, в строке 10 вызывается функция с именем granted, в противном случае в строке 23 запускается функция с именем denied. В первом случае координаты ищутся и передаются на карту Google для отображения, а во втором указывается причина, по которой карта не может быть отображена. Конечно, рабочий веб-сайт выдаст больше, чем просто краткое сообщение об ошибке, но этот код предназначен только для объяснения того, что происходит. И, как уже говорилось, не переживайте, если что-то непонятно, все станет ясно по мере чтения книги. Формы Использование форм в HTML5 подверглось целому ряду усовершенствований. Например, теперь теги <input> можно размещать вне тегов <form> и </form>, если для идентификации формы, к которой относится ввод, используется новый атрибут form. Точно так же с помощью нового атрибута formmethod можно изменять метод (выбирая GET или POST).

Введение в HTML5 | 73 Также имеется несколько усовершенствований, позволяющих изменять тип кодировки формы, создавать или даже переопределять новый атрибут novalidate. Для изменения действия (или, иначе говоря, назначения) формы можно также воспользоваться атрибутом formaction, а для изменения места отображения ответа на фрейм, вкладку или окно можно воспользоваться атрибутом formtarget. Наряду с этим с помощью атрибутов height и width можно изменять высоту и ширину типа image тега <input>. Кроме этого, как показано на рис. 5.3, в поисковой системе Google можно увидеть в повседневном применении несколько наиболее удобных новых атрибутов. Это автозаполнение, которое позволяет предлагать для поля заранее заготовленные значения, и автофокус, заставляющий браузер автоматически фокусироваться на поле формы. Рис. 5.3. Поисковая система Google, предлагающая выбор входных данных На рисунке показано, какие подразумеваемые вами поисковые запросы считаются наиболее вероятными, поскольку в наборе заранее заготовленных входных данных,

ГЛ А В А 1 2 Применение геолокации Введение С невероятным ростом популярности смартфонов возможность определения местоположения устройства стала практически обязательной, особенно для запуска интерактивных карт, работы навигационного программного обеспечения и даже для поиска локальных точек доступа Wi-Fi или мест предоставления разных услуг: ресторанов, пунктов выдачи наличных, проката машин и т. д. Геолокация также все шире используется в попытках предоставления платных услуг, выражающихся в предложениях принять участие в рекламных акциях находящихся поблизости магазинов, и в чуть более приятных делах, позволяя узнать, есть ли поблизости друзья или знакомые. К счастью, разрешение на раскрытие информации о своем местоположении можно контролировать, поэтому любые риски конфиденциальности или безопасности, которые может повлечь за собой применение той или иной технологии, можно свести к минимуму. Здесь рассматриваются приемы использования JavaScript для определения местоположения любого устройства с поддержкой геолокации, если пользователь разрешает это и браузер поддерживает эту функцию. В случае успеха будут предоставлены долгота и широта местонахождения пользователя в виде максимально точной, в соответствии с возможностями браузера, пары координат (обычно на мобильном устройстве это делается через спутниковый чип GPS). Структура В этой главе рассматриваются следующие темы: Что такое геолокация, предоставляемая GPS или другими средствами. Способы проверки, поддерживает ли браузер пользователя геолокацию. Управление блокировкой пользователей и согласием на предоставление их местонахождения. Преобразование местонахождения пользователя в широту и долготу с целью отображения его на карте.

176 | Глава 12 Цели Здесь предстоит изучить все тонкости геолокации HTML5, узнать о ее составляющих, об извлечении пользы от ее применения в различных обстоятельствах и даже освоить способы преодоления любых ошибок, с которыми можно столкнуться при ее применении. Изучение материалов главы позволит полностью освоить геолокацию и получать точные координаты широты и долготы местонахождения пользователя в том случае, если к ним будет открыт доступ. Что такое GPS Служба спутникового глобального позиционирования (Global Positioning Satellite, GPS) состоит из нескольких спутников, вращающихся вокруг Земли, положение которых определено с весьма высокой точностью. Когда устройства с поддержкой GPS настраиваются на эти спутники, разница во времени поступления сигналов от разных спутников позволяет устройству узнать его местоположение с точностью до нескольких метров. При этом используется тот факт, что скорость света (и радиоволн) — известная постоянная величина, а время, необходимое сигналу, чтобы добраться от спутника до устройства GPS, точно указывает на расстояние до спутника. При записи разного времени поступления сигналов от разных спутников простой расчет позволяет устройству определить положение каждого спутника относительно друг друга и, следовательно, очень точно произвести триангуляционные вычисления положения устройства относительно них. Многие мобильные устройства, включая телефоны и планшеты, имеют чипы GPS и могут предоставлять эту информацию пользователям. Но у некоторых устройств их нет, у других они отключены, а третьи могут использоваться в помещении, где не проходит сигнал от спутников GPS. В таких случаях для попытки определения местоположения устройства могут использоваться дополнительные методы. Альтернативы применению GPS Если в устройстве присутствует оборудование для мобильной связи, но отсутствует GPS (что маловероятно) или же GPS отключен, оно может попробовать провести триангуляционные вычисления своего местоположения, проверив синхронизацию сигналов, полученных от различных вышек мобильной связи, с которыми оно может связываться (и чьи позиции известны с высокой точностью). При наличии нескольких вышек местоположение может быть вычислено с точностью, почти не уступающей точности GPS. Но если привязка возможно только к одной вышке, для определения радиуса окружности, в очерчиваемой области которой, вероятно, и находится устройство,

Применение геолокации | 177 можно использовать силу сигнала. То есть данные могут указывать на любую точку на удалении от 1,5–3 км и до нескольких десятков метров от фактического местоположения. Если нет и такой возможности, в радиусе действия вашего устройства могут быть точки доступа Wi-Fi с известным местоположением, а, поскольку все точки доступа имеют уникальный идентификационный адрес, называемый адресом управления доступом к среде (Media Access Control, MAC), местоположение может быть достаточно точно определено в пределах одной или двух улиц. И если этот способ будет недоступен, можно запросить адрес интернет-протокола (IP), используемого вашим устройством, который затем можно использовать в качестве приблизительного индикатора вашего местоположения. Но зачастую это дает только местоположение основного коммутатора, принадлежащего вашему интернет-провайдеру, который может находиться в десятках или даже сотнях километров от вас. Но, по крайней мере, ваш IP-адрес позволяет (как правило) уточнить страну, а иногда и регион нахождения, предоставляя возможность подобраться к вашему местоположению как можно ближе через главный узел провайдера, чего обычно вполне достаточно для решения большинства задач. ПРИМЕЧАНИЕ Ваш IP-адрес обычно используется медиакомпаниями, ограничивающими воспроизведение своего контента на той или иной территории. Но можно настроить прокси-серверы, использующие IP-адрес пересылки в той стране, которая блокирует свой контент, чтобы получать и передавать контент, минуя блокировку, непосредственно в используемый вами браузер. Поэтому следует понимать, что поиск кого-то по IP-адресу не дает 100%-ной уверенности правильного определения его страны пребывания. Проверка доступности геолокации Из предыдущих глав уже известно, что возможности HTML5 иногда настолько расширены, что к ним нельзя получить доступ с помощью простого HTML, поэтому, чтобы воспользоваться ими, не говоря уже об эффективных способах работы с ними, требуется определенное знание языка JavaScript. Мало знакомые с программированием на JavaScript люди смогут на примерах главы расширить познания в этом языке. Постепенно приемы вырезания и вставки фрагментов кода из примеров войдут в привычку, и они перестанут быть для вас некими заранее упакованными частями кода, вы досконально разберетесь в их назначении и использовании и сможете создавать свои собственные процедуры для доступа к различным функциям наиболее удобными для вас и всецело подходящими для ваших проектов способами.

178 | Глава 12 Итак, давайте прямо сейчас приступим к работе с кодом примера 12.1, который просто определяет, поддерживает ли ваш браузер геолокацию, выдавая всплывающее сообщение с помощью функции alert(). Пример 12.1 1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="utf-8" /> 5. <title>Testing for Geolocation</title> 6. </head> 7. <body> 8. <script> 9. // Начало разбора кода примера в книге 10. if (typeof navigator.geolocation == 'undefined') 11. { 12. alert("Извините, геолокация не поддерживается".) 13. } 14. else 15. { 16. alert("Отлично, геолокация поддерживается".) 17. } 18. // Конец разбора кода примера в книге 19. </script> 20. </body> 21. </html> В этом примере холст не используется, поэтому код немного короче примеров из предыдущих глав и приведен в полном объеме. Далее по главе в примерах будут показаны только строки, находящиеся между комментариями (здесь они в строках 9 и 18). Надеюсь, основная часть кода вопросов не вызывает, остается только объяснить содержимое строк с 10 по 17. Здесь проводится проверка свойства navigator.geolocation, которое должно быть у всех браузеров, поддерживающих геолокацию. Если выяснится, что оно не определено, значит, его не существует, равно как и функции геолокации. В наше время функция геолокации поддерживается практически всеми браузерами, но пожертвовав парой дополнительных строк кода, можно предупредить пользователей вашего веб-сайта, запускающих его на устаревшем браузере, о том, что эта функция на нем недоступна. Оповещение — информирование пользователя о наличии или отсутствии функции геолокации в небольшом всплывающем окне с текстом. Оно проводится путем вызова функции alert(), приостанавливающей выполнение сценария, пока пользователь не щелкнет на кнопке OK (или, в случае мобильного браузера, не коснется ее изображения).

Применение геолокации | 179 Для проверки используется инструкция if() с выражением внутри скобок, вычисление которого в true приводит к выполнению инструкций, заключенных в фигурные скобки. Проверка отсутствия свойства navigator.geolocation может привести только к результату true или false. Если получен результат true, выполнение кода в строке 12 приводит к отображению оповещения об отсутствии поддержки геолокации. Затем следует инструкция else, для которой, как и следовало ожидать, размещаются инструкции, выполняемые при вычислении условной инструкции в false. В этом случае будет выполнен любой код внутри ее фигурных скобок. На рис. 12.1 показан браузер, поддерживающий геолокацию, поэтому выражение вычисляется в false, и, следовательно, выполняется код строки 16, выводящий второе окно оповещения об успешном проведении проверки. Рис. 12.1. Этот браузер поддерживает геолокацию, о чем свидетельствует появление всплывающего окна с оповещением об успешном завершении проверки Использование консоли разработчика Для тестирования кода разработчикам лучше воспользоваться не окнами оповещения, а отправкой сообщений в консоль разработчика JavaScript. Тогда не будет никаких отвлекающих всплывающих окон, а информацию можно будет просто увидеть в консоли. Так, например, вместо показа двух оповещений в примере 12.1 в ходе разработки результат выполнения следующего кода мог бы выглядеть, как на рис. 12.2. if (typeof navigator.geolocation == 'undefined') { console.log("Извините, геолокация не поддерживается".) } else { console.log("Отлично, геолокация поддерживается".) } Более подробные сведения о настройке и использовании консоли разработчика приведены в главе 3 «Visual Studio Code». Теперь уже можно убедиться и в том,

180 | Глава 12 насколько полезна консоль не только для пошагового просмотра и изучения документов и их стилей, но и для получения в ходе разработки сообщений, не мешающих запуску тестируемого кода. Рис. 12.2. Сообщение отображается в консоли разработчика Перенаправление пользователей Если код определяет, что браузер не поддерживает геолокацию, то, наверное, захочется сделать нечто большее, чем просто вывести окно с оповещением (от которого фактически мало толку) или отправить сообщение в консоль разработчика. По всей видимости, лучше было бы направить пользователя на другую вебстраницу, где для него есть более подходящее содержимое. Это делается простым указанием нового URL-адреса в настройках местоположения браузера. Соответствующие действия показаны в примере 12.2, где приводится только та часть документа, которая связана с применением JavaScript. Пример 12.2 1. if (true == true) 2. { 3. window.location = 'http://google.com' 4. } Чтобы обеспечить постоянную работу примера, вместо прежней инструкции проверки условия применена новая, которая всегда будет возвращать значение true, поскольку true всегда равно true. Если же оставить проверку на поддержку геолокации, перенаправление по URL-адресу (в строке 3) можно будет протестировать только в браузерах без геолокации. Как показано на рис. 12.3, результатом выполнения кода примера станет немедленное перенаправление пользователя на веб-сайт Google.

ГЛ А В А 1 4 Локальное хранилище и многое другое Введение В HTML5 есть целый ряд дополнительных разносортных функций, поэтому они были собраны вместе в этой предпоследней главе, посвященной HTML5. Среди них — функции локального и сеансового хранилища; средства, упрощающие понимание ваших документов поисковыми роботами, использующими микроданные; функции передачи кода, требующего серьезных вычислительных ресурсов веб-воркеров и функции, позволяющие создавать автономные веб-приложения. Многие из этих функций требуют применения сценариев на JavaScript, поэтому основные положения по их использованию сопровождаются ссылками на источники дополнительной информации, которая может вас заинтересовать. Структура В этой главе рассматриваются следующие темы: Приемы хранения данных на локальном устройстве пользователя. Осознание важности предоставления роботам доступа к чтению веб-документов. Приемы ускорения выполнения кода с помощью веб-воркеров. Приемы превращения веб-страниц в автономные веб-приложения. Цели Здесь путем изучения целого ряда тонкостей HTML5, управляемых с помощью JavaScript, устранятся многие пробелы в ваших знаниях, изучатся средства упрощения понимания веб-документов поисковым роботом. Освоение предлагаемого материала позволит изучить приемы разгрузки сценариев JavaScript с помощью веб-воркеров и создания своих собственных веб-приложений.

210 | Глава 14 Использование локального хранилища В былые годы единственным способом хранения данных на компьютере пользователя были cookie-файлы, ограниченные как по количеству, так и по объему данных в каждом таком файле, не превышающем 4 Кб. Их также нужно было передавать в обе стороны при каждой перезагрузке страницы, и, если сервер не использовал шифрование Secure Sockets Layer (SSL), то при каждой своей передаче файлы cookie пребывали в открытом незашифрованном виде. Но с приходом HTML5 появился доступ к гораздо большему локальному пространству, предназначенному для хранения данных (обычно от 5 Мб до 10 Мб на домен в зависимости от применяемого браузера), которое не вычищается при загрузке страницы и между посещениями веб-сайта (и даже после выключения компьютера и повторного резервного копирования), и данные которого не отправляются на сервер при каждой загрузке страницы. Можно работать с данными, составляющими пары ключ/значение, где в качестве ключа выступает имя, назначенное для ссылки на данные, а значение может содержать данные любого типа, но сохраненные в виде строки. Все данные для текущего домена имеют уникальный характер. Любое локальное хранилище, созданное веб-сайтами с другими доменами, отделено от текущего локального хранилища по соображениям безопасности и недоступно для любого домена, кроме того, чьи данные в нем хранятся. ПРИМЕЧАНИЕ Возможно, главная причина высокой популярности локальных хранилищ среди веб-разработчиков заключается в том, что файлы cookie могут создаваться только на веб-сервере и отправляться только на него. Без файлов cookie не было бы простого способа сохранить нужное состояние. А локальное хранилище управляется непосредственно в браузере, что позволяет создавать автономные вебприложения, способные в той или иной степени работать вне сети. Кроме того, файлы cookie могут иметь размер до 4 Кб, а размер веб-хранилища в большинстве браузеров может составлять до 5 Мб. Хранение и извлечение локальных данных Для доступа к локальному хранилищу можно воспользоваться методами объекта localStorage под названиями setItem(), getItem(), removeItem() и clear(). К примеру, чтобы сохранить имя пользователя и пароль на локальной системе, можно воспользоваться следующим кодом: localStorage.setItem('username', 'WHouston') localStorage.setItem('password', 'bodyguard1992') Если размер значения превышает оставшееся для хранилища место на диске, выдается исключение 'Out of memory' («Недостаточно памяти»). А получить эти данные

Локальное хранилище и многое другое | 211 при загрузке другой страницы или при возвращении пользователя на веб-сайт, чтобы исключить их повторный ввод, можно с помощью следующего кода: username = localStorage.getItem('username') password = localStorage.getItem('password') Если запрошенный ключ не существует, функция getItem(), как показано на рис. 14.2, возвращает значение null. ПРИМЕЧАНИЕ Если бы все веб-сайты могли видеть данные, сохраненные другими веб-сайтами, локальное хранилище стало бы источником проблем безопасности. Поэтому отдельно взятый веб-сайт может получить только то локальное хранилище, которое сам и создал, а все остальные локальные данные будут для него невидимы, будто их и вовсе не существует. При этом некачественный код может оставлять лазейки для атак межсайтового скриптинга (XSS), позволяя злоумышленникам находить способы обмана браузера, заставляя его полагать, что данные поступают с одного сайта, хотя на самом деле они поступают с другого. Поэтому, несмотря на то что примеры в главе относятся к паре имени пользователя и пароля, сохранения этих элементов в локальном хранилище все же стоит избегать, если есть хоть малейшие опасения по поводу возможности попадания веб-сайта под огонь XSS-атак. Сложность вопросов, касающихся XSS, заставляет при любых сомнениях призывать к тому, чтобы в локальное хранилище помещались только неконфиденциальные данные, такие как пользовательская разметка и цветовые предпочтения. Использовать имена функций необязательно, поскольку доступ к объекту localStorage можно получить напрямую, и две следующих инструкции абсолютно эквивалентны: localStorage.setItem('key', 'value') localStorage['key'] = 'value' По аналогии с этим эквивалентны и следующие две инструкции: value = localStorage.getItem('key') value = localStorage['key'] Давайте все полученные только что знания сведем в исполняемый код, приведенный в примере 14.1, где показаны только те инструкции, которые заключены в раздел <script>. Пример 14.1 1. if (typeof localStorage == 'undefined') 2. { 3. alert('Local storage unavailable.') 4. } 5. else 6. {

212 | Глава 14 7. localStorage.setItem('username', 'WHouston') 8. localStorage.setItem('password', 'bodyguard1992') 9. 10. username = localStorage.getItem('username') 11. password = localStorage.getItem('password') 12. 13. alert("Data retrieved: username = '" + 14. username + "', password = '" + password + "'.") 15. } В строках с 1 по 4 выполняется проверка поддержки браузером локального хранилища. Если оно не поддерживается, объект localStorage будет иметь значение undefined, так что проверка особых трудностей не вызывает. Локальные хранилища должны поддерживать все современные браузеры, но, если у пользователя более старый браузер, эти несколько строк кода ему не помешают. Конечно, вместо окна оповещения, выводимого функцией alert(), было бы полезнее применить ряд более подходящих инструкций или даже внести изменение в свойство location объекта window для вызова новой страницы. Если локальное хранилище поддерживается, то выполняются строки с 5 по 15, при этом в строках 7 и 8 задается сохранение некоторых данных на локальное устройство пользователя, а в строках с 10 по 11 задается извлечение этих же данных. В строке 13 функция alert() задает появление всплывающего окна, показанного на рис. 14.1, позволяющего показать, что процесс действительно работает. Рис. 14.1. Данные были сохранены в локальном хранилище и извлечены из него После сохранения эти значения так и останутся в локальном хранилище, пока не будут удалены из него, в чем можно будет убедиться, закомментировав, как показано ниже, строки 7 и 8, а затем запустив пример еще раз. Результат должен быть тем же, что показан на рис. 14.1. 7. // localStorage.setItem('username', 'WHouston') 8. // localStorage.setItem('password', 'bodyguard1992')

Локальное хранилище и многое другое | 213 Удаление и очистка локальных данных Чтобы удалить элемент данных из локального хранилища, нужно всего лишь вызвать функцию removeItem(): username = localStorage.removeItem('username') password = localStorage.removeItem('password') Эта функция служит для извлечения элемента данных и помещения его в переменную (в данном случае это переменные username и password) с последующим удалением данных из локального хранилища. Если чтение удаляемых данных не требуется, можно просто вызвать функцию без присваивания: localStorage.removeItem('username') localStorage.removeItem('password') Можно также, вызвав функцию clear(), очистить все локальное хранилище для текущего домена: localStorage.clear() Давайте так и сделаем, применив код примера 14.2. Пример 14.2 1. if (typeof localStorage == 'undefined') 2. { 3. alert('Local storage unavailable.') 4. } 5. else 6. { 7. localStorage.removeItem('username') 8. localStorage.removeItem('password') 9. 10. username = localStorage.getItem('username') 11. password = localStorage.getItem('password') 12. 13. alert("Data retrieved: username = '" + 14. username + "', password = '" + password + "'.") 15. } Здесь в строках 7 и 8 задается удаление сохраненных данных, о чем свидетельствует изображение на рис. 14.2, где показано, что оба извлеченных значения равны нулю. В остальном код такой же, как и в примере 14.1, поэтому можно будет без труда разобраться в том, что здесь происходит. Разумеется, более широкое использование локального хранилища будет сводиться к написанию соответствующего кода JavaScript, но углубление в суть вопроса выходит за рамки тематики этой книги.

214 | Глава 14 Рис. 14.2. Локальные данные были стерты Использование взамен этого хранилища сеансов Преимущество локального хранилища в том, что хранящиеся в нем данные сохраняются в течение длительного времени, если только не будет очищен кэш браузера. Если же предпочтение отдается хранению данных только в ходе текущего сеанса просмотра, то эта задача решается легко и просто. Нужно всего лишь заменить все случаи использования термина localStorage на sessionStorage, и все получится, поскольку будет работать точно так же. Единственное отличие будет в том, что при закрытии пользователем текущей вкладки или окна браузера срок хранения всех данных хранилища сеанса истечет. Но если хранилище сеансов использовать только для поддержки настроек во время текущего сеанса пользователя на веб-сайте (например, для списка элементов корзины покупок), то все происходящее с этими данными после их проверки и завершения сеанса уже не играет никакой роли, поэтому их не следует даже пытаться сохранять в более долговременном локальном хранилище. ПРИМЕЧАНИЕ Поскольку хранилище сеансов настраивается для каждой вкладки, то при открытии пользователем веб-сайта сразу в нескольких вкладках собственное отдельное хранилище сеансов будет у каждой вкладки. Это следует учитывать, если данные сеанса у некоторых пользователей продолжают теряться в ходе него, поскольку это может быть связано с переключениями между вкладками, когда они меняются местами, и с открытием сайта на новых вкладках. Отследить это можно, применив уникальный токен в виде случайной строки и сохранив его в хранилище сеансов. Считывая эту строку, можно определить, к какому из хранилищ осуществляется доступ. И опять же, рассматривать соответствующий сценарий JavaScript не позволяют рамки тематики этой книги. Микроданные Микроданные используются с целью вложения метаданных в существующий контент веб-страниц. Их затем можно извлечь и обработать поисковыми системами и

Локальное хранилище и многое другое | 215 поисковыми роботами с целью повышения удобства пользователей при просмотре информации. Более того, микроданные способствуют более четкой структуризации данных и более точной детализации информационного наполнения и назначения веб-документа при его анализе поисковыми системами. Иными словами, микроданные — это подмножество HTML, разработанное для придания документу смысла с целью облегчения машинного анализа, результаты которого совпадали бы с представлениями читателей о сути документа. Микроданные открывают доступ к следующим новым атрибутам тегов: itemscope, itemtype, itemid, itemref и itemprop. Их использование позволяет четко определять свойства документа, например книги, предоставляя информационный перечень, которым компьютер может воспользоваться для распознания, к примеру, ее автора, издателя, сути содержимого и т. д. В примере 14.3 показано, насколько легко микроданные можно применить к стандартному HTML-документу. Пример 14.3 1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="utf-8"> 5. <title>Incorporating Microdata</title> 6. </head> 7. <body> 8. <section itemscope 9. itemtype='http://data-vocabulary.org/Person'> 10. <img itemprop='photo' 11. src ='elon_musk.jpg' 12. alt ='Elon Musk' 13. align='left' 14. style='margin-right:10px'> 15. 16. <h2 itemprop='name'>Elon Musk</h2> 17. 18. <p> 19. Elon Musk is a South African-born American 20. <span itemprop='role'>entrepreneur</span> and 21. <span itemprop='title'>businessman</span>. 22. He likes to call himself the 23. <span itemprop='nickname'>Technoking</span> 24. of Tesla, and his website is: 25. <a itemprop='url' 26. href='https://www.tesla.com/en_GB/elon-musk'>tesla.com</a>. 27. </p> 28. 29. <p>Elon's address at SpaceX is:</p>

216 | Глава 14 30. 31. <address itemscope itemtype='http://data-vocabulary.org/Address' 32. itemprop='address'> 33. <p> 34. <span itemprop='street-address'>1 Rocket Road</span><br> 35. <span itemprop='locality' >Hawthorne </span><br> 36. <span itemprop='region' >California </span><br> 37. <span itemprop='postal-code' >90250 </span><br> 38. <span itemprop='country-name' >USA </span> 39. </p> 40. </address> 41. </section> 42. </body> 43. </html> Результат загрузки этого примера в браузер показан на рис. 14.3. Рис. 14.3. При отображении микроданные, имеющиеся на веб-странице, не видны В качестве микроданных можно применять множество различных свойств. Их так много, что для сведений о всем перечне лучше будет посетить сайт tinyurl.com/html5md. Микроданные могут применяться для книг, музыки, телешоу, событий, людей, мест и многих других типов данных. В примере 3.4 использован тип микроданных person, обозначающий их отношение к человеку, и если изучить код, можно заметить тип photo для назначения элемента

ГЛ А В А 1 7 Селекторы атрибутов CSS3 Введение Как известно, селекторы в CSS используются для сопоставления с элементами HTML, подлежащими той или иной стилизации. В CSS2 уже имеются селекторы идентификаторов и классов: # и . (точка), а также универсальный селектор *. Есть также и селекторы-потомки, размещаемые друг за другом, например span em, и дочерние селекторы, разделяемые символом «больше, чем», например span > em. Кроме этого, знак «плюс» (+) позволяет выбрать соседние дочерние элементы, например span + em, есть также и псевдоклассы, проверяющие происходящее, например a:hover, или выделяющие конкретную часть элемента, например p:first-letter. И наконец, есть селекторы атрибутов, позволяющие углубиться во внутреннее содержимое свойств атрибутов, например a[href = 'info.htm'], и это тот самый тип селекторов, который появился в CSS3 в качестве расширения. Структура В этой главе рассматриваются следующие темы: Краткий обзор использования селекторов CSS2. Причины разработки новых селекторов атрибутов CSS3. Сведения о приемах поиска и сопоставления любых атрибутов, требующих стилевого оформления. Приемы сопоставления с учетом регистра символов или без его учета. Цели Цель главы — дать полное представление об использовании селекторов атрибутов CSS3 и показать их возможности и способы применения. Изучение предлагаемого материала позволит досконально разобраться в порядке применения селекторов атрибутов и вывести стилевое CSS-оформление на новый уровень.

260 | Глава 17 Селекторы атрибутов CSS А что можно придумать для повышения эффективности селекторов атрибутов? Ответов много, поскольку теперь доступны следующие операторы, где attr — атрибут, а value — проверяемое значение, а все, что между ними — оператор. Если чтото непонятно, не стоит беспокоиться, все прояснится по ходу чтения главы: [attr]: выбор элементов с именем attr. [attr = value]: выбор элементов с именем attr, чье значение в точности соответствует value. [attr ~= value]: выбор элементов по любому слову в строковом значении value, соответствующему списку слов в attr, разделенных пробелами. [attr |= value]: выбор элементов по значениям attr, точно соответствующим значению value или же точно соответствующим значению value, и сразу же после них содержащим дефис. [attr ^= value]: выбор элементов по значениям attr, начинающимся со строкового значения, содержащегося в value. [attr $= value]: выбор элементов по значениям attr, заканчивающимся строковым значением, содержащимся в value. [attr *= value]: выбор элементов по значениям attr, имеющим в своем составе строковое значение, содержащееся в value. [attr operator value i]: когда i (или I) помещается перед закрывающей скобкой, значение сравнивается без учета регистра, при этом различия между верхним и нижним регистром символов игнорируются. [attr operator value s]: когда s (или S) помещается перед закрывающей скобкой, значение сравнивается с учетом регистра, т. е. value должно точно соответствовать строке, и сравниваемые символы должны соответствовать как по нижнему, так и по верхнему регистру (пока что, похоже, это работает только в Firefox). Селектор по имени атрибута Разобраться в сути первой пары селекторов нетрудно, поскольку с этими селекторами уже, скорее всего, приходилось сталкиваться и, возможно, даже использовать их в своих проектах CSS2, как в примере 17.1, где просто выбирается именованный атрибут, и в данном случае это элемент <img> с атрибутом title. Пример 17.1 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Name Attribute Selectors</title> 5. <style>

Селекторы атрибутов CSS3 | 261 6. img[title] { border : 5px solid black; } 7. </style> 8. </head> 9. <body> 10. <center> 11. <img src='cat.png' title='main'> 12. <img src='cat.png'> 13. </center> 14. </body> 15. </html> В строках 11 и 12 задается одно и то же отображение кошачьих глаз, но только в строке 11 применяется атрибут title. Поэтому, как показано на рис. 17.1, CSSстиль, указанный в строке 6 помещает в рамку только первое изображение, для которого указан этот атрибут. Рис. 17.1. Выбрано только первое изображение, имеющее атрибут title Селектор по значению атрибута Давайте продолжим работу с примером, проверив не только наличие атрибута, но и, как показано в примере 17.2, значение, примененное к атрибуту, где значение main у атрибута title есть только у одного элемента <img>, и именно оно и будет выбрано. Пример 17.2 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Value Attribute Selectors</title> 5. <style> 6. img[title = 'main'] { border : 5px solid black; } 7. </style> 8. </head> 9. <body> 10. <center>

262 | Глава 17 11. <img src='cat.png' title='main'> 12. <img src='cat.png' title='second'> 13. <img src='cat.png'> 14. </center> 15. </body> 16. </html> Здесь, судя по коду в строках с 11 по 13, изображение выводится на экран три раза, но слово mail в значении атрибута title имеется только у экземпляра в строке 11. Вполне ожидаемый результат наличия рамки только у первого экземпляра показан на рис. 17.2, и хотя у второго экземпляра также имеется атрибут title, но его значение не совпадает с заданным, и в рамку этот элемент не помещается. Рис. 17.2. Здесь опять условию выбора соответствует только первое изображение Селектор по слову из списка Соответствие этому селектору будет соблюдаться, только если значение, следующее за селектором, будет найдено в качестве любого отдельно взятого слова в атрибуте элемента среди группы слов, разделенных пробелом. Такое обычно случается, когда к элементу, как показано в примере 17.3, одновременно применяется сразу несколько имен классов, а выбор идет только для того элемента, для которого используется имя класса main. Пример 17.3 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Word List Selector</title> 5. <style> 6. p[class ~= 'main'] { text-decoration : underline; }

ГЛ А В А 1 8 Создание фона Введение Создание фона — важное новое дополнение в CSS3. Возможности новых функций позволяют не привязываться к одному фоновому цвету или изображению и использовать сразу несколько рисунков и накладывать на них элементы множеством способов. Атрибут border-box позволяет работать с внешним краем границы, атрибут paddingbox — только до края области отступов, а атрибут content-box — только до края области содержимого страницы. Кроме этого, на основе их значений можно установить области отсечения или определить, где следует разместить источник контента. И наконец, с помощью CSS можно не только выбирать, где размещать содержимое, но и определять его отношение к фону и порядок взаимодействия с ним. Эта тема, поскольку в ряде примеров используются литералы шаблонов, очень хорошо подходит к демонстрации приемов размещения кода HTML в JavaScript-разделе документа; они позволяют вставлять переменные непосредственно в HTML-код. Благодаря этому можно будет понять, как вывести вашу веб-разработку на совершенно иной уровень. Структура В этой главе рассматриваются следующие темы: Изучение различных типов доступных фонов. Освоение способов использования для кода HTML литералов шаблонов. Изменение способа отображения фона в элементе. Изучение порядка использования градиентов вместо сплошного фона или изображений. Цели В этой главе подробно рассматриваются все новые функции создания фона, доступные в CSS3, включая использование изображений и градиентов. Изучив предла-

272 | Глава 18 гаемый материал, вы сможете стилизовать фон любого желаемого элемента множеством интересных способов. Попутно можно будет открыть для себя возможности применения шаблонов с использованием JavaScript. Обрезка и начало фона В CSS уже имелась поддержка фонов, но только в пределах областей блочной модели. Теперь же, в CSS3, она входит с двумя новыми свойствами: background-clip и background-origin. Они позволяют указать начало фона внутри элемента, а также где обрезать фон, чтобы его не было в тех или иных частях блочной модели элемента. Оба свойства поддерживают следующие атрибуты: border-box: относится к внешнему краю границы элемента padding-box: относится к внешнему краю внутреннего отступа элемента content-box: относится к внешнему краю области содержимого элемента Появилось также и новое свойство размера фона background-size, позволяющее поддерживать сразу несколько фоновых решений. Давайте начнем с рассмотрения новых свойств обрезки и начала фона. Но, поскольку один из самых эффективных инструментов создания шаблонов, литералы шаблонов, уже встроен во все современные браузеры, с ним и нужно познакомиться в первую очередь. Литералы шаблонов Конечно, в создании фона с применением литералов нет ничего необычного, но именно здесь в книге этот способ может найти себе применение, поэтому, прежде чем продолжить тему создания фона, давайте разберемся в том, что это такое. Знакомство с такими началами JavaScript, как переменные и массивы, уже состоялось. Нетрудно вспомнить, что им можно присваивать числовые или строковые значения (а также значения многих других типов). В примере 18.1, начиная со строки 11, двум переменным, name и title, присваиваются, соответственно, строковые значения Robin и Web Developer. Пример 18.1 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>String Concatenation</title> 5. </head> 6. <body> 7. <h1> 8. <output id='output'></output>

Создание фона | 273 9. </h1> 10. <script> 11. name = 'Robin' 12. title = 'Web Developer' 13. string = 'My name is ' + name 14. string += ' and I am a ' + title 15. 16. document.getElementById('output').innerHTML = string 17. </script> 18. </body> 19. </html> Затем в строках 13 и 14 с помощью оператора + эти значения переменных объединяются в более длинную строку. В JavaScript этот оператор при использовании со строками приводит к их объединению. В строке 13 сочетанием присваивания и конкатенации создается первая половина длинной строки. А в строке 14 используется оператор += , представляющий собой сокращенный способ добавления в конец предыдущей строки. Например, вместо использования выражения string1 = string1 + string2 можно воспользоваться более короткой формой записи string1 += string2. Затем полученный результат вставляется в HTML-элемент <output>, имеющий идентификатор output. Это делается в строке 16 с помощью инструкции, которая уже встречалась в аналогичных местах книги. Результат загрузки этого документа в браузер показан на рис. 18.1. Рис. 18.1. Объединение и отображение строки средствами JavaScript Все это обычный код JavaScript, но его можно упростить еще больше, воспользовавшись литералами шаблонов, представляющими собой средства вставки значений переменных непосредственно в строки JavaScript без использования присваиваний или конкатенаций. Их работа осуществляется за счет применения вместо одинарных или двойных кавычек символа обратного апострофа `. На многих клавиатурах его можно найти слева от клавиши 1. Когда строка заключается в обратные апострофы, JavaScript получает команду вычислить любое содержимое внутри выражения ${…}, и заменить выражение вычисленным результатом. Пример 18.2 — переделка предыдущего примера.

274 | Глава 18 Пример 18.2 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Template Literals</title> 5. </head> 6. <body> 7. <h1> 8. <output id='output'></output> 9. </h1> 10. <script> 11. name = 'Robin' 12. title = 'Web Developer' 13. 14. document.getElementById('output').innerHTML = 15. `My name is ${name} and I am a ${title}` 16. </script> 17. </body> 18. </html> Присмотревшись к строке 15, можно увидеть, что строка, вставляемая в HTML-код элемента <output>, заключена в пару одиночных обратных апострофов, а имена двух переменных, name и title, помещены в выражения ${…}, в результате чего отображаемый результат идентичен показанному на рис. 18.1. Мало того, что это простая строка, которая не требует пояснений (если уже известно, что такое литералы шаблонов), она делает ненужными строки 13 и 14 предыдущего примера. Короче говоря, получился готовый HTML-шаблон для работы с любыми значениями, которые могут содержаться в этих переменных. Надеюсь, этот простой трюк впечатлил вас своей эффективностью, позволяющей использовать JavaScript в качестве языка шаблонов, а также всем остальным, что может вам пригодиться. Кроме того, любой специалист, занимающийся поддержкой ваших проектов, поблагодарит вас за это. Использование свойства background-clip Завершив изучение краткого руководства по шаблонам, давайте расширим свои познания в создании фона, изучив применение атрибутов background-clip и background-origin. Первый из них указывает, следует ли игнорировать (не показывать) фон, если он появляется либо в области границы, либо в области внутреннего отступа элемента. Он поддерживает три ранее рассмотренных значения: border-box, padding-box и content-box.

Создание фона | 275 Например, следующее указание гласит, что фон должен отображаться во всех частях элемента вплоть до внешнего края его границы: background-clip:border-box; Или же, если нужно не показывать фон в любой части области границы элемента, можно воспользоваться следующим указанием: background-clip:padding-box; И наконец, если фон не нужно показывать нигде, кроме области содержимого элемента, можно воспользоваться следующим указанием: background-clip:context-box; Атрибут background-clip в равной степени применяется как к цветовой настройке фона, так и к фоновым изображениям. Использование свойства background-origin Указать смещение от верхнего левого угла элемента фонового изображения можно как в сочетании со свойством background-clip, так и без него. Это делается с помощью атрибута background-origin, в котором также поддерживаются три ранее описанных значения: border-box, padding-box и content-box. Например, следующее указание задает отображение фона с верхним левым углом точно в верхнем левом углу границы элемента: background-origin:border-box; Если нужно, чтобы верхний левый угол изображения отображался точно в верхнем левом углу области внутреннего отступа элемента, можно воспользоваться следующим указанием: background-origin:padding-box; Если же нужно, чтобы верхний левый угол изображения отображался точно в верхнем левом углу внутренней области содержимого элемента, можно воспользоваться следующим указанием: background-origin:content-box; Атрибут background-origin влияет только на фоновые изображения, не касаясь цветового оформления фона. Совместное использование обрезки и начала фона Разобравшись с тем, как работать с исходными изображениями и обрезать фоновые изображения, нужно посмотреть, как эти два свойства работают вместе во всех возможных комбинациях. Всего есть девять комбинаций, составляемых из трех значений, поддерживаемых при обрезке, и тех же трех значений, поддерживаемых при задании начала фона.

276 | Глава 18 Все они объединены в примере 18.3, но вместо использования девяти отдельных HTML-наборов для отображения различных комбинаций, что сделало бы документ слишком длинным и многословным, в нем для краткости используется массив (который, если вспомнить, представляет собой простую последовательность переменных с доступом по числовому значению индекса) и литералы шаблонов. Пример 18.3 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <title>Background Clip and Origin</title> 5. <style> 6. .out { border : 3px solid black; 7. float : left; 8. margin : 0 20px 20px 0; } 9. .in { font : bold 12px monospace; 10. border : 4px dotted red; 11. line-height : 1.25; 12. text-align : center; 13. width : 132px; 14. height : 132px; } 15. .txt { margin-top : 75% } 16. .box { background : url('box.jpg') lime top left no-repeat; 17. color : green; 18. border : 20px dashed blue; 19. padding : 20px; 20. width : 140px; 21. height : 140px; } 22. </style> 23. </head> 24. <body> 25. <output id='output'></output> 26. <script> 27. attr = ['border-box', 'padding-box', 'content-box'] 28. 29. for (x = 0 ; x < 3 ; ++x) { 30. for (y = 0 ; y < 3 ; ++y) { 31. document.getElementById('output').innerHTML += ` 32. <div class='out'> 33. <div class='box' 34. style='background-clip : ${attr[x]}; 35. background-origin : ${attr[y]}'> 36. <div class='in'> 37. <div class='txt'> 38. clip:${attr[x]}<br> 39. origin:${attr[y]} 40. </div>

Создание фона | 277 41. </div> 42. </div> 43. </div>` 44. } 45. } 46. </script> 47. </body> 48. </html> Результат запуска кода этого примера должен выглядеть, как показано на рис. 18.2. Рис. 18.2. Все девять вариантов обрезки фона и выбора начала координат Чтобы объяснить происходящее, понадобится девять экземпляров элементов, у каждого из которых имеется внешняя граница, внутренний отступ и содержимое. Затем, чтобы увидеть, как изображения границ (и, конечно же, цветовые установки) применяются в каждой комбинации, к элементу применяется фоновый цвет, а в фон загружается файл изображения с именем box.jpg.

278 | Глава 18 В примере, начиная со строки 6, создается набор указаний для элементов класса out, предписывающих наличие сплошной черной 3-пиксельной границы для каждого из девяти элементов, размещаемых рядом друг с другом, а для их разделения применяется внешний отступ. Начиная со строки 9, для класса in устанавливается внутренний элемент с красной пунктирной рамкой толщиной 4 пикселя, задаются размеры и стили для текста, чтобы при выполнении кода примера в каждом из девяти элементов присутствовало четкое пояснение. Указания для класса txt в строке 15 обеспечивают отображение текста в нужном месте — на 75% ниже позиции области содержимого. И в завершение раздела <style> класс box, установки для которого начинаются в строке 16: это место, где фоновое изображение загружается в верхний левый угол того места, о котором чуть позже будет объявлено в атрибуте background-origin; для фона устанавливается цвет лайма, а для текста — зеленый цвет. Одновременно с этим создается внутренний отступ в 20 пикселей, чтобы можно было видеть, что происходит внутри него, и назначаются подходящие размеры. Раздел сценария JavaScript Здесь в строках 29 и 30 с использованием переменных циклов x и y, для каждой из которых задается последовательный перебор значений в диапазоне от 0 до 2, создаются два цикла, причем второй цикл вкладывается в первый. Значения переменных цикла x и y используются в качестве индексов массива attr[], объявленного в строке 27, для извлечения содержащихся в нем строковых значений. Затем в строках с 32 по 43 следует блок HTML-кода, заключенный в символы обратных апострофов. Первый обратный апостроф находится в конце строки 31, а составляющий ему пару второй — в конце строки 43. Внутри этих обратных апострофов находится стандартный HTML-код плюс четыре экземпляра литералов шаблона. Если посмотреть на выражение ${attr[x]} в строке 34 и выражение ${attr[y]} в строке 35, можно понять, что они просто извлекают значения атрибутов из массива attr[] для девяти возможных комбинаций при разных значениях х и у. Значения в переменной y служат для установки background-clip в border-box в первой строке отображаемого вывода, в padding-box во второй и в content-box в третьей. Это делается путем применения значения, полученного из attr[], непосредственно из кода HTML к принадлежащему элементу атрибуту style. В то же самое время значения в переменной x приводят к установке backgroundorigin каждого столбца в border-box для первого, padding-box для второго и contentbox для третьего элемента, и все это повторяется для следующих двух строк. При каждом проходе этой пары циклов в строке 31 результат просто добавляется к внутреннему HTML-коду элемента <output>, поэтому отображение результата и появляется на экране. Если присмотреться к изображению на рис. 18.2, можно понять, что именно происходит, и заметить, что для каждой из строк лаймовый фоновый цвет начинает за-