10 Nieuwe functies van HTML 5.1 & Hoe ze te gebruiken IRL
De HTML-specificatie werd enkele weken geleden ingrijpend vernieuwd toen W3C in november 2016 zijn nieuwe HTML 5.1-aanbeveling publiceerde. In zijn recente blogpost noemde W3C de nieuwe belangrijke release de gouden standaard, omdat HTML 5.1 ons nieuwe manieren biedt om we kunnen HTML 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, maar de verbeteringen van de JavaScript-achtergrond zijn ook opmerkelijk, zoals u kunt zien in het officiële wijzigingslogboek .
Merk op dat momenteel niet alle browsers al deze functies ondersteunen, dus vergeet niet de ondersteuning voor browsers te controleren voordat u ze in de productie gebruikt. Als u geïnteresseerd bent in de verdere ontwikkeling van de HTML-standaard, kunt u ook de conceptversie van HTML 5.2 bekijken.
1. Definieer meerdere beeldbronnen voor responsief ontwerp
In HTML 5.1 kunt u gebruiken label samen met het kenmerk srcset om responsieve beeldselectie mogelijk te maken. De tag staat voor een afbeeldingscontainer waarmee ontwikkelaars verschillende beeldbronnen kunnen declareren om zich aan te passen aan de viewport-grootte van de UA, schermpixeldichtheid, schermtype en andere parameters die worden gebruikt in responsief ontwerp .
De tag zelf geeft niets weer, het functioneert alleen als context voor de meerdere beeldbronnen . U moet de standaard image resource declareren als de waarde van het src attribuut van de tag en de alternatieve afbeeldingsbronnen gaan binnen de srcset kenmerken van de en elementen.
Codevoorbeeld:
2. Toon of verberg extra informatie
Met de en tags kunt u uitgebreide informatie toevoegen aan een inhoudsitem. De extra informatie wordt standaard niet getoond, maar als gebruikers geïnteresseerd zijn, hebben ze de mogelijkheid om een kijkje te nemen . In je code moet je detag binnen . Na de tag kun je de extra informatie toevoegen die je wilt verbergen.
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
Codevoorbeeld:
De
4. Nest-kop- en voetteksten
HTML 5.1 biedt u de mogelijkheid om kop- en voetteksten te nestelen als elk niveau zich binnen de sectie-inhoud bevindt . 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 uitgebreide koppen wilt toevoegen aan semantische segmentelementen, zoals en . Het onderstaande codevoorbeeld maakt een zijbalk in de koptekst, de
nl.hideout-lastation.com
Merk op dat momenteel niet alle browsers al deze functies ondersteunen, dus vergeet niet de ondersteuning voor browsers te controleren voordat u ze in de productie gebruikt. Als u geïnteresseerd bent in de verdere ontwikkeling van de HTML-standaard, kunt u ook de conceptversie van HTML 5.2 bekijken.
3. Voeg functionaliteit toe aan het contextmenu van de browser 
4. Nest-kop- en voetteksten 
Deze functie kan handig zijn als u uitgebreide koppen wilt toevoegen aan semantische segmentelementen, zoals 
