Ниже приводится выдержка из нашей книги « HTML5 и CSS3 для реального мира», 2-е издание , написанной Алексисом Гольдштейном, Луи Лазарисом и Эстель Вейль. Копии продаются в магазинах по всему миру, или вы можете купить их в электронном виде здесь .
Мы познакомили вас с некоторыми более практичными новыми элементами и функциями и подробно изложили их. В этом разделе давайте рассмотрим менее известные элементы, атрибуты и функции, которые были добавлены в спецификацию HTML5.
Элемент details
Этот новый элемент помогает разметить часть документа, которая скрыта, но может быть расширена для раскрытия дополнительной информации. Цель этого элемента — предоставить встроенную поддержку функции, распространенной в Интернете, — складной блок с заголовком и скрытой дополнительной информацией или функциями.
Обычно этот виджет создается с использованием комбинации HTML и JavaScript. Включение его в HTML5 устраняет требования к сценариям и упрощает его реализацию для веб-авторов, тем самым способствуя сокращению времени загрузки страницы.
Вот как это может выглядеть при разметке:
<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 , браузер определит сводку по умолчанию (например, «Детали»). Если вы хотите, чтобы скрытый контент был видимым по умолчанию, вы можете использовать логический атрибут open в элементе details .
Элемент summary может использоваться только как дочерний элемент details , и он должен быть первым дочерним элементом, если используется.
На момент написания статьи в details отсутствует полная поддержка браузера, но она улучшается. Чтобы заполнить пробелы, доступны несколько поли-заливок на основе JavaScript, включая версию jQuery Матиаса Биненса и ванильную версию JavaScript Максима Чемерисука.
Упорядоченные списки, размеченные с использованием элемента ol , довольно часто встречаются на веб-страницах. HTML5 вводит новый логический атрибут, называемый reversed так что при его наличии он меняет номера в элементах списка, позволяя отображать списки в порядке убывания. Кроме того, HTML5 вернул атрибут start , который устарел в HTML4. Атрибут start позволяет указать, с какого номера должен начинаться ваш список.
Поддержка хороша как для reversed и для start . На момент написания статьи Internet Explorer был единственным браузером без поддержки списков в обратном порядке. Если вы хотите полифилл, вы можете использовать скрипт одного из авторов книги.
Scoped Styles
В HTML5 элемент style , используемый для встраивания стилей непосредственно в ваши страницы (в отличие от ссылки на связанную таблицу стилей), позволяет использовать логический атрибут scoped . Возьмите следующий пример кода:
<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 и defer чтобы при необходимости использовать один или другой. На практике оба атрибута не будут приостанавливать рендеринг страницы браузером во время загрузки скриптов; однако async часто может быть более выгодной, так как она загружает скрипт в фоновом режиме, в то время как выполняются другие задачи рендеринга, и запускает скрипт, как только он становится доступным.
Атрибут async особенно полезен, если загружаемый скрипт не имеет других зависимостей и если он полезен для пользователя, чтобы скрипт загружался как можно скорее, а не после загрузки страницы. Однако следует также отметить, что если у вас есть страница, которая загружает несколько сценариев, атрибут defer гарантирует, что они загружаются в том порядке, в котором они появляются, в то время как порядок с async не гарантируется.
Элемент picture
Одним из самых последних дополнений к спецификации HTML5 является элемент picture , предназначенный для помощи в адаптивном веб-дизайне, особенно в адаптивных изображениях. picture позволяет вам определить несколько источников изображения. Это позволяет пользователям мобильных браузеров загружать версию изображения в низком разрешении, предлагая увеличенную версию для планшетов и настольных компьютеров.
Элемент picture имеет свои сопутствующие source элементы (которые также используются для элементов video и audio , как описано в главе 5), в дополнение к некоторым новым атрибутам, таким как srcset и sizes . Эти два атрибута могут использоваться на picture , img и source .
Для хорошего обсуждения того, как эти новые функции используются в адаптивных реализациях изображений, см. Эту прекрасную статью Эрика Портиса в A List Apart .
Другие Известные
Вот еще несколько новых функций HTML5, которые вы захотите использовать, каждая из которых имеет различные уровни поддержки браузера:
-
Элемент dialog , который представляет «часть приложения, с которой взаимодействует пользователь для выполнения задачи; например, диалоговое окно, инспектор или окно ».
-
Атрибут download для элементов, используемый для указания того, что целевой ресурс следует загружать, а не переходить к нему (например, полезно для PDF-файлов).
-
sandbox и seamless атрибуты для элементов iframe . sandbox позволяет запускать внешнюю страницу с ограничениями, а атрибут seamless интегрирует содержимое iframe более тесно с родительским документом, адаптируя его стили более плавно.
-
Элемент menu и его элементы menuitem дочерние элементы, которые позволяют создавать список интерактивных команд. Например, вы можете пометить меню «Правка» параметрами Копировать, Вырезать и Вставить, добавляя при необходимости функции сценариев.
-
Элемент address , который позволяет разметить контактную информацию, относящуюся к ближайшему элементу article или body .
Есть другие новые элементы, не обсуждаемые здесь, просто из-за недостатка места. Обязательно проверяйте спецификации время от времени, чтобы увидеть, было ли добавлено или изменено что-то новое.
Упорядоченные списки, размеченные с использованием элемента ol , довольно часто встречаются на веб-страницах. HTML5 вводит новый логический атрибут, называемый reversed так что при его наличии он меняет номера в элементах списка, позволяя отображать списки в порядке убывания. Кроме того, HTML5 вернул атрибут start , который устарел в HTML4. Атрибут start позволяет указать, с какого номера должен начинаться ваш список.
Поддержка хороша как для reversed и для start . На момент написания статьи Internet Explorer был единственным браузером без поддержки списков в обратном порядке. Если вы хотите полифилл, вы можете использовать скрипт одного из авторов книги.
Scoped Styles
В HTML5 элемент style , используемый для встраивания стилей непосредственно в ваши страницы (в отличие от ссылки на связанную таблицу стилей), позволяет использовать логический атрибут scoped . Возьмите следующий пример кода:
<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 и defer чтобы при необходимости использовать один или другой. На практике оба атрибута не будут приостанавливать рендеринг страницы браузером во время загрузки скриптов; однако async часто может быть более выгодной, так как она загружает скрипт в фоновом режиме, в то время как выполняются другие задачи рендеринга, и запускает скрипт, как только он становится доступным.
Атрибут async особенно полезен, если загружаемый скрипт не имеет других зависимостей и если он полезен для пользователя, чтобы скрипт загружался как можно скорее, а не после загрузки страницы. Однако следует также отметить, что если у вас есть страница, которая загружает несколько сценариев, атрибут defer гарантирует, что они загружаются в том порядке, в котором они появляются, в то время как порядок с async не гарантируется.
Элемент picture
Одним из самых последних дополнений к спецификации HTML5 является элемент picture , предназначенный для помощи в адаптивном веб-дизайне, особенно в адаптивных изображениях. picture позволяет вам определить несколько источников изображения. Это позволяет пользователям мобильных браузеров загружать версию изображения в низком разрешении, предлагая увеличенную версию для планшетов и настольных компьютеров.
Элемент picture имеет свои сопутствующие source элементы (которые также используются для элементов video и audio , как описано в главе 5), в дополнение к некоторым новым атрибутам, таким как srcset и sizes . Эти два атрибута могут использоваться на picture , img и source .
Для хорошего обсуждения того, как эти новые функции используются в адаптивных реализациях изображений, см. Эту прекрасную статью Эрика Портиса в A List Apart .
Другие Известные
Вот еще несколько новых функций HTML5, которые вы захотите использовать, каждая из которых имеет различные уровни поддержки браузера:
-
Элемент
dialog, который представляет «часть приложения, с которой взаимодействует пользователь для выполнения задачи; например, диалоговое окно, инспектор или окно ». -
Атрибут
downloadдля элементов, используемый для указания того, что целевой ресурс следует загружать, а не переходить к нему (например, полезно для PDF-файлов). -
sandboxиseamlessатрибуты для элементовiframe.sandboxпозволяет запускать внешнюю страницу с ограничениями, а атрибутseamlessинтегрирует содержимоеiframeболее тесно с родительским документом, адаптируя его стили более плавно. -
Элемент
menuи его элементыmenuitemдочерние элементы, которые позволяют создавать список интерактивных команд. Например, вы можете пометить меню «Правка» параметрами Копировать, Вырезать и Вставить, добавляя при необходимости функции сценариев. -
Элемент
address, который позволяет разметить контактную информацию, относящуюся к ближайшему элементуarticleилиbody.
Есть другие новые элементы, не обсуждаемые здесь, просто из-за недостатка места. Обязательно проверяйте спецификации время от времени, чтобы увидеть, было ли добавлено или изменено что-то новое.