HTML5 Як використовувати

і

теги

Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

Серед декількох нових тегів, доступних у HTML5, специфікації (такі як: цифра, figcaption, і осторонь), детально і резюме теги, на мій погляд, є найбільш корисними. За допомогою цих нових тегів можна приховати деякий довгий вміст і відобразити лише резюме.

Ми насправді часто бачимо цей ефект навколо, але більшість з них все ще побудовано на JavaScript або його браті: jQuery, яку більшість людей не розуміють. Тепер з цими новими елементами - деталі і резюме - все буде легше.

Отже, давайте подивимося, як теги працюють у реальному сценарії.

У цій демонстрації ми підсумуємо опис продукту. Спочатку створіть тег "подробиці", а потім розмістіть весь вміст разом із тегом "summary" у ньому, як у прикладі нижче:

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

У цьому прикладі я додав детальну інформацію про MacBook Pro, а тепер давайте подивимося, як переглядач перетворює ці теги.

Я також додав назву і більше описів продукту вище деталей, щоб зробити вище демо більш розумним для вас. Так що ж ви думаєте? Це досить легко, правильно?

Підтримка браузера

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

Навіть останній Firefox поки що не підтримує їх.

Отже, якщо ви хочете застосувати цей тег, потрібно включити запасну функцію для непідтримуваних браузерів. Гарна новина це, це просто; Ви можете використовувати ці деталі polyfill, які автоматично копіюють функціональність тегів для старих браузерів.

Завантажте цей файл і приєднайте його до документа html разом з jQuery (мінімум 1,7+) і переконайтеся, що ви розмістили поліфілль перед тегом закриття.

А в головному тезі вставте наступний умовний тег для включення HTML5shiv для IE8 і раніше, інакше Internet Explorer не розпізнає ці нові теги.

Тепер подивимося, як це виходить в Internet Explorer:

І тепер він працює і в Internet Explorer.

• Демо
• Завантажити джерело

Висновок

Створення такого ефекту приховування та показу за допомогою JavaScript або jQuery насправді є відносно легким, але наявність його в браузері набагато простіше для багатьох людей. Якщо ви хочете зробити це за допомогою JavaScript або HTML5, це ваше рішення. Спасибі за читання, і я сподіваюся, вам сподобалося.