HTML5 Как использовать теги

и

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

Среди нескольких новых тегов, которые доступны в HTML5, есть технические характеристики (такие как: фигура, figcaption, а также в сторону), подробно а также резюме Теги, на мой взгляд, являются наиболее полезными. С помощью этих новых тегов вы можете скрыть часть длинного контента и отображать только резюме.

На самом деле мы часто видим этот эффект, но большинство из них все еще основаны на JavaScript или его брате: jQuery, который большинство людей не понимают. Теперь, с этими новыми элементами - подробности а также резюме - все станет проще.

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

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

 
 
MacBook Pro Технические характеристики
 
 
13,3-дюймовый глянцевый широкоформатный дисплей со светодиодной подсветкой Непрерывное стекло от края до края (разрешение 1280 x 800 пикселей).
 
Двухъядерный процессор Intel Core i5 2,4 ГГц с 3 МБ общей кэш-памяти L3 для превосходной многозадачности.
 
Intel HD Graphics 3000 с 384 МБ памяти DDR3 SDRAM, используемой совместно с основной памятью.
 
Жесткий диск Serial ATA 500 ГБ (5400 об / мин)
 
4 ГБ установленной оперативной памяти (1333 МГц DDR3; поддерживает до 8 ГБ)
 
 
 

В этом примере я добавил детали спецификации MacBook Pro и теперь посмотрим, как браузер отображает эти теги..

Я также добавил название и больше описаний продукта выше деталей, чтобы сделать вышеприведенную демонстрацию более понятной для вас. Так что ты думаешь? Это довольно легко, верно?

Поддержка браузера

Однако, прежде чем вы поспешите применить этот тег ко всему сайту, следует отметить, что тег подробностей и сводки в настоящее время поддерживается только в Chrome 12 и выше..

Даже последний Firefox их пока не поддерживает.

Поэтому, если вы хотите применить этот тег, вам нужно включить функцию отката для неподдерживаемых браузеров. Хорошие новости это, это просто; Вы можете использовать эту информацию polyfill, которая будет автоматически копировать функциональность тега для старых браузеров..

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

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

Теперь посмотрим, как это получается в Internet Explorer:

И теперь это работает и в Internet Explorer..

• демонстрация
• Скачать исходный код

Заключение

Создать такой эффект скрытия и показа с помощью JavaScript или jQuery на самом деле довольно легко, но для многих людей его поддержка в браузере - гораздо более простое решение. Если вы хотите сделать это в JavaScript или в HTML5, это ваше решение. Спасибо за чтение, и я надеюсь, вам понравилось.