Was sind HTML 5 und CSS 3?

Die Spezifikation HTML 5 beschreibt die 5. Überarbeitung der „Hypertext-Markup-Language“, die als Hauptsprache zur Erstellung von Webseiten dient. Mit dieser Version kommen viele neue Tags, Techniken und Möglichkeiten hinzu. Zusätzlich ermöglicht uns CSS-3 viele neue Methoden, um die Gestaltung der Website modern und performance-orientiert vorzunehmen. Alles in allem soll folgendes ermöglicht werden:

• Besseres Multimedia
• Bessere Anwendungen
• Mehr Aussagekraft des Markups
• Kommunikation mit anderen Dokumenten
• Web Sockets
• Besseres Browsercaching
• Bessere Benutzeroberflächen
• Verbesserte Barrierefreiheit
• Fortschrittliche Selektoren
• Neue visuelle Effekte
• Etc…

Hört sich nett an oder? Am liebsten möchte man sich sofort an das Lernen machen und die Neuerungen ausprobieren. Doch bevor man loslegt, sollte man wissen wie es zurzeit um diese Standards steht.

Das alte Spiel mit der Browserkompatibilität

Wer mit den älteren Standards von (X)HTML und CSS-2 gearbeitet hat, weiß aus Erfahrung, dass diese Sprachen vom Browser interpretiert werden. Dies ist insofern problematisch, als dass die Hersteller der Browser den HTML/CSS-Code unterschiedlich verarbeiten (parsen). Dies hat zur Folge, dass die verschiedenen Browser identische Inhalte verschieden anzeigen können. Im schlimmsten Fall, kann der Browser ein CSS-Attribut nicht verstehen und deshalb auch nicht anwenden.

Einer der Spitzenreiter der Browser, die Inhalte anders oder gar nicht darstellen ist da, bekannter Weise, der Internet Explorer der Version 6. Wer kennt nicht das Problem, ein schönes PNG-Bild mit Alphatransparenz in einem Div-Container als Hintergrund zu verwenden, um ein ansehnliches Design zu erschaffen. Zeigte man die Seite dann mit dem Internet-Explorer der 6. Generation an, war das Bild mit einem blauen Hintergrundeffekt versehen, wo eigentlich gar nichts (also die Transparenz) sein sollte.

Diesen Effekt konnte man nur umgehen, indem man so genannte „Hacks“ in das Style-sheet integrierte. Die Hacks waren lediglich für einen bestimmten Browsertypen lesbar und konnten somit spezielle Anweisungen für diesen geben.

Die Browserkompatibilität von HTML 5 und CSS 3

Gerade in der derzeitigen Übergangsphase von HTML 4.1 bzw. XHTML 1 und CSS 2.x auf den neuen Webstandard wird die oben beschriebene Problematik nicht ausbleiben. Im Gegenteil, wenn man kompatibel auch zu den nicht HTML-5-Fähigen Browsern entwickeln möchte, muss viel Arbeit in Recherche und Skalierbarkeit der Styles gesteckt werden. Hinzu kommt, dass die Standards derzeit noch entwickelt werden. So liest man ständig Meldungen, dass bestimmte Techniken neu aufgenommen, überarbeitet oder wieder entfernt wurden.

Macht es also Sinn schon jetzt auf den neuen Standard zu setzen? Ich bin der Meinung, dass es nicht schaden kann! Zwar ist der Aufwand recht hoch, aber eines steht fest, nämlich dass dieser Standard sich auf lange Sicht durchsetzen wird. Wir werden noch dieses Jahr die neuen Standards als Bestandteil in unsere Arbeit einfließen lassen.

Dazu werden wir anfangs eine begrenzte Palette an Attributen aus CSS-3 verwenden, die wir uns gründlich erarbeiten werden. Hier setzen wir auf die Skalierbarkeit der Technik. Wir werden abwärtskompatibel bis zum Internet Explorer 6.0 arbeiten. Dieser wird die grafischen Inhalte jedoch nur in reduzierter Form zur Verarbeitung bekommen.

Wie wir dabei vorgehen werden, werde ich in diversen Blog-Artikeln in der näheren Zukunft hier veröffentlichen. Wen es also interessiert, der sollte gelegentlich vorbei schauen!

Welche Browser unterstützen denn nun HTML 5 und CSS 3?

Nun diese Frage ist Pauschal nicht so einfach zu beantworten. Bisher sind einsetzbare Attribute, Tags und Techniken stark abhängig vom Browserhersteller, sowie der jeweiligen Versionen.

Grob pauschalisiert könnte man folgende Liste von gängigen Browsern als HTML 5 / CSS 3 kompatibel definieren:

• Webkit-Browser: Google Chrome ab Version 10 und Apple Safari ab Version 5
• Mozilla Firefox ab Version 4 (bedingt auch ab Version 3.6)
• Internet Explorer ab Version 10 (bedingt auch ab Version 9)
• Opera ab Version 11.1 (bedingt auch ab Version 10.1 und 10.5)

Um genauere Details zu den jeweiligen CSS-3-Attributen und HTML-5-Techniken und Tags zu erhalten möchte ich euch folgenden Artikel ans Herz legen: HTML5 & CSS3 Support

Welche Browser werden derzeit auf dem Markt verwendet?

Wie man bei der obigen Liste feststellen kann, sind fast ausschließlich moderne Browser vertreten, die die neuen Webstandards unterstützen. Man sollte sich also gründlich überlegen, welche Browsertypen und Versionen man abwärtskompatibel unterstützen möchte. Dabei bedeutet jede einzelne Version einen Mehraufwand.

Um eine Entscheidung treffen zu können, benötigt man also Statistik-Material. Für den Monat Juni 2011 habe ich euch eine kleine Statistik zur weltweiten Browsernutzung erstellt. Ich habe dabei die Daten von Netsharemarket.com verwendet:

Statistik: Weltweite Browser-Nutzung (Stand: Juni 2011)

Wie man erschreckender Weise feststellen kann liegt der Internet Explorer mit Version 8.0 sehr weit vorne. Aber auch die älteren Versionen des Microsoft-Schand-Werks sind mit ordentlichen Anteilen vertreten.

Letztendlich obliegt es der eigenen Entscheidung, ob man diese Browser unterstützen möchte und wenn ja, mit welchem Aufwand man die Kompatibilität herstellt. Im Sinne der Barrierefreiheit sollte man jedoch berücksichtigen, dass auch diese Menschen das Web durchsurfen möchten, ohne sich mit Browsern und Ihren Versionen auseinandersetzen zu müssen.

Ich hoffe, dass euch dieser Artikel ein wenig weiter gebracht hat, was die Entscheidungsfindung zur Nutzung der neuen Webstandards angeht. Solltet Ihr Fragen, Anregungen oder Kritik zu diesen Thema haben, freue ich mich über eure Kommentare.

Weiterführende Links und Quellen

• Cascading Style Sheets (Wikipedia.org)
• HTML 5 (W3C)
• Buch: HTML5 & CSS3 (Autor: Brian P. Hogan, O’Reilly Verlag – Übersetzt von Stefan Fröhlich)