HTML5 Jak používat tagy

a

Tento článek je součástí našeho "HTML5 / CSS3 Tutorials series" - které jsou určeny k tomu, abyste z vás učinili lepšího návrháře a / nebo vývojáře. Klikněte zde zobrazit více článků ze stejné série.

Mezi několik nových značek, které jsou k dispozici v HTML5, Specifikace (například: postava, figcaption, a stranou), detail a souhrn tagy jsou podle mého názoru nejužitečnější. S těmito novými značkami můžete skrýt některé z dlouhých obsahů a zobrazit pouze souhrn.

Ve skutečnosti často vidíme tento efekt, ale většina z nich je stále postavena na JavaScriptu nebo jeho bratru: jQuery, kterému většina lidí nerozumí. Nyní, s těmito novými prvky - podrobnosti a souhrn - věci budou snazší.

Podívejme se tedy, jak fungují značky v reálném případě.

V tomto demu shrneme popis produktu. Nejdříve vytvoříme značku „Podrobnosti“ a pak do ní vložíme veškerý obsah spolu se značkou „shrnutí“, jako je tomu v příkladu níže:

 
 
Specifikace MacBook Pro
 
 
13,3palcový lesklý širokoúhlý displej s LED podsvícením s nepřerušovaným sklem od okraje k okraji (rozlišení 1280 x 800 pixelů).
 
Dvoujádrový procesor Intel Core i5 2,4 GHz s 3 MB sdílené L3 cache pro vynikající multitasking.
 
Intel HD Graphics 3000 s 384 MB DDR3 SDRAM sdílené s hlavní pamětí.
 
Pevný disk 500 GB Serial ATA (5400 ot / min)
 
4 GB instalovaná RAM (1333 MHz DDR3; podporuje až 8 GB)
 
 
 

V tomto příkladu jsem přidal podrobnosti specifikace MacBook Pro a nyní se podívejme, jak prohlížeč tyto značky vykreslí.

Také jsem přidal titul a další popisy produktu nad detaily, aby bylo výše uvedené demo pro vás citlivější. Tak co si myslíte? Je to docela snadné, správně?

Podpora prohlížeče

Než však začnete tuto značku používat na celé webové stránce, je třeba poznamenat, že podrobnosti a souhrnná značka jsou aktuálně podporovány pouze v prohlížeči Chrome 12 a vyšším..

Dokonce i poslední Firefox je zatím nepodporuje.

Pokud tedy chcete tuto značku použít, musíte pro nepodporované prohlížeče zahrnout nouzovou funkci. Dobrá zpráva, je to jednoduché; můžete použít tyto detaily polyfill, který automaticky replikuje funkci tagů pro staré prohlížeče.

Stáhněte si tento soubor a připojte jej k html dokumentu spolu s jQuery (minimálně 1.7+) a ujistěte se, že jste polyfill umístili před značku těla..

A uvnitř tagu head vložte následující podmíněný tag, který bude obsahovat HTML5shiv pro IE8 a starší, jinak Internet Explorer tyto nové tagy nerozpozná.

Nyní se podívejme, jak to dopadá v aplikaci Internet Explorer:

A nyní funguje i na Internet Exploreru.

• Demo
• Stáhněte si zdroj

Závěr

Vytvoření takového efektu skrýt a ukázat s JavaScriptem nebo jQuery je vlastně relativně snadné, ale s nativně podporovaným prohlížečem je určitě mnohem jednodušší řešení pro mnoho lidí. Ať už to chcete udělat v JavaScriptu nebo v HTML5, je to vaše rozhodnutí. Díky za čtení a doufám, že se vám to líbilo.