HTML5 Verwendung von

- und

-Tags

Dieser Artikel ist Teil unseres "HTML5 / CSS3-Tutorials" - engagiert, um Sie zu einem besseren Designer und / oder Entwickler zu machen. Klick hier um mehr Artikel aus derselben Serie zu sehen.

Unter mehreren neuen Tags, die in HTML5 verfügbar sind, werden Spezifikationen (z. B.: Zahl, figcaption, und beiseite), Detail und Zusammenfassung Tags sind meiner Meinung nach am nützlichsten. Mit diesen neuen Tags können Sie einige der langen Inhalte ausblenden und nur die Zusammenfassung anzeigen.

Wir sehen diesen Effekt oft in der Nähe, aber die meisten von ihnen sind immer noch auf JavaScript oder dessen Bruder aufgebaut: jQuery, das die meisten Leute nicht verstehen. Nun mit diesen neuen Elementen - Einzelheiten und Zusammenfassung - Dinge werden einfacher.

Schauen wir uns also an, wie Tags in einem realen Fall funktionieren.

In dieser Demo werden wir eine Produktbeschreibung zusammenfassen. Zuerst erstellen wir ein "details" -Tag und fügen dann den gesamten Inhalt zusammen mit dem "summary" -Tag ein, wie im folgenden Beispiel:

 
 
MacBook Pro-Spezifikation
 
 
13,3-Zoll-Widescreen-Display mit LED-Hintergrundbeleuchtung mit Rand-zu-Rand-Glas (Auflösung 1280 x 800 Pixel).
 
2,4 GHz Intel Core i5 Dual-Core-Prozessor mit 3 MB gemeinsamem L3-Cache für hervorragendes Multitasking.
 
Intel HD Graphics 3000 mit 384 MB DDR3-SDRAM, die mit dem Hauptspeicher gemeinsam genutzt werden.
 
500 GB Serial ATA-Festplatte (5400 U / min)
 
4 GB installierter RAM (1333 MHz DDR3; unterstützt bis zu 8 GB)
 
 
 

In diesem Beispiel habe ich das MacBook Pro-Spezifikationsdetail hinzugefügt. Nun wollen wir sehen, wie der Browser diese Tags darstellt.

Ich habe auch einen Titel und weitere Beschreibungen des Produkts über den Details hinzugefügt, um die obige Demo für Sie sinnvoller zu machen. Also was denkst du? Es ist ganz einfach, richtig?

Browser unterstützt

Bevor Sie dieses Tag jedoch schnell auf Ihre gesamte Website anwenden, sollten Sie beachten, dass die Details und das Summary-Tag derzeit nur in Chrome 12 und höher unterstützt werden.

Selbst der neueste Firefox unterstützt sie noch nicht.

Wenn Sie dieses Tag anwenden möchten, müssen Sie eine Fallback-Funktion für nicht unterstützte Browser hinzufügen. Die gute Nachricht ist, es ist einfach; Sie können diese Details verwenden, um die Tag-Funktionalität für alte Browser automatisch zu replizieren.

Laden Sie diese Datei herunter und verknüpfen Sie sie zusammen mit der jQuery (mindestens 1.7+) mit dem HTML-Dokument. Stellen Sie sicher, dass Sie die Polyfill vor dem close body-Tag setzen.

Fügen Sie in das head-Tag das folgende bedingte Tag ein, um HTML5shiv für IE8 und frühere Versionen einzuschließen. Andernfalls erkennt Internet Explorer diese neuen Tags nicht.

Nun sehen wir uns an, wie es in Internet Explorer aussieht:

Und jetzt funktioniert es auch mit dem Internet Explorer.

• Demo
• Quelle herunterladen

Fazit

Die Erstellung eines solchen Hide-and-Show-Effekts mit JavaScript oder jQuery ist relativ einfach, aber die native Unterstützung durch den Browser ist für viele Menschen definitiv eine viel einfachere Lösung. Ob Sie dies in JavaScript oder in HTML5 tun möchten, ist Ihre Entscheidung. Danke fürs Lesen und ich hoffe, es hat Ihnen gefallen.