HTML5 Hur man använder och Taggar

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

Bland flera nya taggar som finns tillgängliga i HTML5, Specifikationer (som: figur, figcaption, och åt sidan), detalj och sammanfattning taggar är enligt min mening mest användbara. Med dessa nya taggar kan du gömma något av det långa innehållet och visa endast sammanfattningen.

Vi ser faktiskt ofta denna effekt runt, men de flesta är fortfarande byggda på JavaScript eller dess bror: jQuery, som de flesta inte förstår. Nu med dessa nya element - detaljer och sammanfattning - saker blir enklare.

Så, låt oss se hur taggar fungerar i ett reellt scenario.

I denna demo ska vi sammanfatta en produktbeskrivning. Låt oss först skapa en "detaljer" -tagg och sedan lägga in allt innehåll tillsammans med "sammandrag" -taggen inuti den, som i exemplet nedan:

 
 
MacBook Pro-specifikation
 
 
13,3-tums LED-bakgrundsbelyst glänsande widescreen-skärm med kant-till-kant, oavbruten glas (1280 x 800 pixel upplösning).
 
2,4 GHz Intel Core i5 dual-core processor med 3 MB delad L3-cache för utmärkt multitasking.
 
Intel HD Graphics 3000 med 384 MB DDR3 SDRAM delad med huvudminne.
 
500 GB Serial ATA-hårddisk (5400 rpm)
 
4 GB installerat RAM (1333 MHz DDR3, stöder upp till 8 GB)
 
 
 

I det exemplet har jag lagt till detaljer i MacBook Pro-specifikationen, och nu får vi se hur webbläsaren gör de här taggarna.

Jag har också lagt till en titel och mer beskrivningar av produkten ovanför detaljerna för att göra ovanstående demo mer förnuftig för dig. Så vad tycker du? Det är ganska enkelt, rätt?

Browser stöder

Men innan du rusar för att tillämpa den här taggen på hela din webbplats, bör det noteras att detaljerna och sammanfattningsetiketten endast stöds för närvarande på Chrome 12 och senare.

Även den senaste Firefox stöder dem inte än.

Så, om du vill tillämpa den här taggen måste du inkludera en återgångsfunktion för icke-stödda webbläsare. Den goda nyheten det, det är enkelt; Du kan använda denna information polyfil, som automatiskt kopierar taggfunktionen för gamla webbläsare.

Ladda ner den här filen och länka den till html-dokumentet tillsammans med jQuery (1.7+ i minsta) och se till att du placerar polyfillen innan den nära kroppen taggen.

Och inuti huvudetiketten lägger du in följande villkorliga tagg för att inkludera HTML5shiv för IE8 och tidigare, annars kommer inte Internet Explorer att känna igen dessa nya taggar.

Nu får vi se hur det visar sig i Internet Explorer:

Och det fungerar nu också på Internet Explorer.

• demo
• Hämta källa

Slutsats

Att skapa en sådan hide-and-show-effekt med JavaScript eller jQuery är faktiskt relativt lätt, men det är definitivt en mycket lättare lösning för många människor att ha det stöds av webbläsaren. Oavsett om du vill göra det i JavaScript eller i HTML5, är det ditt beslut. Tack för att du läste, och jag hoppas att du tyckte om det.