7 überraschende HTML5 Features, die du noch nicht kennst

Du weißt wahrscheinlich, dass HTML eine Standardauszeichnungssprache für die Erstellung von Websites ist. Die sogenannten Hypertext-Links ermöglichen es, einzelne Seiten miteinander zu verbinden, und die Verwendung von Markern erlaubt es, einzelnen Teilen des Inhalts eine besondere Bedeutung zuzuweisen. Aber kannst du dich daran erinnern, warum die HyperText Markup Language geschaffen wurde? Seitdem hat sie sich stark verändert und kann heute Dinge, die wir uns anfänglich kaum vorstellen konnten. Tauche mit uns in ihre Geschichte ein und lerne die weniger bekannten, aber umso interessanteren Funktionen der Version HTML5 kennen.

Die Anfänge von HTML gehen auf das Jahr 1990 zurück, als Tim Berners-Lee erkannte, dass Tex oder PostScript nicht die geeignetsten Sprachen sind, um einfache Dokumente zu erstellen. Die Idee für die neue Markup-Sprache stammt jedoch bereits aus dem Jahr zuvor. Ursprünglich war die Sprache für den internen Gebrauch in der Europäischen Organisation für Kernforschung, auch bekannt als CERN, gedacht. Offiziell wurde sie jedoch nicht als solche verwendet. Die erste Beschreibung der neuen Markup-Sprache wurde Ende des Jahres 1991 veröffentlicht und enthielt nur 18 Tags.

Kannst du erraten, welche? Versuche, sie aufzuschreiben. Die Antwort findest du hier.

Im Laufe der Zeit und dank der Weiterentwicklung der Technologie wurde 1997 die Version HTML4 eingeführt, die in den folgenden Jahren überarbeitet wurde. Mit dem allmählichen Anstieg der Zahl neuer User im Internet wuchs der Druck, den Gesamteindruck und die Arbeit mit Websites zu verbessern. Du hast es erraten – das ist der Zeitpunkt, an dem HTML5 auf der Bildfläche erscheint. Im Jahr 2008 wurde eine Arbeitsversion veröffentlicht. Die offizielle Spezifikation kam erst im Jahr 2014.

Die wichtigsten Vorteile von HTML5 sind:

• Neue Tags zur Verbesserung der Semantik (aside, section, address, figure, main, MathML, progres, ...)
• Offline-Zugriff + persistente Speicherung (LocalStorage, IndexedDB)
• Styling (Box-Shadow, mehrere Hintergründe, Filter, @font-face, Flexbox, ...)
• Multimedia (Audio, Video, Track, WebRTC, Kamera-API)

Wahrscheinlich kennst und nutzt du die meisten dieser Funktionen. Lass uns gemeinsam die weniger bekannten anschauen.

Page Visibility API

Du kannst einen Schieberegler (Karussell) auf deiner Seite platzieren, der alle 5 Sekunden die Folie wechselt. Was aber, wenn der User das Fenster minimiert oder zu einem anderen Tab wechselt? Der Slider läuft weiter.

Dein Kunde hat einiges an Zeit und Geld investiert, um die optimale Reihenfolge der Folien festzulegen. Die Geschichte, die er mit dem Slider erzählen wollte, fällt in sich zusammen und wird unverständlich. Dank der Page Visibility API kannst du diese Änderungen nachvollziehen. Diese Funktionalität ermöglicht es, zu beobachten, welches Element dem User angezeigt wird, und das Verhalten entsprechend zu ändern.

// Set the name of the hidden property and the change event for visibility  
var hidden, visibilityChange;   
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support   
  hidden = "hidden";  
  visibilityChange = "visibilitychange";  
} else if (typeof document.msHidden !== "undefined") {  
  hidden = "msHidden";  
  visibilityChange = "msvisibilitychange";  
} else if (typeof document.webkitHidden !== "undefined") {  
  hidden = "webkitHidden";  
  visibilityChange = "webkitvisibilitychange";  
}  
   
var videoElement = document.getElementById("videoElement");  
 
// If the page is hidden, pause the video;  
// if the page is shown, play the video  
function handleVisibilityChange() {  
  if (document[hidden]) {  
	videoElement.pause();  
  } else {  
	videoElement.play();  
  }  
}  
 
// Warn if the browser doesn't support addEventListener or the Page Visibility API  
if (typeof document.addEventListener === "undefined" || hidden === undefined) {  
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");  
} else {  
  // Handle page visibility change	 
  document.addEventListener(visibilityChange, handleVisibilityChange, false);  
 	 
  // When the video pauses, set the title.  
  // This shows the paused  
  videoElement.addEventListener("pause", function(){  
	document.title = 'Paused';  
  }, false);  
 	 
  // When the video plays, set the title.  
  videoElement.addEventListener("play", function(){  
	document.title = 'Playing';   
  }, false);  
 
}  
// Source: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

Navigator API – Online/Offline

Selbst im Jahr 2023 haben wir manchmal noch mit Internetverbindungsproblemen zu kämpfen. Wenn der User deiner App zu einem Link wechseln will und die App nicht reagiert, wird er höchstwahrscheinlich dich für das Problem verantwortlich machen und erst später herausfinden, dass das Problem auf seiner Seite liegt.

Die Navigator-API hilft, dieses Problem zu lösen. Sie sagt uns nicht, ob der User mit dem Internet verbunden ist. Wir erfahren nur, dass er mit irgendeinem Netzwerk verbunden ist. Wir können uns nicht darauf verlassen, dass die Antwort "true" bedeutet, dass der User mit dem Internet verbunden ist. Ist der Antwortstatus jedoch "false", können wir zu 100 % sicher sein, dass der User nicht verbunden ist.

Die Implementierung ist ähnlich wie im vorherigen Fall:

window.addEventListener('offline', function(e) {  
    console.log('You are probably offline :(');  
});  
window.addEventListener('online', function(e) {  
    console.log('Welcome back online!');  
});

Aufmerksame Leser wissen wahrscheinlich, dass es mehrere Möglichkeiten gibt, dieses Problem zu lösen, z. B. mit einem AJAX-Call an unserem Endpunkt oder mit einem hoch verfügbaren Service. Aber gibt es eine 100 % zuverlässige und saubere Lösung?

Ja, aber eigentlich nein. Navigator.connection ist ein globales Attribut, das das Objekt NetworkInformation zurückgibt, das detaillierte Informationen über die Verbindung enthält (Bandbreite, RTT, Art der Verbindung). Das Problem ist, dass es sich um eine experimentelle API handelt, die nur teilweise unterstützt wird (mehr für diejenigen, die sich für den offiziellen Entwurf interessieren).

Vibrations-API

Die Tatsache, dass Menschen durch negatives Feedback schneller lernen als durch positives, ist ziemlich offensichtlich. Die Vibration API hilft, dies in der Welt der Webanwendungen zu nutzen. Wenn ein Formular falsch ausgefüllt wird, können wir dem roten Formular ein weiteres Element hinzufügen: Vibration. Wir verbessern sowohl die UX als auch die Benutzerfreundlichkeit der App, was ein Thema für sich ist.

const pattern = [  
    100, // vibrate for 100ms  
    50, // then wait 50ms  
    200, // then vibrate for 200ms  
];  
  
window.navigator.vibrate(pattern); // run

Falls du ein Fan von Vibration bist, dann spiel doch mal ein paar Jingles ab, die mit der Vibration API erstellt wurden: HTML5 Vibration API – Stretches Of Songs. Du kannst die unmittelbare Anwendung von Vibration API in unserem Open-Source-Projekt WTFisAckee ausprobieren. Auch wenn es sich meiner Meinung nach um eine großartige API handelt, funktioniert sie leider nur auf Android-Geräten.

Credential Management API

Es ist lästig, immer wieder den User-Namen und das Passwort einzugeben. Dank der Credential Management API musst du dich damit nicht mehr herumschlagen. Die CM-API sorgt für eine automatische Anmeldung, oder sie lässt ein Pop-up-Fenster mit der Account-Auswahl erscheinen, in dem du den Account auswählen kannst, mit dem du dich anmelden willst. Du musst dem Browser nur die Erlaubnis erteilen, die Anmeldedaten bei der Registrierung zu speichern. Ein Vorteil dieser API ist, dass der Browser nicht "raten" muss, welches der Felder (Login, Passwort) das richtige ist.

Die Credential Management API kann sowohl für die OAuth-Authentifizierung (Google, Facebook...), als auch für die klassische Authentifizierung mit User-Name und Passwort verwendet werden. Im Moment ist Credential Management API eine experimentelle Technologie und kann in den Browsern Microsoft Edge, Opera und Google Chrome verwendet werden.

Bluetooth-API

Bluetooth Low Energy (BLE) gibt es schon seit langem und jeder kennt es. Der BLE-Chip ist klein und billig und verbraucht wenig Energie. Das ist einer der Gründe, warum er fast in jedem Gerät zu finden ist.

Bluetooth API ist eine Low-Level-API, die die Kommunikation mit Geräten in der Nähe mit aktivem Bluetooth Low Level Energy-Profil ermöglichen kann. Sie nutzt dieselbe Frequenz für die Datenübertragung, verwendet aber andere Übertragungskanäle und hat einen geringeren Energieverbrauch und eine niedrigere Übertragungsgeschwindigkeit. Es gibt noch mehr Unterschiede. Interessierte Leser finden sie auf Wikipedia :)

Eine Sammlung von Beispielen, wie und wofür die Bluetooth-API verwendet werden kann, findest du unter Web Bluetooth Samples.

Umgebungslicht-API

Mobile Geräte und Apps (sowohl Web als auch native) werden oft unterwegs und auf Reisen genutzt. Dabei kann es leicht vorkommen, dass unter bestimmten Lichtverhältnissen die Benutzeroberfläche nicht gut sichtbar ist oder überbeleuchtet wird. Unter Programmierern ist das typische Beispiel die Google-Startseite um ein Uhr nachts (Entschuldigung an alle, die nicht Google nutzen oder um diese Zeit schlafen). Mit der Ambient Light API und ein paar Zeilen Code können wir die Lichtverhältnisse rund um das Gerät des Users ermitteln. Die verwendete Einheit ist Lux.

window.addEventListener('devicelight', function(event) {
// 10 ~ 50 lux : Dim Environment
// 100 ~ 1000 lux : Normal
// > 10000 lux : Bright
if (event.value < 50) {
console.log('Switching to light mode...');
} else {
console.log('Switching to dark mode...');
}
});

Hierbei handelt es sich um eine experimentelle Technologie, die nur von Mozilla Firefox und Microsoft Edge unterstützt wird.

Gamepad-API

Vielleicht hat dich der Name erschreckt, aber genau das ist es. Wenn du Web-Games entwickelst (nicht erschrecken – hier gibt es viele verschiedene APIs für die Game-Entwicklung), kann Gamepad API volle Unterstützung für verschiedene Game-Controls bringen, die du z.B. für die Steuerung deines Charakters verwenden kannst. Eine detaillierte Beschreibung und Implementierung findest du hier.

Und die gute Nachricht ist, dass es überall unterstützt wird, mit Ausnahme des Internet Explorers (und das wundert ja niemanden :P).

Fazit

In diesem Artikel haben wir einen Blick zurück in die Geschichte von HTML geworfen und uns an all das erinnert, was HTML5 mit sich bringt. Es ist mir ein Bedürfnis, darauf hinzuweisen, dass HTML5, auch wenn es auf den ersten Blick nicht den Anschein hat, eine Revolution im Bereich der Websites darstellt. Es würde einen weiteren (längeren) Blick erfordern, um es im Detail zu betrachten. Auch wenn die Unterstützung der oben genannten APIs nicht 100 %ig ist und sie manchmal nur experimentell sind, können wir sie dennoch verwenden, da es sich meist um ergänzende Features handelt und die Funktionalität unserer App wahrscheinlich nicht von ihnen abhängt.

Nutzt du eine der oben genannten APIs in einem deiner Projekte? Dann verrate uns, welche dein Favorit ist!