Hemsida » Kodning » 10 nya funktioner i HTML 5.1 och hur man använder dem IRL

    10 nya funktioner i HTML 5.1 och hur man använder dem IRL

    HTML-specifikationen fick en större översyn för några veckor sedan när W3C publicerade sin ny HTML 5.1 rekommendation i november 2016. I sitt senaste blogginlägg kallade W3C den nya stora versionen guldstandard, som HTML 5.1 ger oss nya sätt att använda HTML för att skapa mer flexibla webbupplevelser.

    I den här artikeln ska vi titta på de nya funktionerna du kan använda utan att röra JavaScript, men förbättringarna av JavaScript-bakgrunden är också anmärkningsvärda, som du kan se den i officiell ändringslogg.

    Observera att för närvarande inte alla webbläsare stöder alla dessa funktioner, så glöm inte att kolla webbläsarsupport innan du använder dem i produktion. Om du är intresserad av vidareutveckling av HTML-standarden, du kan också kolla in det utkast till HTML 5.2.

    1. Definiera flera bildresurser för responsiv design

    I HTML 5.1 kan du använda taggar tillsammans med srcset attribut att göra responsivt bildval möjlig. De taggen representerar en bildbehållare som tillåter utvecklare att förklara olika bildresurser för att anpassa sig till UAvisningsstorlek, skärmpunktdensitet, skärmtyp och andra parametrar som används i responsiv design.

    De taggen själv visar inte någonting, det fungerar bara som sammanhang för de flera bildresurserna. Du måste förklara standard bildresurs som värdet av src attribut av taggen och alternativa bildresurser gå in i srcset attribut av och element.

    Kod exempel:

    2. Visa eller göm extra information

    Med

    och taggar du kan lägg till utökad information till en innehållsdel. Den extra informationen visas inte som standard, men om användarna är intresserade, de har möjlighet att ta en titt. I din kod ska du placera tagga inuti
    . Efter taggar du kan lägg till extra information du vill gömma dig.

    Kod exempel:

     
     
    Felmeddelande
     
     Vi kunde inte avsluta nedladdningen av den här videon. 
     
    Filnamn:
    yourfile.mp4
     
    Filstorlek:
    100 MB
     
    Varaktighet:
    00:05:27

    Så här ser detta kodexempel ut i Firefox 50.0.2:

    3. Lägg till funktionalitet i webbläsarens snabbmeny

    Med element och dess type = "kontext" attribut, du kan lägg till anpassad funktionalitet till snabbmenyn i webbläsaren. Du måste tilldela som barnets element i

    märka. De id av element behöver bära samma värde som innehålls meny attribut av det element som vi vill lägga till snabbmenyn till (vilket är

    De tag kan har tre olika typer, "Kryssrutan", "kommando" (som du måste lägga till en åtgärd med JavaScript), och radio. Det är möjligt att lägga till mer än ett menyalternativ till en snabbmeny, dock webbläsarsupport för den här funktionen är inte så bra än. Chrome 54 stöder inte det, och Firefox 50 tillåter bara närvaron av en extra sammanhangsmeny. Nedan kan du se hur kodexemplet fungerar i Firefox 50.

    4. Nesthuvud och sidfot

    HTML 5.1 tillåter dig att näshuvud och sidfot om varje nivå är innehöll inom sektionsinnehållet. Anteckningen nedan är en skärmdump från W3C-dokumenten, och ger utvecklare råd om rätt sätt att häva och sidfot.

    Den här funktionen kan vara användbar om du vill lägga till utarbetade rubriker till semantiska sektionselement, som

    och
    . Kodsexemplet nedan skapar ett sidofält inom rubriken,