HTML5 Как да използвате

и

маркери

Тази статия е част от нашата "Серия уроци на HTML5 / CSS3" - посветен да ви помогне да сте по-добър дизайнер и / или разработчик. Натисни тук за да видите повече статии от същата серия.

Сред няколко нови маркера, които са налични в HTML5, Спецификации (като: фигура, figcaption, и настрана), детайл и резюме етикетите, по мое мнение, са най-полезни. С тези нови маркери можете да скриете част от дългото съдържание и да покажете само резюмето.

Всъщност често виждаме този ефект наоколо, но повечето от тях все още са изградени върху JavaScript или неговия брат: jQuery, който повечето хора не разбират. Сега, с тези нови елементи - детайли и резюме - нещата ще станат по-лесни.

Така че, нека видим как работят маркерите в реален сценарий.

В тази демонстрация ще обобщим описанието на продукта. Първо да създадем маркер за „подробности“ и след това да поставим цялото съдържание заедно с маркера „summary“ в него, както е в примера по-долу:

 
 
Спецификация на MacBook Pro
 
 
13,3-инчов LED-подсветка гланциран широкоекранен дисплей с непрекъснато стъкло от край до край (резолюция 1280 x 800 пиксела).
 
2.4 GHz Intel Core i5 двуядрен процесор с 3 MB споделен L3 кеш за отлична многозадачност.
 
Intel HD Graphics 3000 с 384 MB DDR3 SDRAM, споделен с основната памет.
 
500 GB сериен ATA твърд диск (5400 RPM)
 
4 GB инсталирана оперативна памет (1333 MHz DDR3; поддържа до 8 GB)
 
 
 

В този пример добавих подробности за спецификацията на MacBook Pro, а сега да видим как браузърът ги показва.

Аз също добавих заглавие и още описания на продукта над детайлите, за да направя горното демо по-разумно за вас. И така, какво мислите? Много е лесно, нали?

Поддържа браузър

Въпреки това, преди да бързате да приложите този маркер към целия си уебсайт, трябва да се отбележи, че маркерът за данни и обобщена информация понастоящем се поддържа само за Chrome 12 или по-нова версия.

Дори най-новият Firefox все още не ги поддържа.

Така че, ако искате да приложите този маркер, трябва да включите резервна функция за неподдържани браузъри. Добрата новина е, че е проста; можете да използвате тези детайли polyfill, които автоматично ще репликират функционалността на маркерите за стари браузъри.

Изтеглете този файл и го свържете с html документа заедно с jQuery (минимум 1.7+) и се уверете, че сте сложили полифайла преди маркера за тялото..

И в главата, поставете следния условен маркер, за да включите HTML5shiv за IE8 и по-рано, в противен случай Internet Explorer няма да разпознае тези нови маркери..

Сега да видим как се оказва в Internet Explorer:

И сега работи и с Internet Explorer.

• Демонстрация
• Изтеглете Източник

заключение

Създаването на такъв скрит ефект с JavaScript или jQuery всъщност е сравнително лесно, но притежаването му с поддръжка от браузъра определено е много по-лесно решение за много хора. Независимо дали искате да го направите в JavaScript или в HTML5, това е вашето решение. Благодаря за четенето и се надявам да ви хареса.