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

Я же по этому поводу придерживаюсь мнения, что, несмотря на возможность получения положительного опыта приоритетности автономной работы с помощью автономных веб-приложений (неплохое руководство по способам достижения этой цели можно найти по адресу http://diveintohtml5.info/offline.html) и LocalStorage (или какой-нибудь комбинации этих двух средств), до наилучшего решения нам еще слишком далеко. Я возлагаю свои надежды на Service Workers (http://www.w3.org/TR/service-workers/).

На момент написания данной книги Service Workers все еще пребывала в статусе относительно новой спецификации, но в качестве неплохого обзора, я предлагаю посмотреть следующее 15-минутное введение: https://www.youtube.com/watch?v=4uQMl7mFB6g. Прочитайте еще это введение: http://www.html5rocks.com/en/tutorials/service-worker/introduction/ — и проверьте возможность поддержки на сайте https://jakearchibald.github.io/isserviceworkerready/.

Надеюсь, к тому времени, когда я займусь подготовкой третьего издания этой книги (если, конечно, возьмусь за него), появится возможность дать полный обзор и описание реализации этой технологии. Скрестим пальцы на удачу.

Резюме

В данной главе был рассмотрен довольно объемный материал. Все, начиная с основ создания страницы, проходящей проверку на соответствие стандартам HTML5, и заканчивая встраиваемым в вашу разметку сложным медиасодержимым (видео) и вопросами обеспечения его адаптивного поведения.

Хотя это и не имеет отношения к адаптивному дизайну, мы разобрались также в способах написания семантически обогащенного и осмысленного кода и рассмотрели вопрос смыслового наполнения страниц и обеспечения их пригодности для тех пользователей, которые зависят от применения вспомогательных технологий.

Текущая глава была слишком перегружена разметкой, поэтому теперь поменяем задачу. В следующих двух главах мы собираемся постичь всю мощь и гибкость CSS. Сначала рассмотрим эффективность применения селекторов CSS уровня 3 и 4, новые единицы измерения CSS, относящиеся к окнам просмотра, и такие возможности, как использование функции calc и HSL-цвета. Все это позволит нам создавать более быстрые, имеющие более впечатляющие возможности и легче сопровождаемые адаптивные конструкции.

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

За последние несколько лет в CSS-технологию введено множество новых функций. Одни позволяют анимировать и преобразовать элементы, другие дают возможность создавать фоновые изображения, эффекты градиентов, масок и фильтров, а третьи позволяют оживлять SVG-элементы.

Все эти возможности будут рассматриваться в следующих нескольких главах. Я думаю, что в первую очередь было бы полезно изучить ряд основ CSS, претерпевших изменения за несколько последних лет: порядок выбора элементов на странице, единицы измерения, доступные для изменения стиля и размеров наших элементов, и способы, благодаря которым существующие (и будущие) псевдоклассы и псевдоэлементы повышают эффективность использования CSS-таблиц. Кроме того, мы рассмотрим способ разветвления в коде CSS, позволяющий задействовать возможности, поддерживаемые в различных браузерах.

В этой главе будут рассмотрены следующие вопросы:

• анатомия правил CSS (что определяет правило, объявления и пары «свойство — значение»);

• простые и полезные CSS-трюки для адаптивных конструкций (использование нескольких столбцов, перенос слов на новые строки, усечение текста с использованием многоточия, создание областей прокрутки);

• предоставление возможности разветвления функций в CSS (способы применения одних правил в одних браузерах, а других правил — в других браузерах);

• способы применения селекторов по соответствующим подстрокам значений атрибутов с целью выбора HTML-элементов;

• что такое селекторы на основе порядковых номеров и как ими пользоваться;

• что такое псевдоклассы и псевдоэлементы (:empty, ::before, ::after, :target, :scope);

• новые селекторы в модуле CSS Level 4 Selectors (:has);

• что такое переменные CSS и пользовательские свойства и как они записываются;

• что такое CSS-функция calc и как ею можно воспользоваться;

• использование единиц измерения, относящихся к окнам просмотра (vh, vw, vmin и vmax);

• как пользоваться шрифтовым веб-оформлением с помощью @font-face;

• режимы цветовых настроек RGB и HSL с альфа-прозрачностью.