10 neue Funktionen von HTML 5.1 und wie man sie IRL benutzt

Die HTML-Spezifikation wurde vor ein paar Wochen grundlegend überarbeitet, als W3C im November 2016 seine neue HTML 5.1-Empfehlung veröffentlichte. In seinem letzten Blogpost nannte W3C die neue Hauptversion den Goldstandard, da HTML 5.1 uns neue Wege bietet Wir können HTML verwenden, um flexiblere Web-Erlebnisse zu erstellen.

In diesem Artikel werden wir uns die neuen Funktionen ansehen, die Sie verwenden können, ohne JavaScript zu verwenden . Allerdings sind die Verbesserungen des JavaScript-Hintergrunds ebenfalls bemerkenswert, wie Sie im offiziellen Änderungsprotokoll sehen können .

Beachten Sie, dass derzeit nicht alle Browser alle diese Funktionen unterstützen. Vergessen Sie daher nicht, die Browserunterstützung zu überprüfen, bevor Sie sie in der Produktion verwenden. Wenn Sie an der Weiterentwicklung des HTML-Standards interessiert sind, können Sie sich auch den Arbeitsentwurf von HTML 5.2 anschauen.

1. Definieren Sie mehrere Bildressourcen für Responsive Design

In HTML 5.1 können Sie verwenden zusammen mit dem srcset Attribut srcset, um eine ansprechende Bildauswahl zu ermöglichen. Das Das Tag stellt einen Bildcontainer dar, mit dem Entwickler verschiedene Bildressourcen deklarieren können, um sich an die Darstellungsgröße, die Bildschirmpixeldichte, den Bildschirmtyp und andere im Responsive Design verwendete Parameter anzupassen.

Das Das Tag selbst zeigt nichts an, es fungiert lediglich als Kontext für die mehreren Bildressourcen . Sie müssen die Standard-Bildressource als Wert des src Attributs der Tag, und die alternativen srcset gehen innerhalb der srcset Attribute der und Elemente.

Codebeispiel:

2. Zeigen oder verbergen Sie zusätzliche Informationen

Mit dem

und

Tags können Sie einem Inhaltselement erweiterte Informationen hinzufügen . Die zusätzlichen Informationen werden nicht standardmäßig angezeigt, aber wenn Benutzer interessiert sind, haben sie die Möglichkeit, einen Blick darauf zu werfen . In deinem Code sollst du das platzieren

Etikett innen

. Nach dem

Tag können Sie die zusätzlichen Informationen hinzufügen, die Sie ausblenden möchten.

Codebeispiel:

Fehlermeldung 
 Wir konnten das Video nicht fertig herunterladen. 
 Dateiname: 
 yourfile.mp4 
 Dateigröße: 
 100 MB 
 Dauer: 
 00:05:27 

So sieht dieses Codebeispiel in Firefox 50.0.2 aus:

3. Fügen Sie dem Kontextmenü des Browsers Funktionen hinzu

Mit dem element und sein type="context" -Attribut, können Sie dem Kontextmenü des Browsers benutzerdefinierte Funktionen hinzufügen . Sie müssen zuweisen als Kindelement des

Etikett. Die id der Das Element muss den gleichen Wert wie das Attribut contextmenu des Elements haben, dem das Kontextmenü hinzugefügt werden soll (das Element im Beispiel unten).

Codebeispiel:

 Rechtsklick auf mich 

Das Das Tag kann drei verschiedene Typen haben : "checkbox", "command" (zu dem Sie eine Aktion mit JavaScript hinzufügen müssen) und radio . Es ist möglich, mehr als ein Menüelement zu einem Kontextmenü hinzuzufügen, jedoch ist die Browserunterstützung für diese Funktion noch nicht sehr gut . Chrome 54 unterstützt dies nicht und Firefox 50 lässt nur das Vorhandensein eines zusätzlichen Kontextmenüs zu. Im Folgenden können Sie sehen, wie das Codebeispiel in Firefox 50 funktioniert.

4. Verschachteln Sie Kopf- und Fußzeilen

HTML 5.1 ermöglicht es Ihnen, Kopf- und Fußzeilen zu verschachteln, wenn jede Ebene im Abschnitt Inhalt enthalten ist . Der folgende Hinweis ist ein Screenshot aus den W3C-Dokumenten und berät Entwickler über die richtige Art der Verschachtelung von Kopf- und Fußzeilen.

Diese Funktion kann nützlich sein, wenn Sie semantischen Schnittelementen, wie z

und

. Im folgenden Codebeispiel wird eine Seitenleiste in der Kopfzeile erstellt