От автора: мы показали вам несколько наиболее практичных новых элементов и функций. В этом же разделе давайте обсудим менее известные элементы, атрибуты и свойства, которые были включены в спецификацию HTML5.
Элемент details
С помощью этого нового тега можно создавать скрытые части документа, которые при раскрытии будут показывать дополнительную информацию. Основная задача элемента – предоставить нативную поддержку распространенной функции схлопывающегося бокса с заголовком, внутри которого помещена дополнительная информацию и функционал.
Обычно такой виджет создается с помощью HTML и JS. Включение нового тега в HTML5 отметает JS и упрощает реализацию для верстальщиков, что ускоряет загрузку страницы.
Вот так это может выглядеть в разметке:
|
1 2 3 4 5 6 7 8 |
<details> <summary>Some Magazines of Note</summary> <ul> <li><cite>Bird Watcher's Digest</cite></li> <li><cite>Rower's Weekly</cite></li> <li><cite>Fishing Monthly</cite></li> </ul> </details> |
В примере выше пользователь будет видеть контент тега summary, все остальное от него скрыто. По клику на summary будет отображаться скрытый контент.
Если внутри тега details отсутствует summary, браузер сам задаст краткое описание по умолчанию (например, «Details»). Если необходимо, чтобы скрытый контент был виден по умолчанию, можно использовать Булев атрибут open на теге details.
Тег summary можно использовать только в качестве дочернего элемента details, и он должен быть первым дочерним элементом.
На момент написания статьи тег details поддерживается не полностью, но он постоянно улучшается. Пробелы в поддержке можно возместить JS полифилами. Есть jQuery версия от Mathias Bynens и версия на обычном JavaScript от Maksim Chemerisuk.
На веб-страницах довольно часто можно встретить упорядоченные списки с помощью тега ol. В HTML5 появился новый Булев атрибут reversed. Если его установить, все номера в списке инвертируются, что позволяет задавать списки в обратном порядке. Также в HTML5 вернули атрибут start, который считался устаревшим в HTML4. Атрибут start позволяет задать стартовый номер в списке.
Оба атрибута reversed и start хорошо поддерживаются. На момент написания статьи только IE не поддерживает инвертированные упорядоченные списки. Если нужен полифил, можно взять скрипт одного из авторов книги.
Стили с заданной областью действия
В HTML5 тег style, используемый для прямой вставки стилей в страницу (в отличие от подключения стилей по ссылке), позволяет использовать Булев атрибут scoped. Разберем следующий пример:
|
1 2 3 4 5 6 7 8 9 10 |
<h1>Page Title</h1> <article> <style scoped> h1 { color: blue; } </style> <h1>Article Title</h1> <p>Article content.</p> </article> |
Тут присутствует атрибут scoped, поэтому стили внутри style применятся только к родительскому элементу и его дочерним элементам (если разрешено каскадирование), а не ко всему документу. Это позволяет легко переносить определенные области документа (такие как article, например) вместе со стилями на другие страницы.
Очень полезная функция, но реализация во всех браузерах займет какое-то время. Сейчас стили с заданной областью действия поддерживаются только в Firefox. Раньше такие стили поддерживались в Chrome, но были удалены из-за «высокой сложности кода». На момент написания статьи команда IE не строит ближайших планов на добавление этой функции.
Атрибут async для скриптов
У тега script появился новый атрибут async, чей принцип действия похож на defer. Атрибут defer заставляет браузер подождать полного парсинга разметки страницы, после чего уже загружается скрипт. Новый атрибут async позволяет асинхронно загружать скрипт. То есть скрипт загружается по мере возможностей, не мешая другим элементам на странице. Оба атрибута defer и async Булевы.
Оба атрибута необходимо использовать только, когда в теге script прописана ссылка на внешний файл. В старых браузерах можно использовать оба атрибута, чтобы хотя бы один из них использовался, если в этом есть необходимость. На практике оба атрибута не замедляют рендеринг страницы в браузере по мере загрузки скриптов. Тем не менее, async зачастую полезнее, так как он загружает скрипт в фоновом режиме, не мешая другим задачам рендеринга, а сам скрипт выполняется моментально после загрузки.
Атрибут async особенно полезен, когда у загружаемого скрипта нет других зависимостей, а также когда загружаемый скрипт улучшает пользовательский опыт, не дожидаясь загрузки страницы. Также стоит отметить, что если на странице много скриптов, атрибут defer загружает их в исходном порядке, чего нельзя гарантировать с атрибутом async.
Элемент picture
Тег picture – одно из последних добавлений в спецификацию HTML5. Он призван решить проблемы с адаптивным дизайном, в частности с адаптивными изображениями. Тег picture позволяет указывать несколько источников изображения. Так пользователи мобильных устройств смогут загружать изображения низкого качества, а пользователи планшетов и настольных ПК более высокого.
С тегом picture в паре используются теги source (их также используют для video и audio) в дополнение к новым атрибутам srcset и sizes. Эти два атрибута можно использовать на picture, img и source.
Eric Portis с сайта A List Apart написал замечательную статью, в которой началась бурная дискуссия по способам применения новых функций в адаптивных изображениях.
Другие важные функции
Ниже приведен список новых HTML5 функций, которые вы захотите попробовать. У всех разная степень поддержки в браузерах:
тег dialog, который представляет собой «часть приложения, с которой взаимодействует пользователь для выполнения задачи (например, диалоговое окно, инспектор или окно)»;
атрибут download для тега a – используется для указания того, что целевой ресурс должен быть загружен, а не открыт (подходит для PDF, например);
атрибуты sandbox и seamless для тега iframe. sandbox позволяет запускать внешнюю страницу с ограничениями, а seamless интегрирует контент из iframe намного ближе с родительским документом, из-за чего стили применяются более плавно;
тег menu и его дочерние элементы menuitem, с помощью которых можно создать список интерактивных команд. Например, в меню редактирования можно добавить опции копировать, вырезать и вставить, по необходимости добавляя функционал из скриптов;
тег address, с помощью которого можно размечать контактную информацию, применяемую к ближайшему тегу article или body.
Все это новые элементы, которые мы не затронули в этой статье только потому, что наше место ограничено. Проверяйте время от времени спецификации на наличие изменений или добавлений.
Автор: Louis Lazaris
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
