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

HTML-spesifikasjonen ble gjennomført for et par uker siden da W3C publiserte sin nye HTML 5.1-anbefaling i november 2016. I det siste blogginnlegget ringte W3C den nye store utgivelsen gullstandarden, da HTML 5.1 gir oss nye måter å Vi kan bruke HTML for å skape mer fleksible nettopplevelser.

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

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

1. Definer flere bilderessurser for responsiv design

I HTML 5.1 kan du bruke tag sammen med srcset attributtet for å gjøre responsivt bildevalg mulig. De tag representerer en bildebeholder som tillater utviklere å erklære forskjellige bildesurser for å tilpasse seg UAs visningsstørrelse, skjermpikseldensitet, skjermtype og andre parametere som brukes i responsiv design .

De taggen selv viser ikke noe, det fungerer bare som kontekst for de flere bilderessursene . Du må deklarere standardbilledressursen som verdien av src attributtet til tag, og de alternative srcset går innenfor srcset attributter til og elementer.

Kodeeksempel:

2. Vis eller skjul ekstra informasjon

Med

og

koder, kan du legge til utvidet informasjon til et innholdsdel. Den ekstra informasjonen vises ikke som standard, men hvis brukerne er interessert, har de muligheten til å ta en titt . I din kode skal du plassere

tag inni

. Etter

tag du kan legge til den ekstra informasjonen du vil gjemme.

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="context" attributt, kan du legge til tilpasset funksjonalitet i hurtigmenyen til nettleseren . Du må tilordne som barnets element i

stikkord. id av elementet må ha samme verdi som kontekstmenyattributtet til elementet som vi vil legge til kontekstmenyen til (som er elementet i eksemplet nedenfor).

Kodeeksempel:

 Høyreklikk meg 

De tag kan ha tre forskjellige typer, "checkbox", "command" (som du må legge til en handling med JavaScript) og radio . Det er mulig å legge til mer enn ett menyelement til en kontekstmeny, men nettleserens støtte for denne funksjonen er ikke så 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 topptekst og bunntekst

HTML 5.1 lar deg neste overskrifter og bunntekster hvis hvert nivå er inneholdt i seksjonsinnhold . 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 utførlige overskrifter til semantiske snittelementer, for eksempel

og

. Kodeeksempelet nedenfor lager et sidebjelke i overskriften, den