HTML5 Cum se utilizează și Etichete
Printre mai multe etichete noi care sunt disponibile în HTML5, specificațiile (cum ar fi: figura, figcaption, și deoparte), detaliu și rezumat etichetele, după părerea mea, sunt cele mai utile. Cu aceste etichete noi puteți să ascundeți un conținut lung și să afișați numai rezumatul.
Deseori vedem acest efect în jur, dar majoritatea sunt încă construite pe JavaScript sau pe fratele său: jQuery, pe care majoritatea oamenilor nu o înțeleg. Acum, cu aceste elemente noi - Detalii și rezumat - lucrurile vor fi mai ușoare.
Deci, să vedem cum funcționează etichetele într-un scenariu real.
În acest demo vom rezuma o descriere a produsului. Mai întâi, să creăm o etichetă "detalii" și apoi să punem tot conținutul împreună cu eticheta "rezumat" în interiorul acesteia, ca în exemplul de mai jos:
Specificația MacBook Pro
- Ecran lat cu ecran luminos cu LED-uri de 13,3 inci cu sticlă neîntreruptă de la margine la margine (rezoluție 1280 x 800 pixeli).
- Procesor dual-core de 2,4 GHz Intel Core i5 cu 3 MB cache shared L3 pentru multitasking excelent.
- Intel HD Graphics 3000 cu 384 MB de memorie DDR3 SDRAM partajată cu memoria principală.
- Unitate hard disk Serial ATA de 500 GB (5400 RPM)
- 4 GB RAM instalat (1333 MHz DDR3; suportă până la 8 GB)
În acest exemplu, am adăugat detaliile specificației MacBook Pro și acum să vedem cum le face browserul aceste etichete.
De asemenea, am adăugat un titlu și mai multe descrieri ale produsului deasupra detaliilor, pentru a face demo-ul de mai sus mai sensibil pentru dvs. Deci ce crezi? E destul de ușor, corect?
Suport pentru browser
Cu toate acestea, înainte de a vă grăbi să aplicați această etichetă pe întregul site web, trebuie remarcat faptul că detaliile și eticheta sumară sunt acceptate în prezent numai pe Chrome 12 și mai sus.
Chiar și ultimul Firefox nu le suportă încă.
Deci, dacă doriți să aplicați această etichetă, trebuie să includeți o funcție de rezervă pentru browserele nesuportate. Vestea bună, este simplu; puteți utiliza acest detaliu polyfill, care va replica automat funcția de etichetă pentru browserele vechi.
Descărcați acest fișier și conectați-l la documentul html împreună cu jQuery (1,7+ la minim) și asigurați-vă că plasați polifilul înaintea etichetei pentru corpul închis.
În interiorul etichetei capului, introduceți următoarea etichetă condițională pentru a include HTML5shiv pentru IE8 și mai devreme, altfel Internet Explorer nu va recunoaște aceste etichete noi.
Acum, să vedem cum se întâmplă în Internet Explorer:
Și acum funcționează și pe Internet Explorer.
- Demo
- Descărcați sursa
Concluzie
Crearea unui astfel de efect de hide-and-show cu JavaScript sau jQuery este de fapt relativ ușor, dar având-o pe suport nativ din browser este cu siguranță o soluție mult mai ușoară pentru mulți oameni. Indiferent dacă doriți să faceți acest lucru în JavaScript sau în HTML5, este decizia dvs. Vă mulțumim pentru lectură și sper că v-ați bucurat.
