HTML5 und CSS3, jetzt schon?

Der Lebenszyklus der aktuellen Browser wird immer kürzer, die Anforderungen an die Darstellung immer größer. Die Vielzahl an Kombinationsmöglichkeiten aus Betriebssystem, Browser, Browserversion, Plug-Ins, Add-Ons und Endgerät stellt Web-Designer und -Programmierer vor die Aufgabe, den besten Mittelweg für alle zu finden oder im Vorhinein eine oder mehrere Zielgruppen und -systeme zu spezifizieren, um dann für diese zu optimieren.

Gerade beim Einsatz von neuen Standards (im Moment HTML5 und CSS3) muss darauf geachtet werden, dass auch die Anzeige in Browsern, die das eine oder andere Feature noch nicht entsprechend interpretieren können, stimmig bleibt. Ein Tool, dass diese Arbeit erleichtert, ist Modernizr. Modernizr ist eine Open Source JavaScript-Library, die feststellt, welche HTML5- bzw. CSS3-Elemente bereits vom anzeigenden Browser unterstützt werden, um dann den entsprechenden Code bzw. Fallback-Lösungen auszuliefern. Dieser Ansatz arbeitet deutlich spezifischer als frühere Browserweichen, die allein auf den verwendeten Browser abzielten.

Modernizr testet den Browser in Millisekunden auf über 40 Eigenschaften und legt das Ergebnis in einem JavaScript-Objekt als Boole´sche Variablen ab. Es fügt dem <html>-Element die Klassen hinzu, aus denen klar wird, welche Eigenschaften von Haus aus unterstützt bzw. eben nicht unterstützt werden. Für die einzelnen Eigenschaften, die nicht unterstützt werden, können Fallback-Lösungen nachgeladen werden.

Der große Vorteil dieser automatischen Erkennung besteht darin, dass Projekte bereits mit den neuen HTML5- und CSS3-Eigenschaften umgesetzt werden können. Das an die Browser ausgelieferte Ergebnis ist aber auch kompatibel mit älteren Browsern. Mit steigendem Verbreitungsgrad der neuen Browsergenerationen werden die Eingriffe, die Modernizr machen muss, immer weniger – so zumindest die Theorie.

Bis HTML6 und CSS4 kommen – dann fängt das Spiel wieder von vorne an!

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.