Startseite » Codierung » 10 Neue Funktionen von HTML 5.1 und Verwendung der IRL

    10 Neue Funktionen von HTML 5.1 und Verwendung der IRL

    Die HTML-Spezifikation hat eine Generalüberholung vor ein paar Wochen, als W3C seine veröffentlichte neue HTML 5.1-Empfehlung im November 2016. In seinem letzten Blogbeitrag nannte W3C die neue Hauptversion der Goldstandard, HTML 5.1 bietet uns neue Möglichkeiten, wie wir mit HTML flexiblere Web-Erlebnisse schaffen können.

    In diesem Artikel werfen wir einen Blick auf die neuen Funktionen, die Sie nutzen können ohne JavaScript zu berühren, Bemerkenswert sind jedoch auch die Verbesserungen des JavaScript-Hintergrunds, wie Sie im sehen können offizielles Änderungsprotokoll.

    Beachten Sie, dass derzeit nicht alle Browser alle diese Funktionen unterstützen. Vergessen Sie also nicht Überprüfen Sie die Browser-Unterstützung bevor Sie sie in der Produktion verwenden. Wenn Sie sich für das interessieren Weiterentwicklung des HTML-Standards, Sie können sich auch den Arbeitsentwurf von HTML 5.2 ansehen.

    1. Definieren Sie mehrere Bildressourcen für das responsive Design

    In HTML 5.1 können Sie verwenden tag zusammen mit der srcset Attribut zu machen ansprechende Bildauswahl möglich. Das tag steht für ein Bildcontainer das erlaubt Entwicklern zu verschiedene Bildressourcen deklarieren um sich an das anzupassen UADarstellungsfeldgröße, Bildschirmpixeldichte, Bildschirmtyp und andere Parameter, die in verwendet werden sich anpassendes Design.

    Das tag selbst zeigt nichts an, es funktioniert lediglich als Kontext für die mehreren Bildressourcen. Sie müssen das angeben Standard-Bildressource als Wert von src Attribut des tag und die alternative Bildressourcen geh innerhalb der srcset Attribute des und Elemente.

    Code-Beispiel:

    2. Zusätzliche Informationen anzeigen oder ausblenden

    Mit dem

    und Tags können Sie fügen Sie erweiterte Informationen hinzu zu einem Inhaltsstück. Die zusätzlichen Informationen wird standardmäßig nicht angezeigt, aber wenn Benutzer interessiert sind, sie haben die Möglichkeit, einen Blick darauf zu werfen. In Ihrem Code sollten Sie Stelle das innen markieren
    . Nach dem kennzeichnen Sie können fügen Sie die zusätzlichen Informationen hinzu du willst dich verstecken.

    Code-Beispiel:

     
     
    Fehlermeldung
     
     Der Download dieses Videos konnte nicht abgeschlossen werden. 
     
    Dateiname:
    Ihre Datei.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 seine type = "context" Attribut können Sie benutzerdefinierte Funktionalität hinzufügen zum Kontextmenü des Browsers. Sie müssen zuweisen als untergeordnetes Element der

    Etikett. Das Ich würde des Element muss zu tragen den gleichen Wert wie der Kontextmenü Attribut des Elements, zu dem wir das Kontextmenü hinzufügen möchten (das ist das

    Das tag kann habe drei verschiedene Arten, "Ankreuzfeld", "Befehl" (zu dem Sie eine Aktion mit JavaScript hinzufügen müssen) und Radio. Es ist möglich, mehr als einen Menüeintrag zu einem Kontextmenü hinzuzufügen Browser-Unterstützung für diese Funktion ist noch nicht sehr gut. Chrome 54 unterstützt dies nicht und Firefox 50 lässt nur ein zusätzliches Kontextmenü zu. Nachfolgend sehen Sie, wie das Codebeispiel in Firefox 50 funktioniert.

    4. Schachteln Sie Kopf- und Fußzeilen

    HTML 5.1 ermöglicht es Ihnen Verschachteln von Kopf- und Fußzeilen wenn jede Ebene ist enthalten in Abschnittsinhalten. Der folgende Hinweis ist ein Screenshot aus den W3C-Dokumenten, der Entwickler über die richtige Verschachtelung von Kopf- und Fußzeilen informiert.

    Diese Funktion kann nützlich sein, wenn Sie hinzufügen möchten ausgearbeitete Header zu semantischen Abschnittselementen, sowie

    und
    . Das folgende Codebeispiel erstellt eine Seitenleiste in der Kopfzeile, die