1176976

Drei Vorteile für aktuelle Browser mit HTML 5

05.08.2011 | 14:12 Uhr |

HTML 5 soll in der nächsten Zukunft fertig sein - das erzählt man sich jedenfalls. Jene die dies verbreiten, verzichten meist darauf, "fertig" näher zu definieren. Fakt ist nämlich: Viele Aspekte von HTML5 kann man heute schon verwenden.

Web-Standard HTML5
Vergrößern Web-Standard HTML5

Obwohl HTML5 vor allem darauf ausgerichtet ist, neue komplizierte Javascript-APIs für dynamische Webanwendungen bereitzustellen, kann auch Otto Normalwebentwickler einiges an nützlichen neuen Funktionen gebrauchen. Drei schöne HTML5 -Aspekte ohne Tricks, Hacks, und Internet-Explorer-Sonderbehandlungen sind im Folgenden vorgestellt.

Vereinheitlichungen nutzen, Tipp-Arbeit einsparen

Selbst wenn man von allen neuen HTML5-Features gar nichts wissen will, kann man sich trotzdem so machen Tastendruck und so manches Denkmanöver einsparen, denn HTML5 macht einiges einheitlicher und vieles kürzer. Das Paradebeispiel ist der sicher vielen schon bekannte Doctype:

<!DOCTYPE html>

Da HTML5 in erster Linie eine Erweiterung von bekannten (X)HTML-Standards ist, kann man bei 99% aller Webseiten einfach den Doctype austauschen und hat auf einen Schlag eine gültige HTML5-Seite. Im Gegensatz zu seinem Vorgänger kann man sich diesen Doctype bequem merken. Kein Browser, nicht einmal der rückständigste Internet Explorer, wird damit Probleme haben, ebenso wenig der Google-Crawler oder andere Besucher der Seite.

Ebenfalls angenehm ist, dass das Type-Attribut der Script- und Style-Elemente in HTML5 die Standardwerte text/javascript und text/css hat. Das bedeutet, dass man diese Attribute nicht zu notieren braucht, wenn man Javascript oder CSS einbetten möchte. Auch hier gilt: Die Attribute sind für alle Browser gültig.

<script> alert('Ich brauche kein type-Attribut!'); </script>

<style> body:before{ content:'Ich auch nicht'; } </style>

Außerdem ist HTML5 eine Variante von HTML und keine Methasprache XHTML. Das heißt, man kann im Vergleich zu XHTML 1 auf schließende Schrägstriche bei leeren HTML-Elementen verzichten und braucht auch boolsche Operatoren wie AND, NOT, OR nicht mehr vollständig ausschreiben:

<input type="text" disabled="disabled" /><!-- XHTML-Style -->

<input type="text" disabled><!-- HTML(5)-Style -->

Wichtig ist: Solche Formatierungen sind optional. HTML5 ist recht anspruchslos bezüglich der Code-Syntax - Valides XHTML 1 ist auch syntaktisch gültiges HTML5.

Neue Formular-Elemente verwenden

HTML5 führt eine Reihe neuer Elemente für Formularfelder ein, wobei unter anderem Schieberegler und Datum-Eingabefelder (so genannte Datumspicker) enthalten sind. Diese funktionieren natürlich nur dann ordnungsgemäß, wenn sie vom Browser unterstützt werden (Opera ist hier Vorreiter), doch bei Nicht-Unterstützung machen die anderen Browser etwas sehr sinnvolles: Sie verwandeln das Feld in ein ganz normales Textfeld. So würde das folgende Datums-Input…

<input id="datumsfeld" type="date">

… durch Opera erwartungsgemäß mit einem Datumspicker ausgegeben…

Das Ergebnis in Opera
Vergrößern Das Ergebnis in Opera

… im IE6 aber in ein normales Text-Input verwandelt:

Und das Ergebnis in Internet Explorer 6
Vergrößern Und das Ergebnis in Internet Explorer 6

Das ist vielleicht für den IE6-Benutzer nicht optimal, hält ihn aber in keiner Weise vom Ausfüllen des Feldes ab. Um Fehler zu vermeiden, gibt man noch das erforderliche Datumsformat an, beispielweise JJJJ-MM-DD. Somit bleiben keine Surfer ausgesperrt, wobei die Nutzer von aktuellen Browsern ein deutlich komfortableres Formular zur Verfügung haben.

Tipp für JavaScript-Anhänger: Wer in jedem Fall einen Datum-Eingabefeld braucht, kann es für IE6 und Konsorten auch bereitstellen. Da die Browser für sie unbekannte Eingabefelder komplett in Textfelder umwandeln, ist es kein Problem, solche Fälle zu erkennen und mit jQuery -Plugins oder andern Datumspicker-Scripts zu behandeln:

var feld = document.getElementById('datumsfeld');

if(feld.type != 'date'){

// Hier jQuery u.Ä. für einen herkömmlichen JS-Datumspicker verwenden

}

Letztendlich bringt der Einsatz von HTML5-Formularen für alle Surfer Vorteile, die Nutzer von aktuellen Browsern aber genießen bereits mehr Benutzerfreundlichkeit.

data-*-Attribute nutzen

Mit data-*-Attributen kann man unsichtbare Daten in ein HTML-Element schreiben. Das Sternchen steht dabei für eine beliebige Zeichenkette, was bedeutet, man kann eigene HTML-Attribute einführen. Im Einsatz könnte das Ganze beispielsweise so aussehen:

<ul id="metal">

<li data-artist="Judas Priest" data-album="Painkiller">Painkiller</li>

<li data-artist="Metallica" data-album="Ride the Lightning">For Whom the Bell Tolls</li>

<li data-artist="Iron Maiden" data-album="The Number of The Beast">Run to the Hills</li>

</ul>

data-*-Attribute verwendet man zur Ausgabe der Informationen im Browser per JavaScript. Die benötigten Informationen baut man am besten noch während der Erzeugung der Seite durch ein PHP-Script ein. HTML5 sieht für die richtige Ausgabe eine eigene JS-Schnittstelle vor. Diese ist zwar noch in keinem Browser implementiert, doch muss kein Hindernis sein: die data-*-Attribute sind schließlich ganz normale HTML-Attribute und können entsprechend auch ohne spezialisierte API ausgelesen werden:

var titel = document.getElementsByTagName('li');

for(var i = 0; i < titel.length; i++)

{

alert(titel[i].innerHTML + 'von' + titel[i].getAttributeNode('data-artist').value + ' stammt vom Album ' + titel[i].getAttributeNode('data-album').value);

}

Übrigens: innerHTML wird mit HTML5 auch Bestandteil des Webstandards-Kanon und keine Nichtstandard-Funktion mehr.

Fazit

HTML5 wurde speziell für interaktive Webapplikationen entworfen und weniger für normale Webseiten wie den Internetauftritt der mittelständischen Beispielmüller GmbH. Die neue Hypertext-Auszeichnungssprache bringt aber Vorteile für Benutzer sowie Entwickler: Die ersten erleben mehr Komfort beim Surfen im Web, für die Webentwickler ersparen sich viele der unnötigen Handgriffe.

0 Kommentare zu diesem Artikel
1176976