Neues in HTML 5.2
Zu Beginn dieses Jahres wurde HTML 5.2 eine offizielle “W3C Recommendation (REC)”.
Wenn eine Spezifikation den REC-Status erhält bedeutet dies, dass sie offiziell von den W3C Mitgliedern und dessen Direktor gebilligt wird und die W3C empfiehlt, diese Spezifikation zu benutzen.
In Version 5.2 kam es zu mehreren Änderungen, wobei hier nur ein Ausschnitt vorgestellt wird.
Eine vollständige Auflistung der Änderungen kann man auf der offiziellen Seite HTML 5.2 Changes finden.
Neue Funktionen
Ein natives <dialog>-Element
Dialoge sind zwar sehr häufig im Internet anzutreffen, jedoch unterscheidet sich nahezu jede Implementierung in irgendeiner Art. Außerdem war es bisher schwierig, Dialoge barrierefrei umzusetzen. Das macht es meist für Benutzer, die nicht visuell navigieren, unbrauchbar.
Das neue <dialog>-Element versucht dies zu ändern, indem es einen einfachen Dialog zur Verfügung stellt, welcher jedoch möglichst wenig Tücken bietet.
Einen Dialog erzeugt man folgendermaßen:
Auch wenn es mehrere Methoden gibt Elemente zu verbergen, muss man zusätzliche <main> Elemente zwingend mithilfe des hidden-Attributes verbergen und nicht mithilfe von display:none oder ähnlichen Methoden.
Neue ungültige Praktiken
Außerdem wurden auch manche Praktiken für ungültig erklärt.
Keine inline, floated oder blocked Kinder von <p>
In HTML 5.2 ist innerhalb von <p> Elementen nur noch Inhalt erlaubt, welcher tatsächlich etwas ausdrückt. Somit sind folgende Elemente nicht mehr innerhalb von Paragraphen erlaubt:
- Inline Blöcke
- Inline Tabellen
- Floating und fest positionierte Blöcke
Keine vorgeschriebenen Doctypes
Abschließend kann man sich von folgenden vorgerschriebenen Doctypes verabschieden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Quelle: https://bitsofco.de/whats-new-in-html-5-2/?utm_source=frontendfocus&utm_medium=email
<main>...</main>
<main hidden>...</main>
<main hidden>...</main>Größe von Apple Icons
Um ein Icon für eine Webseite zu definieren, nutzt man das <link rel="icon">-Element im Header des Dokuments. Um unterschiedliche Größen von Icons zu definieren, nutzt man das sizes-Attribut.
<link rel="icon" sizes="16x16" href="path/to/icon16.png">
<link rel="icon" sizes="32x32" href="path/to/icon32.png">
Dieses Attribut erlaubt es Browsern zu entscheiden, welches Icon benutzt werden soll, wenn mehrere Größen eines Icons vorhanden sind.
Vor HTML 5.2 war das "sizes"-Attribut nur gültig, wenn es innerhalb eines Icon-Elements benutzt wurde. Jedoch unterstützen die iOS-Geräte von Apple dieses "sizes"-Attribut nicht.
Um dieses Problem zu lösen hat Apple das für Apple-Geräte spezifische "apple-touch-icon"-Attribut eingeführt, welches benutzt wird, um Icons zu definieren, die für ihre Geräte benutzt werden sollen.
In HTML 5.2 ist es nun erlaubt, das "sizes"-Attribut in der "apple-touch-icon"-Definition zu verwenden. Dies erlaubt uns jetzt, Icons in verschiedenen Größen für Apple-Geräte zu definieren.
Jedoch unterstützen Apple-Geräte noch immer kein "sizes"-Attribut und somit ist diese Änderung erst wirklich nutzbar, wenn Apple-Geräte das "sizes"-Attribut unterstützen.
Neue gültige Praktiken
Zusätzlich zu den neuen Funktionen sind in HTML 5.2 auch einige Praktiken erlaubt, die vorher nicht erlaubt waren.
Mehrere <main> Elemente
Mit HTML 5.2 kann man mehrere <main>-Elemente auf einer Seite benutzen, solange nur ein Element gleichzeitig sichtbar ist. Jedes zusätzliche Element muss mithilfe des "hidden"-Attributes verborgen werden.
Nutzung einer Zahlungsanfrage API von Iframes
Die Zahlungsanfragen API is eine native Alternative zu “Checkout Forms”.
Ihr Ziel besteht darin eine standardisierte und konsistente Methode für Zahlungen im Internet zur Verfügung zu stellen, indem sie die Verarbeitung von eingehenden Zahlungsinformationen im Browser, anstatt in einer individuellen “Checkout Form” auf jeder Website ausführt.
Vor HTML 5.2 konnten keine Zahlungsaufträge aus einem im Dokument eingebetteten Iframe getätigt werden, was es für Drittanbieter von eingebetteten Zahlungsmöglichkeiten praktisch unmöglich machte, von eben jener Schnittstelle Gebrauch zu machen.
HTML 5.2 hat das “allowpaymentrequest”-Attribut eingeführt, welches, wenn man es einem Iframe anfügt, diesem erlaubt die “Payment Request API” zu benutzen, während sich der Nutzer auf der Webseite befindet.
<button id="open">Open Dialog</button>
<button id="close">Close Dialog</button>
<dialog id="dialog">
<h2>Dialog Title</h2>
<p>Dialog content and other stuff will go here</p>
</dialog>
<script>
const dialog = document.getElementById("dialog");
document.getElementById("open").addEventListener("click", () => {
dialog.show();
});
document.getElementById("close").addEventListener("click", () => {
dialog.close();
});
</script>Das Open-Attribut kann man mit show() anhängen und mit close() wieder entfernen.
<dialog open>Ein Dialog ist standardmäßig verborgen, bis das Attribut "open" angehängt wird.
<dialog>
<h2>Dialog Title</h2>
<p>Dialog content and other stuff will go here</p>
</dialog>Das <dialog>-Element ist bereits in Chrome und bedingt in Firefox nutzbar.
