HTML5

ja

-tunnisteiden käyttäminen

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Useista uusista HTML5-tunnisteista saatavista tunnisteista (esimerkiksi: kuva, figcaption, ja syrjään), yksityiskohta ja yhteenveto Tunnisteet ovat mielestäni kaikkein hyödyllisimpiä. Näiden uusien tunnisteiden avulla voit piilottaa osan pitkästä sisällöstä ja näyttää vain yhteenvedon.

Näemme tämän vaikutuksen usein, mutta useimmat niistä ovat edelleen rakennettu JavaScriptin tai sen veljensä pohjalta: jQuery, jota useimmat ihmiset eivät ymmärrä. Nyt nämä uudet elementit - yksityiskohdat ja yhteenveto - asiat tulevat helpommiksi.

Joten, katsotaanpa, miten tunnisteet toimivat todellisessa tilanteessa.

Tässä demossa me tiivistämme tuotekuvauksen. Luo ensin "yksityiskohdat" -tunniste ja laita sitten kaikki sisältö yhdessä sen sisältämän "yhteenveto" -merkin kanssa, kuten alla olevassa esimerkissä:

 
 
MacBook Pron määritys
 
 
13,3 tuuman LED-taustavalaistu kiiltävä laajakuvanäyttö reunasta reunaan, keskeytymätön lasi (1280 x 800 pikselin resoluutio).
 
2,4 GHz: n Intel Core i5-dual-core-prosessori 3 Mt: n jaetulla L3-välimuistilla erinomaisen monitoimityön aikaan.
 
Intel HD Graphics 3000 384 Mt: n DDR3-SDRAM-muistia, joka on jaettu päämuistiin.
 
500 Gt: n Serial ATA -kiintolevyasema (5400 rpm)
 
4 Gt: n asennettu RAM (1333 MHz DDR3; tukee jopa 8 Gt)
 
 
 

Tässä esimerkissä olen lisännyt MacBook Pron määritystietoja, ja nyt katsotaan miten selain tekee nämä tunnisteet.

Olen myös lisännyt tuotteen otsikon ja muut kuvaukset yksityiskohtien yläpuolelle, jotta edellä esitetty demo olisi järkevämpää sinulle. Niin mitä mieltä olet? Se on melko helppoa?

Selain tukee

Ennen kuin ryhdyt käyttämään tätä tunnusta koko sivustoosi, on kuitenkin huomattava, että tiedot ja yhteenvetotunniste tuetaan tällä hetkellä vain Chrome 12: ssa ja sitä uudemmissa versioissa.

Jopa uusin Firefox ei tue niitä vielä.

Jos haluat käyttää tätä tunnistetta, sinun on sisällytettävä varmuuskopiointitoiminto tukemattomille selaimille. Hyvä uutinen se on yksinkertaista; voit käyttää näitä yksityiskohtia polyfill, joka kopioi automaattisesti vanhan selaimen tunnistefunktion.

Lataa tämä tiedosto ja liitä se html-asiakirjaan yhdessä jQueryn kanssa (vähintään 1,7+) ja varmista, että asetat polyfillin ennen suljetun kehotunnisteen.

Aseta päätunnisteen sisällä seuraava ehdollinen tunniste, joka sisältää HTML5shivin IE8: lle ja aikaisemmin, muuten Internet Explorer ei tunnista näitä uusia tunnisteita.

Katsotaanpa nyt, miten Internet Explorerissa ilmenee:

Ja nyt se toimii myös Internet Explorerissa.

• esittely
• Lataa lähde

johtopäätös

Tällaisen piilo- ja show-efektin luominen JavaScriptin tai jQueryn avulla on oikeastaan ​​suhteellisen helppoa, mutta se, että selain tukee sitä luonnollisesti, on varmasti paljon helpompi ratkaisu monille. Haluatko tehdä sen JavaScriptissä tai HTML5: ssä, se on sinun päätös. Kiitos lukemisesta, ja toivon, että nautit siitä.