<img src="myVideoPoster.png" width="640" height="480"
alt="__TITLE__"
title="No video playback capabilities, please download the
video below" />
</object>
<p><b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
</p>
</video>
Этот пример кода находится в файле example2.html, который, как и пробный видеофайл в формате MP4, содержится в папке с кодом к данной главе.
Работа audio и video практически ничем не различается
Тег <audio> работает по таким же принципам и с такими же атрибутами (исключая width, height и poster). Основное отличие этих двух тегов друг от друга заключается в том обстоятельстве, что у <audio> отсутствует область проигрывания визуального содержимого.
Адаптивное HTML5-видео и iFrames
Мы уже видели, что поддержка устаревших браузеров неизменно приводит к увеличению объема кода. То, что начиналось с одной или двух строк тега <video>, заканчивается в конечном итоге десятью и более строками (и дополнительным Flash-файлом), и все это ради того, чтобы осчастливить пользователей устаревших версий Internet Explorer! Что касается меня, то я обычно радуюсь возможности отказаться от отката к Flash-технологии в погоне за меньшим объемом используемого кода, но все же бывают разные обстоятельства.
Теперь единственной проблемой со столь понравившейся нам реализацией видео в HTML5 является отсутствие в ней адаптивности. И действительно, в книге приведен пример, который не реагирует на изменение условий просмотра.
К счастью, для встроенного HTML5-видео все это можно легко исправить. Просто уберите из разметки все атрибуты высоты и ширины (например, удалите width="640" height="480") и добавьте в CSS следующий код:
video { max-width: 100%; height: auto; }
Но, вполне успешно работая с файлами, которые могут храниться на локальном устройстве, этот прием не решает проблемы видео, встроенного в iFrame (низкий поклон YouTube, Vimeo и другим сайтам). Следующий код позволяет добавить трейлер фильма «Успеть до полуночи» из YouTube:
<iframe width="960" height="720" src="https://www.youtube.com/
watch?v=B1_N28DA3gY" frameborder="0" allowfullscreen></iframe>
Но если добавлять этот код к странице в неизменном виде, то даже при добавлении предшествующего CSS-правила, если ширина окна просмотра будет менее 960 пикселов, произойдет обрезка.
Проще всего решить эту проблему с помощью небольшого CSS-трюка, впервые примененного французским CSS-специалистом Тьерри Кобленцем (Thierry Koblentz), который создал, по сути, блок с правильным соотношением сторон для содержащегося в нем видео. Я не стану пересказывать собственные объяснения этого мага, которые можно найти по адресу http://alistapart.com/article/creating-intrinsic-ratios-for-video.
Если лень, вам даже не нужно самим вычислять и подставлять соотношение сторон, поскольку существует онлайн-сервис, способный сделать это за вас. Просто обратитесь по адресу http://embedresponsively.com/ и поместите в адресную строку этого сайта URL-адрес вашего iFrame. Сайт выдаст вам простой фрагмент кода, который можно вставить в свою страницу. К примеру, для трейлера фильма «Успеть до полуночи» будет получен следующий результат:
<style>.embed-container { position: relative; padding-bottom: 56.25%;
height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-
container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</
style><div class='embed-container'><iframe src='http://www.youtube.
com/embed/B1_N28DA3gY' frameborder='0' allowfullscreen></iframe></div>
Вот и все, просто добавьте этот фрагмент к своей странице и получите полностью адаптируемое YouTube-видео (примечание: дети, не берите пример с мистера Де Ниро, курить вредно!).
Замечание относительно приоритетности автономной работы
Я уверен, что идеальный способ создания адаптивных веб-страниц и веб-приложений основан на приоритетности автономной работы. Этот подход означает, что сайты и приложения будут продолжать работать и загружаться даже без интернет-соединения. Для достижения этой цели предназначены автономные веб-приложения на HTML5 (http://www.w3.org/TR/2011/WD-html5-20110525/offline.html).
Хотя такие приложения имеют довольно широкую поддержку (http://caniuse.com/#feat=offline-apps), к сожалению, этому решению еще далеко до идеала. При всей относительной простоте его настройки существует целый ряд ограничений и подводных камней. Описание всех препятствий не входит в задачи данной книги. Поэтому я рекомендую прочитать написанную с юмором и довольно подробную статью на эту тему Джейка Арчибальда (Jake Archibald), которую можно найти по адресу http://alistapart.com/article/application-cache-is-a-douchebag.
Я же по этому поводу придерживаюсь мнения, что, несмотря на возможность получения положительного опыта приоритетности автономной работы с помощью автономных веб-приложений (неплохое руководство по способам достижения этой цели можно найти по адресу 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 с альфа-прозрачностью.
Разве можно знать абсолютно все?
Абсолютными знаниями не обладает никто. Я работаю с CSS на протяжении 10 лет и каждую неделю открываю для себя что-то новое (или хорошо забытое старое). Поэтому я не думаю, что стоит гнаться за усвоением каждого возможного сочетания свойств и значений CSS. Разумнее выработать общее представление об имеющихся возможностях.