—»     —»   HTML5: Применение тегов «DETAILS» и «SUMMARY»
  Раздел: Образование и Изучение   Комментариев: 2  

HTML5: Применение тегов «DETAILS» и «SUMMARY»

Из нескольких новых тегов, пополнивших арсенал HTML5, я считаю наиболее полезными описательные элементы (такие как «figure», «figcaption» и «aside»), а также теги «details» и «summary». С помощью данных тегов можно скрывать часть слишком объёмного контента, отображая лишь его выжимку, сводку.

HTML5: Применение тегов «DETAILS» и «SUMMARY»

Вообще-то, данный приём применяется довольно часто, но достигается до сих пор, в основном, средствами javascript или его братца jQuery, вызывая у многих недоумение. Теперь, с появлением новых элементов – «details» и «summary» – всё станет намного проще.

Итак, давайте рассмотрим работу тегов на примере реального сценария.

Продемонстрируем вам процесс "отжима" описания товара. Сначала давайте подготовим тег «details», затем поместим внутрь него весь контент вместе с тегом «summary», как показано ниже:

  <details>
<summary>MacBook Pro Specification</summary>
<ul>
<li><strong>13.3-inch LED-backlit glossy widescreen display</strong> with edge-to-edge, uninterrupted glass (1280 x 800-pixel resolution).</li>
<li><strong>2.4 GHz Intel Core i5 dual-core processor</strong> with 3 MB shared L3 cache for excellent multitasking.</li>
<li><strong>Intel HD Graphics 3000</strong> with 384 MB of DDR3 SDRAM shared with main memory.</li>
<li><strong>500 GB Serial ATA hard drive</strong> (5400 RPM)</li>
<li><strong>4 GB installed RAM</strong> (1333 MHz DDR3; supports up to 8 GB)</li>
</ul>
</details>

В данном случае я добавил описательный элемент MacBook Pro, и вот как браузер толкует значения этих тегов.

HTML5: Применение тегов «DETAILS» и «SUMMARY»

Кроме того, я поместил сюда заголовок и краткое описание товара, предварив список его характеристик для большей наглядности. Что скажете? Ничего сложного, правда?

Поддержка тегов браузерами

Однако, прежде чем вы ринетесь "пичкать" этими тегами структуру вашего веб-сайта, примите к сведению, что пока теги «details» и «summary» поддерживаются лишь браузером Chrome, начиная с 12-ой версии.

Даже новейшая модификация Firefox их ещё не распознаёт.

HTML5: Применение тегов «DETAILS» и «SUMMARY»

Так что, если вы хотите применить эти теги, вам придётся внедрить и резервную функцию для браузеров, не поддерживающих данные элементы. Благо, сделать это несложно; можно воспользоваться заменителем данной функции, автоматически выполняющим нужное действие в старых браузерах, не воспринимающих теги, о которых идёт речь.

Скачайте этот файл, свяжите его ссылкой с HTML-документом, не забыв о jQuery (не ниже 1.7+), а заменитель вставьте перед конечным "корпусным" тегом body.

В head секцию добавьте следующий дескриптор условия, вставив HTML5shiv для IE8 и более ранних версий, иначе Internet Explorer не сможет распознавать эти новые теги.

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Теперь посмотрим, как всё это отображается в Internet Explorer:

HTML5: Применение тегов «DETAILS» и «SUMMARY»

Видите, функция заработала и в Internet Explorer.

* Смотреть демо
* Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.


Заключение

Наложить подобный эффект "скрыть-показать" средствами javascript или jQuery довольно легко, однако, обеспечить его поддержку браузером в качестве встроенной функции - гораздо более оптимальное для многих решение. Добьётесь вы этого с помощью javascript или HTML5 - дело ваше. Благодарю за внимание, надеюсь, прочли не зря.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 6972   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 июля 2012 @ 19:45
Написал: krapan88 — группа: Читатели  
На сайте с: 31.01.2010   |   Публикаций: 0   |   Комментариев: 59
ICQ: --- не указано ---
Мегаполезная вещь!!! Чего же еще от HTML5 ждать в будущем?
Комментарий #2: 9 июля 2012 @ 21:48
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
krapan88, вскоре будет еще одна небольшая статейка по новым HTML5-тэгам. Думаю, будет интересно.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031