HTML znački <details> in <summary>

Vsebina na strani so velikokrat predolge, zato običajno določene dele skrivamo oz. slednje prikažemo na zahtevo uporabnika. Ta interaktivnost “show/hide” pa običajno dosežemo s pomočjo JavaSript-a. Vendar pa imamo na voljo že integrirano HTML rešitev, ki ne obremenjuje dodatno virov prenosa.

HTML značke <details> in <summary> nam tako omogočajo izdelavo klasičnih modulov v katerih vsebino prikažemo na zahtevo, klik uporabnika. Posledično nam omogočajo večje prihranke pri virih strani, saj ne potrebujemo JavaSript-a ali kakšnih drugih knjižic. Značka <details> skrije vsebino avtomatsko. Ko uporabnik klikne na glavo tega se slednja prikaže. Če dodamo značko <summary> pa se namesto “Details” izpiše vsebina, ki smo jo vstavili v to značko.

Znački sta podprti v vseh večjih brskalnikih razen IE. Ker je osnovno stanje, če značka ni podprta prikazana vsa vsebina tu ni večjih težav, podre se le izgled, vsebina ostane in ni izgubljena. Značka je idealna za prikaz pogostih vprašanj (FAQ) ali podobnih vsebin.

Oznake: detailsHTMLsummary

Komentiraj


*