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

Из нескольких новых тегов, пополнивших арсенал HTML5, я считаю наиболее полезными описательные элементы (такие как «figure», «figcaption» и «aside»), а также теги «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, и вот как браузер толкует значения этих тегов.


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

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

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

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


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

Скачайте этот файл, свяжите его ссылкой с 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:


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

* Смотреть демо
* Скачать исходные файлы


Заключение

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