Die Entwicklung im Internet geht bekanntermaßen seit Jahren rasant voran. Drei wichtige neue Techniken stehen auch in diesem Jahr an: der neue HTML Standard 5, CSS 3 sowie webGL. In wie weit die drei genanten Standards schon in diesem Jahr Einzug halten hängt allerdings maßgeblich von den Browser Herstellern ab.

Punkt1: HTML5

Die neue HTML-Version bringt eine ganze Palette an Neuerungen mit, die wir nun nachfolgend vorstellen möchten.
» Zur Demo

Media - Video und Audio

Der kommende Todesstoß für Flash Videoplayer ist das Video-Tag, YouTube z. B. bietet schon seit einiger Zeit zu experimentellen Zwecken auch den HTML5-Video Player an (http://www.youtube.com/html5).

Da ein System- sowie Browserübergreifender Video-Codec wohl leider zu viel des Guten gewesen wäre, haben sich die Hersteller hier leider nicht geeinigt, Microsoft bisher wohl nur auf H.264, Mozilla für Vorbis und Ogg Theora, Google unterstützt kurzerhand alle zur Verfügung stehenden Codedcs außer H.264, beabsichtigt aber in Zukunft nur noch auf freie Codecs also Ogg Theora und WebM zu setzen.

Nachtrag: Kurios aber wahr, Microsoft spendiert Firefox ein Modul welches den H.264 Support sicherstellt. Allerdings nur unter Windows 7 und unter Einsatz des Windows Media Players, der dann den Firefox HTML5 Player ersetzt.

Nachtrag 2: Google plant für den Internet Explorer 9, sowie für Apples Safari ebenfalls Plugins zur Verfügung zu stellen, die den WebM Codec in diesen Browsern verfügbar machen sollen.

Diese Codecs werden einigen von Ihnen nichts sagen, Formate wie .AVI oder .MPEG sind sicher geläufiger, dies sind allerdings nur sogenannte Containerdateien, die Codec-Files beinhalten.

Das schöne ist, das SRC Attribut kann mehrfach vergeben werden, der Browser wählt dann selbstständig das passende Video aus. Was allerdings nicht den Ärger schmälert das man Videos in zwei Formaten vorliegen haben muss.

Canvas

Als Alternative zu SVG sind Cavas als im Browser gerenderte Grafiken wunderbar geeignet, da die Grafik per JavaScript erstellt wird lässt sie sich genauso auch live manipulieren, bietet also großes Potential für Animationen. Canvas können alle bekannten geometrischen Grundformen darstellen, welche sich dann wiederrum noch verformen oder auch kombinieren lassen. Der größte Unterschied zu SVG liegt schlicht darin das Canvas gerenderte Bitmap Grafiken sind und SVG wie der Name „Scalable Vector Grafic“ schon sagt, Vektor Grafiken.

Section, Article und Co.

Im Grunde alles erstmal nichts anderes als ein Div-Container mit dem einfachen Unterschied das diese Elemente semantisch sinnvoller sind. Also eher zu Ordnung gedacht, außerdem spart man sich Klassen und ID's, kann das Element nun einfach direkt ansprechen.

Formulare

Für Input gibt es etliche neue Attribute, z. B.: date, number und color. Diese stellen spezielle Eingabefelder für Datum, Ziffen und einen Farbwähler zur Verfügung. Es gibt viele weitere Neuerungen im Formular-Bereich, folgen Sie bitte dem untenstehenden Link.

Eine weitere neue Regel in HMTL5 ist das verlinken von Blockelementen, es ist jetzt also erlaubt ein <a> um beispielsweise ein <div> zu ziehen.

Als größtes Problem stellen sich die Browser aus Redmond dar, wo andere Browser bei unbekannten Elementen ein, man könnte sagen „div-verhalten“ zeigen, macht der IE6-8 kurz und knapp Murks. Um hier ein vernünftiges Verhalten zu erzwingen gibt es das http://remysharp.com/2009/01/07/html5-enabling-script/ .

Eine umfangreiche Übersicht aller Neuerungen finden Sie hier: Zur Demo

Punkt2: CSS3

Bringt uns vor allem einen riesen Schritt weiter weg von der Abhängigkeit von Adobes Flash, welches, so unumstritten die Vorteile sein mögen, nur eine Browsererweiterung darstellt, die zusätzlich installiert werden muss … aber ich möchte hier nun nicht verbal auf Flash einschlagen, es wird (vielleicht) auch zukünftig seine Daseinsberechtigung behalten.

Was gibt es nun also neues bei CSS, an einige Befehle wie der Transparenz „Opacity“ hat man sich inzwischen schon satt gesehen, weil größtenteils seit langem in fast allen Browsern implementiert, an allen Ecken wird reger Gebrauch davon gemacht. Und doch: ein CSS3 – Befehl. Andere sind noch nicht verbreitet und auch noch nicht ausreichend implementiert um sie ohne zusätzliche Hacks oder Fallbacks einsetzen zu können, wie beispielsweise „Rotate“. Wobei dies mit Sicherheit einen der interessanteren neuen Befehle darstellt. Aber genug der Ausführungen, gehen wir nun die Neuheiten Punkt für Punkt durch und geben gleichermaßen für jeden Punkt gleich ein Beispiel:

Hier gehts weiter: Zur Demo

Punkt3: WEBGL

Spielt aktuell noch keine Rolle, steckt aber voller Potential und auch hier werden wir dieses Jahr sicher einiges zu sehen bekommen. WEBGL verrichtet seine Arbeit im canvas HTML5-Element und stellt eine 3D Schnittstelle dar, was im WEB abgesehen von einigen Flash Ansätzen eigentlich gänzliches Neuland ist. Die Vorteile liegen auf der Hand, für normale Websites uninteressant, für Spiele grandios.

So viel zur Zukunft, wie sieht es aktuell aus?

Interessant ist das die Browserhersteller sich nicht mehr, wie in der Vergangenheit dadurch profilieren wollen dass sie selbst Eigenschaften zusammenschustern, sondern dadurch den HTML5 Standard möglichst gut wiederzugeben (außerdem um eine performante JavaScript Engine, aber das ist eine andere Geschichte).

So sind viele Befehle und Tags bereits mehr oder weniger gut implementiert, im CSS – Bereich muss allerdings oft mit besonderen Maskierungen gearbeitet werden, wie beispielsweise „–moz“ oder“ –webkit“ (am Beispiel von „Opacity“: opacity: 0.1; wird zu: -moz-opacity:0.1;). Dies funktioniert natürlich, hat allerdings den Nachteil das man alle Projekte die in dieser Form umgesetzt werden der Ordnung zu liebe nach vollständiger Implementierung der neuen Eigenschaften in die Browser, nochmals überarbeiten müssten, außerdem sind diese Befehle natürlich nicht valide. Hoch in den Himmel muss ich momentan Googles Chrome erheben, Animationen und Effekte laufen dermaßen flüssig und sauber, das schon keine Wünsche mehr offen bleiben. Des Weiteren sind die neuen Spielereien schon sehr gut umgesetzt.

Um mal das für mich aktuell krasse Gegenteil zu nennen: Fixfox < v. 4. Schrift wird bei rotate fürchterlich hässlich, bei :hover Effekten treten teilweise eigenartige Zuckungen an unbeteiligten Stellen auf, der wunderbare Befehl transition ist noch nicht implementiert (um nur einen zu nennen) und generell kommt einem alles doch sehr, sehr träge vor wenn man an Chrome gewöhnt ist (ich schreibe diese Zeilen als jahrelanger Firefox Fanatiker, das sei dazu gesagt).

Abschließend ist auch wichtig zu wissen, die CSS3 sowie HTML5 Spezifikationen sind vom W3C noch nicht verabschiedet, es kann sich also durchaus noch etwas ändern, wobei es wohl eher unwahrscheinlich ist das sich an den Befehlen selber noch etwas ändert, wenn dann viel mehr an der Interpretation.

Schlusswort: Wir werden diesen Artikel immer möglichst aktuell halten um ihn an die aktuellen Gegebenheiten anzupassen.