HTML5 A

és

címkék használata

Ez a cikk a mi része "HTML5 / CSS3 oktatóanyagok sorozat" - szentelt, hogy segítsen neked egy jobb tervező és / vagy fejlesztő. Kattints ide több cikket láthat ugyanazon sorozatból.

A HTML5-ben elérhető új címkék közül a Specifications (például: ábra, figcaption, és félre), Részlet és összefoglalás a címkék, véleményem szerint, a leghasznosabbak. Ezekkel az új címkékkel elrejtheti a hosszú tartalmakat, és csak az összefoglalót jelenítheti meg.

Valójában gyakran látjuk ezt a hatást, de a legtöbbjük még mindig a JavaScript vagy a testvére: jQuery, melyet a legtöbb ember nem ért. Most, az új elemekkel - részletek és összefoglalás - a dolgok könnyebbé válnak.

Tehát nézzük meg, hogy a címkék hogyan működnek egy valós esetben.

Ebben a demóban összefoglaljuk a termék leírását. Először hozzunk létre egy "részletek" címkét, majd tegyük az összes tartalmat a benne lévő "összefoglaló" címkével együtt, mint az alábbi példában:

 
 
MacBook Pro specifikáció
 
 
13,3 hüvelykes LED-es háttérvilágítású, fényes, szélesvásznú kijelző széltől szélig tartó, megszakítás nélküli üveggel (1280 x 800 képpontos felbontás).
 
2,4 GHz-es Intel Core i5 kétmagos processzor 3 MB megosztott L3 gyorsítótárral a kiváló multitasking számára.
 
Intel HD Graphics 3000 384 MB DDR3 SDRAM-ot osztott meg a fő memóriával.
 
500 GB-os soros ATA merevlemez (5400 RPM)
 
4 GB beépített RAM (1333 MHz-es DDR3; 8 GB-ig támogatja)
 
 
 

Ebben a példában hozzáadtam a MacBook Pro specifikáció részleteit, és nézzük meg, hogy a böngésző hogyan hozza létre ezeket a címkéket.

Emellett a részletek fölé kerültem a termék címét és több leírását is, hogy a fenti demó érthetőbb legyen számodra. Tehát mit gondolsz? Elég könnyű, igaz?

Böngésző támogatás

Mindazonáltal, mielőtt elindítaná ezt a címkét a teljes webhelyére, meg kell jegyezni, hogy a részletek és az összefoglaló címke jelenleg csak a Chrome 12-es és újabb verzióin keresztül támogatott.

Még a legújabb Firefox még nem támogatja őket.

Tehát, ha ezt a címkét kívánja alkalmazni, akkor a nem támogatott böngészőkhöz tartalék funkciót kell tartalmaznia. A jó hír, ez egyszerű; használhatja ezt a részletet a polifill, amely automatikusan replikálja a régi böngészők címkefunkcióit.

Töltse le ezt a fájlt, és kapcsolja össze a html dokumentummal együtt a jQuery-vel (legalább 1,7+), és győződjön meg róla, hogy elhelyezi a polyfillet a záró testcímke előtt.

A fejcímke belsejében helyezze be a következő feltételes tagot az IE8-hoz és a korábbi HTML5shiv-hoz, különben az Internet Explorer nem ismeri fel ezeket az új címkéket.

Most nézzük meg, hogy kiderül az Internet Explorerben:

És most az Internet Explorer-en is működik.

• Demó
• Letöltés forrása

Következtetés

Ilyen elrejtőhatás létrehozása JavaScript vagy jQuery segítségével valójában viszonylag egyszerű, de a böngészőtől való natív támogatása sok ember számára sokkal könnyebb megoldás. Akár JavaScript-ben, akár HTML5-ben kívánja megtenni, ez a döntés. Köszönöm az olvasást, és remélem, hogy élvezted.