PHP Test - HTML 5 Tests

Stopp Achtung
Achtung, diese Seite wurde für HTML 5 geschrieben. Scheinbar verwenden Sie einen alten Browser, der das nicht unterstützt. Es kann sein, dass nicht alle Seiten korrekt angezeigt werden. Sie sollten unbedingt eine aktuelle Version Ihres Browsers installieren.
schließen [X]
erweitern Einführung und Test mittels JavaScript

Man kann die Browser nicht direkt nach der Unterstützung von HTML5 abfragen, es gibt nur den Workarround, gewisse Funktionen abzuprüfen und aus dem Ergebnis zu schließen, dass eine hinreichende Unterstützung vorliegt. Die nebenstehende Tabelle zeigt, welche der beim Start der Seite durchgeführen Tests dieser Browser bestanden hat.

Man kann die Browser nicht direkt nach der Unterstützung von HTML5 abfragen, es gibt nur den Workarround, gewisse Funktionen abzuprüfen und aus dem Ergebnis zu schließen, dass eine hinreichende Unterstützung vorliegt. Die nebenstehende Tabelle zeigt, welche der beim Start der Seite durchgeführen Tests dieser Browser bestanden hat.

Sie können die Details zu weiteren Tests sehen, wenn Sie die Icons maximieren neben den Überschriften unten anklicken. Zu jedem der aufgeführten Themen haben wir ein paar einfache Beispiele bereitgestellt. Wird ein Beispiel aktiviert, dann werden zur besseren Sichtbarkeit alle darunter liegenenden Beispiele ausgeblendet, bis das aktivierte Theme wieder geschlossen wird.

Auf der Seite caniuse.com findet man sehr ausführliche Informationen über die Möglichkeiten von HTML 5 und die Unterstützung durch die verschiedenen Browser. Leider liegt in vielen Fällen (stand Herbst 2015) selbst der neu entwickelte Microsoft Browser Edge von Windows 10 ziemlich weit hinten. Besonders schlecht schneiden auch die folgenden Browser ab:

  • Internet Explorer 8 und älter
  • Standardbrowser für Android 4.2 und davor
  • Opera Mini
erweitern Formularfelder für die Eingabe von Daten

Es gibt nun Eingabefelder für verschiedene Datentypen wie URL, Email oder Datum. Dabei prüft schon der Browser mehr oder weniger gut beim Absenden des Formulars, ob alle Pflichtfelder (required) gefüllt sind und die Eingabe der geforderten Syntax entspricht. Die neue Datenliste macht Vorschläge, man kann aber auch eigene Daten eingeben. Die Eingabe zur Suche erlaubt das leichte Löschen der Eingabe. Zumindest beim Chrome bietet das Feld zur Farbauswahl einen komfortablen Farbpicker. Fast alle modernen Browser bieten beim Datum einen Kalender an. Mit dem Attribut placeholder kann man im Eingabefeld Hinweise einblenden. Auf jeden Fall hinkt Microsoft im Moment (Herbst 2015) selbst mit dem neuen Browser Edge von Windows 10 den anderen in der Entwicklung hinterher, Farbauswahl und Maßstab bieten nur einfache Textein-/ausgabe.

Input Text
<input type="text">
Input Liste Vorschläge
<input list="listname">
Input Mail
<input type="email">
Input Url
<input type="url">
Input Telefon
<input type="tel">
Input Datum
<input type="date">
Input Nummer
<input type="number">
Input Schieberegler
<input type="range">
Input Color
<input type="color">
Input Suche
<input type="search">
Fortschrittsanzeige
<progress max="100">
70 % erreicht
Maßstab
<meter max="250">
Blutdruck 180
erweitern Canvas Image Container

HTML5 unterstützt mit dem neuen Canvas Block-Element das einfache Erstellen von Vektorgrafiken mit Basisobjekten wie Linien, Rechtecken, Kreisen oder Texten. Diese können natürlich dynamisch verändert werden und über den Bildschirm wandern, sich drehen oder farblich verändern. So weit geht diese Demo aber nicht. Eine sehr wichtige Diskussion bei Stackoverflow zu den Attributen von width, height und CSS sollte man nicht verpassen. Hier im Code zeige ich, wie man die Probleme löst, auch wenn man den Canvas-Style extern definiert.

erweitern Neue Strukturelemente wie <header>, <section> oder <footer>

Neue Strukturelemente für ein Dokument erlauben, bestimmten Bereichen eine neue und präzisere semantische Bedeutung zuzuordnen. Ich habe mal ein Dokument vorbereitet und zeige es unten im <iframe> an. Das Dokument kann man auch im Browserfenster anzeigen, wenn man diesem Direktaufruf folgt.

erweitern SVG Grafiken
Wie beim Canvas werden bei der SVG Grafik dynamisch Verktorelemente angezeigt und können animiert werden. Im Unterschied zum Canvas handelt es sich aber nach wie vor um ein SVG Objekt, dass nur angezeigt wird. Beim Canvas hingegen wird eine Grafik erzeugt, die man auch herunterladen kann. SVG beinhaltet Animationen, was man bei Canvas auch mit JavaScript erreichen kann. Allerdings wird dann das Objekt neu gezeichnet, was visuell identisch wirkt. Weitere Unterschiede findet man beispielsweise bei Medievent.