Begynn å se på HTML5-malelementet

Den relativt nye HTML5-elementspesifikasjonen er fremdeles i de eksperimentelle utviklingsstadiene og beskriver en metode for å deklarere inerte DOM-undertrær i HTML og manipulere dem for å initiere dokumentfragmenter med identisk innhold.

I hovedsak er elementet et API som prøver å standardisere en klientside-tilnærming for å erklære en markering av fragmenter som prototyper, som deretter blir serialisert og de-serialisert i HTML-dokumentet, og brukes bare når det er nødvendig. Deretter kan forfattere skjule disse fragmentene slik at innholdet bare er tilgjengelig under kjøretid, men ellers blir ignorert av nettleseren. Elementet er en del av nettkomponenter. Spesifikasjonen definerer et sett med statiske maler som gjør det mulig å lage rik nettbrukerinteraksjon (UI) bare ved hjelp av CSS og HTML-markering.

Nettleserstøtte

På grunn av elementets eksperimentelle natur, er nåværende nettleserstøtte begrenset til Chrome Canary og Firefox Nightly. Chrome Canary, som har de nyeste Chrome-funksjonene, er designet for utviklere og tidlige adoptere, slik at du kan forvente krasj eller låsing av og til. Firefox Nightly inkluderer flere nettleserbygg for testformål.

Spesifikasjonen

I henhold til spesifikasjonsintroduksjonen kan elementet plasseres hvor som helst i , og elementene, og innholdet kan inneholde alt som ellers kan forekomme i noen av disse elementene. Innholdet i maler er ikke en del av dokumentet (det vises ikke, samsvares ikke med querySelector, etc.) og er inaktivt (f.eks. Ikke føre til at ressurser lastes, skript å kjøres, medier å spille osv.) .

HTML5 funksjonsdeteksjon

Selv om det ikke er mulig å oppdage en HTML5-funksjonsdeteksjon i en størrelse som passer til alle, gir Modernizr et JavaScript-bibliotek som oppdager HTML5 og CSS3-funksjoner i brukerens nettleser. Modernizr oppdager de fleste HTML5 og CSS-funksjoner og har nettopp lagt til funksjonsdeteksjon for elementet 26. februar 2013, som vist i kodebiten nedenfor:

 + definere ('Modernizr', 'createElement', funksjon (Modernizr, createElement) { 
 + // HTML-kode 
 + // http://www.html5rocks.com/no/tutorials/webcomponents/template/ 
 + // https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html 
 + Modernizr.addTest ('mal', 'innhold' i createElement ('mal')); 
 +}); 

Hvis du ikke bruker Modernizer, kan du imidlertid legge til funksjonsdeteksjonen som demonstrert av Eric Bidelman i HTML5 Rocks Tutorials. Syntaks og kodekodestykket vises nedenfor:

 funksjonen støtter figur () { 
 returner 'innhold' i document.createElement ('mal'); 
 } 
 if (supportsTemplate ()) { 
 // Klar til å gå! 
 } annet { 
 // Bruk gamle malingsteknikker eller biblioteker. 
 } 
Eric fortsetter med å tilby to demonstrasjoner, inkludert et inert skripteksempel som bare kjøres når du klikker på en knapp ( figur B ):

Figur B

Når du har klikket på knappen, legger den til innholdet, "Mal brukt%" og en "Takk!" varslingsvarsel, og hver klikkforekomst legger til en linje til innholdsdelingen.

I den andre demonstrasjonen gir Eric et eksempel på å lage en skyggedom fra en mal; en del av eksemplet er vist på figur C :

Figur C

Jeg har testet begge Eriks demonstrasjonseksempler i en mock-up index.html-fil og hver vises i Chrome Canary med positive resultater. Selv om det fremdeles er i de tidlige stadiene av utviklingen, er det et stort fremtidig potensial for å utvide innfødte muligheter for maling på klientsiden.

© Copyright 2021 | pepebotifarra.com