Hjemmeside » Coding » 10 nye funktioner i HTML 5.1 og hvordan man bruger dem IRL

    10 nye funktioner i HTML 5.1 og hvordan man bruger dem IRL

    HTML-specifikationen fik en større revision et par uger siden da W3C offentliggjorde sin ny HTML 5.1 anbefaling i november 2016. I sit seneste blogindlæg kaldte W3C den nye store udgivelse guldstandarden, som HTML 5.1 giver os nye måder, hvorpå vi kan bruge HTML til at skabe mere fleksible weboplevelser.

    I denne artikel skal vi se på de nye funktioner, du kan gøre brug af uden at røre ved JavaScript, Men forbedringerne af JavaScript-baggrunden er også bemærkelsesværdige, som du kan se det i officiel ændring log.

    Bemærk, at i øjeblikket ikke alle browsere understøtter alle disse funktioner, så glem ikke at check browser support før du bruger dem i produktion. Hvis du er interesseret i videreudvikling af HTML-standarden, Du kan også tjekke udkastet til HTML 5.2.

    1. Definer flere billedressourcer til responsivt design

    I HTML 5.1 kan du bruge tag sammen med srcset attribut til at gøre lydhør billedvalg muligt. Det tag repræsenterer en billedbeholder som giver udviklere mulighed for erklære forskellige billedressourcer for at kunne tilpasse sig UAs visningsstørrelse, skærm pixeldensitet, skærmtype og andre parametre, der anvendes i lydhør design.

    Det tag selv viser ikke noget, det fungerer kun som kontekst for de flere billedressourcer. Du skal erklære standard billedressource som værdien af src attributten til tag og alternative billedressourcer gå inden for srcset attributter af og elementer.

    Kodeeksempel:

    2. Vis eller skjul ekstra information

    Med

    og tags, du kan Tilføj udvidet information til et indholdsstykke. Den ekstra information vises ikke som standard, men hvis brugerne er interesserede, de har mulighed for at kigge. I din kode skal du placere tag indeni
    . Efter tag du kan Tilføj de ekstra oplysninger du ønsker at skjule.

    Kodeeksempel:

     
     
    Fejl besked
     
     Vi kunne ikke afslutte at downloade denne video. 
     
    Filnavn:
    yourfile.mp4
     
    Filstørrelse:
    100 MB
     
    Varighed:
    00:05:27

    Sådan ser dette kodeeksempel ud i Firefox 50.0.2:

    3. Tilføj funktionalitet til browserens kontekstmenu

    Med element og dets type = "kontekst" attribut, du kan Tilføj tilpasset funktionalitet til kontekstmenuen i browseren. Du skal tildele som barnets element i

    tag. Det id af element skal bære samme værdi som sammenhængsafhængige attribut af det element, som vi vil tilføje kontekstmenuen til (hvilket er

    Det tag kan har tre forskellige typer, "Afkrydsningsfeltet", "kommando" (som du skal tilføje en handling med JavaScript), og radio. Det er muligt at tilføje mere end et menupunkt til en kontekstmenu, dog browser support for denne funktion er ikke særlig godt endnu. Chrome 54 understøtter det ikke, og Firefox 50 tillader kun tilstedeværelsen af ​​en ekstra kontekstmenu. Nedenfor kan du se, hvordan kodeeksemplet fungerer i Firefox 50.

    4. Nesthoveder og fodfødder

    HTML 5.1 tillader dig at nesthoveder og fodfødder hvis hvert niveau er indeholdt i sektionsindhold. Noten nedenfor er et skærmbillede fra W3C-dokumenterne og rådgiver udviklere om den rigtige måde at header og sidebemærkning på..

    Denne funktion kan være nyttig, hvis du vil tilføje uddybede overskrifter til semantiske snitelementer, såsom

    og
    . Kodeeksemplet nedenfor opretter et sidebjælke inde i overskriften, den