10 nye funksjoner i HTML 5.1 og hvordan du bruker dem IRL

HTML-spesifikasjonen fikk en større overhaling et par uker siden da W3C publiserte sin ny HTML 5.1 anbefaling i november 2016. I sitt siste blogginnlegg kalt W3C den nye store utgivelsen gullstandard, som HTML 5.1 gir oss nye måter på hvordan vi kan bruke HTML for å skape mer fleksible webopplevelser.

I denne artikkelen skal vi se på de nye funksjonene du kan bruke uten å berøre JavaScript, men forbedringene av JavaScript-bakgrunnen er også bemerkelsesverdige, som du kan se det i offisiell endringslogg.

Merk at for øyeblikket ikke alle nettlesere støtter alle disse funksjonene, så ikke glem å sjekk nettleserstøtte før du bruker dem i produksjon. Hvis du er interessert i videreutvikling av HTML-standarden, Du kan også sjekke ut det utkastet til HTML 5.2.

1. Definer flere bilderessurser for responsiv design

I HTML 5.1 kan du bruke tag sammen med srcset attributt til å lage responsivt bildevalg mulig. De tag representerer en bildebeholder som tillater utviklere å erklære forskjellige bilderessurser for å kunne tilpasse seg UAvisningsstørrelse, skjerm piksel tetthet, skjermtype og andre parametere som brukes i responsiv utforming.

De taggen selv viser ikke noe, det fungerer bare som kontekst for flere bilderessurser. Du må deklarere standard bilde ressurs som verdien av src attributt av tag, og alternative bilderessurser gå inn i srcset attributter av og elementer.

Kodeeksempel:

2. Vis eller skjul ekstra informasjon

Med

og

tagger, kan du legg til utvidet informasjon til et innholdsdel. Den ekstra informasjonen vises ikke som standard, men hvis brukerne er interessert, de har muligheten til å ta en titt. I koden din skal du plasser

tag inne

. Etter

tag du kan legg til den ekstra informasjonen du vil gjemme deg.

Kodeeksempel:

 
 
Feilmelding
 
 
Vi kunne ikke fullføre nedlasting av denne videoen.
 
 
Filnavn:
yourfile.mp4
 
Filstørrelse:
100 MB
 
Varighet:
00:05:27
 
 
 
 

Slik ser dette kodeeksemplet ut i Firefox 50.0.2:

3. Legg til funksjonalitet i nettleserens kontekstmeny

Med element og dens type = "kontekst" attributt, du kan legg til tilpasset funksjonalitet til Kontekstmenyen til nettleseren. Du må tilordne som barnets element i

stikkord. De id av elementet må bære samme verdi som kontekstmenyen Egenskap av elementet som vi vil legge til kontekstmenyen til (som er element i eksempelet nedenfor).

Kodeeksempel:

Høyreklikk meg

De tag kan har tre forskjellige typer, "Boksen", "kommando" (som du må legge til en handling med JavaScript), og radio. Det er mulig å legge til mer enn ett menyelement til en kontekstmeny, men nettleserstøtte for denne funksjonen er ikke veldig bra ennå. Chrome 54 støtter ikke det, og Firefox 50 tillater bare tilstedeværelse av en ekstra kontekstmeny. Nedenfor kan du se hvordan kodeeksemplet fungerer i Firefox 50.

4. Nest-hoder og bunntekster

HTML 5.1 lar deg nest topp og footers hvis hvert nivå er inneholdt i snittinnholdet. Notatet nedenfor er et skjermbilde fra W3C-dokumentene, og rådgiver utviklere om den riktige måten å ha header og bunntekst.

Denne funksjonen kan være nyttig hvis du vil legge til utdypede overskrifter til semantiske snittelementer, som for eksempel

og

. Kodeneksempelet nedenfor lager et sidebjelke i overskriften, den