Startpagina » Coding » 10 Nieuwe functies van HTML 5.1 & Hoe ze te gebruiken IRL

    10 Nieuwe functies van HTML 5.1 & Hoe ze te gebruiken IRL

    De HTML-specificatie kreeg een grote revisie een paar weken geleden toen W3C het publiceerde nieuwe HTML 5.1-aanbeveling in november 2016. In zijn recente blog post noemde W3C de nieuwe grote release de gouden standaard, omdat HTML 5.1 ons nieuwe manieren biedt om HTML te gebruiken om flexibelere webervaringen te creëren.

    In dit artikel gaan we kijken naar de nieuwe functies die u kunt gebruiken zonder JavaScript aan te raken, de verbeteringen van de JavaScript-achtergrond zijn echter ook opmerkelijk, zoals je kunt zien in de officieel wijzigingslogboek.

    Merk op dat momenteel niet alle browsers al deze functies ondersteunen, dus vergeet niet om dit te doen controleer browserondersteuning voordat je ze in productie gebruikt. Als u geïnteresseerd bent in de verdere ontwikkeling van de HTML-standaard, u kunt ook de conceptversie van HTML 5.2 bekijken.

    1. Definieer meerdere beeldbronnen voor responsief ontwerp

    In HTML 5.1 kunt u gebruiken tag samen met de srcset attribuut om te maken responsieve beeldselectie mogelijk. De tag vertegenwoordigt een beeldcontainer waarmee ontwikkelaars kunnen verschillende bronnen voor afbeeldingen declareren om zich aan te passen aan de UAde viewport-afmeting, schermpixeldichtheid, schermtype en andere parameters gebruikt in reagerend ontwerp.

    De tag zelf geeft niets weer, het functioneert alleen als context voor de meerdere beeldbronnen. U moet het standaard beeldbron als de waarde van de src attribuut van de tag en de alternatieve beeldbronnen ga binnen de srcset attributen van de en elementen.

    Codevoorbeeld:

    2. Toon of verberg extra informatie

    Met de

    en tags, dat kan voeg uitgebreide informatie toe naar een inhoudelijk stuk. De extra informatie wordt standaard niet getoond, maar als gebruikers geïnteresseerd zijn, zij hebben de mogelijkheid om een ​​kijkje te nemen. In uw code hoort u dat te doen plaats de tag binnen
    . Na de tag je kunt voeg de extra informatie toe je wilt je verstoppen.

    Codevoorbeeld:

     
     
    Foutbericht
     
     We kunnen het downloaden van deze video niet voltooien. 
     
    Bestandsnaam:
    yourfile.mp4
     
    Bestandsgrootte:
    100 MB
     
    Looptijd:
    00:05:27

    Zo ziet dit codevoorbeeld eruit in Firefox 50.0.2:

    3. Voeg functionaliteit toe aan het contextmenu van de browser

    Met de element en zijn type = "context" kenmerk, dat kan voeg aangepaste functionaliteit toe naar de contextmenu van de browser. U moet toewijzen als het onderliggende element van de

    label. De ID kaart van de element moet dezelfde waarde dragen als de contextmenu attribuut van het element waaraan we het contextmenu willen toevoegen (dat is de

    De tag kan heb drie verschillende types, "Checkbox", "commando" (waaraan u een actie met JavaScript moet toevoegen), en radio-. Het is mogelijk om meer dan één menu-item aan een contextmenu toe te voegen, maar de ondersteuning voor browsers voor deze functie is nog niet zo goed. Chrome 54 ondersteunt het niet en Firefox 50 staat alleen de aanwezigheid toe van één extra contextmenu. Hieronder kunt u zien hoe het codevoorbeeld werkt in Firefox 50.

    4. Nest-kop- en voetteksten

    HTML 5.1 staat je toe om nest headers en footers als elk niveau is vervat in sectie-inhoud. De onderstaande opmerking is een screenshot van de W3C-documenten en adviseert ontwikkelaars over de juiste manier van nestelen van kop- en voettekst.

    Deze functie kan handig zijn als u wilt toevoegen uitgewerkte headers naar semantische sectiekaders, zoals

    en
    . Het onderstaande codevoorbeeld maakt een zijbalk in de koptekst, de