CSS3 und HTML 5 schon jetzt

Modernizr per CSS nutzen

14.1.2011 von Dr. Florence Maurice

ca. 5:20 Min

Ratgeber

Genau ein Fall für Modernizr: Browser wie Safari und Co., die CSS Reflections unterstützen, erhalten ihren Code - Reflection samt Abstand nach unten, andere Browser erhalten den normalen Abstand.

.reflection { margin-bottom: 0px; /* Kein Extraabstand wird benötigt */ } .cssgradients.cssreflections .reflection { margin-bottom: 80px; -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); }

Da für das Reflection-Beispiel zusätzlich ein Farbverlauf (CSS Gradient) verwendet wird, wird auf das Vorhandensein beider Klassen geprüft.Für die Spiegelung wird -webkit-box-reflect verwendet. Dahinter geben Sie an, wo die Spiegelung platziert werden soll und wie groß der Abstand zum Original sein soll. Elegant ist eine Spiegelung, die langsam ausläuft, deswegen wird hier noch ein CSS3-Farbverlauf verwendet.

Modernizr-Objekt und Javascript

Neu eingeführt in HTML 5 ist das canvas-Element, das eine rechteckige Zeichenfläche für dynamisch erzeugte Bitmapgrafiken bietet. Außerdem erlaubt es Transformationen und Animationen. Gezeichnet wird dabei mit Javascript. Hier hilft Modernizr, um zu überprüfen, ob der aktuelle Browser canvas unterstützt, und um ansonsten eine geeignete Fallback-Lösung anzubieten. Sehen wir uns ein Beispiel an.Im HTML-Code steht ein div-Element mit dem Bild, das angezeigt werden soll, falls canvas nicht unterstützt wird:

<div id="zeichnungscontainer"><img src="zeichnung.png" alt= "Beschreibung " /></div>

Über CSS blenden Sie dieses Bild aus, wenn canvas unterstützt wird, denn dann gibt es ja im html-Starttag die canvas-Klasse:

.canvas #zeichnungscontainer img { display: none; }

Jetzt können Sie über Javascript das von Modernizr erstellte Javascript-Objekt Modernizr verwenden, um zu überprüfen, ob canvas unterstützt wird. Ist das der Fall, gibt Modernizr.canvas den Wert true zurück, ansonsten false.Praktisch sieht das dann folgendermaßen aus:

window.onload = function() { if (Modernizr.canvas) { var c = document.createElement ('canvas'); var context = c.getContext('2d'); context.fillStyle = "red"; context.fillRect(10, 10, 50, 50); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect(30, 30, 50, 50); document.getElementById ('zeichnungscontainer'). appendChild(c); } }

Wenn die Überprüfung positiv ist, erstellen Sie das canvas-Element und können loszeichnen. Im Beispiel sind es zwei Rechtecke. Anschließend wird das canvas-Element dem Zeichnungscontainer hinzugefügt.Das Beispiel zeigt deutlich, dass es prinzipiell besser ist, positiv zu überprüfen. Theoretisch könnte man auch automatisch die Defaultlösung ausblenden lassen, und nur, wenn canvas nicht unterstützt wird, dieses Bild einblenden lassen:

.nocanvas #zeichnungscontainer img { display: block: }

Diese Variante ist aber denkbar ungünstig: Falls Javascript deaktiviert ist, wird dem html-Element auch keine Klasse .nocanvas zugewiesen und die Regel greift nicht.Apropos Javascript-Unterstützung: Natürlich funktioniert die wunderbare Auslese der HTML-5-/CSS3-Features von Modernizr nur bei aktiviertem Javascript. Den Fall, dass Javascript deaktiviert ist, können Sie jedoch ebenfalls behandeln, indem Sie Ihrem html- Element die Klasse no-js zuweisen:

<html class="no-js">

Bei aktiviertem Javascript ersetzt Modernizr no-js durch die Klasse js.

Konditionale Kommentare

Modernizr ermöglicht die Definition von Fallbacklösungen ganz nach Bedarf und ist damit unschlagbar flexibel. Oft verwendet man für Fallback-Lösungen bei CSS3- Features, die derzeit noch nicht vom Internet Explorer unterstützt werden, konditionale Kommentare.Beispielsweise könnte man in konditionalen Kommentaren eine Fallbacklösung für runde Ecken im Internet Explorer angeben. Was aber ist dann mit dem Internet Explorer 9, der runde Ecken darstellen kann? Oder eine noch spätere Version des Internet Explorer, die noch mehr kann?Die wären dann ausgeschlossen. Hier ist die Modernizr-Lösung wesentlich flexibler und zukunftskompatibler: In dem Moment, in dem der Internet Explorer die CSS3- Eigenschaft unterstützt, bekommt er sie auch zu Gesicht und kann sie darstellen. Konditionale Kommentare sind im Endeffekt - so praktisch sie auch sein mögen - nichts anders als eine Form von gut gemachtem Browsersniffing.

Der verchromte Internet Explorer

Der Internet Explorer Links zum Thema gibt sich als Chrome aus - der UserAgent-String zeigt es.

Die dritte vorgestellte Lösung heißt Google Chrome Frame (GCF) und ist ein Plug-in für die Sorgenkinder der HTML-5-/CSS3- Entwickler: Internet Explorer 6 bis 8. Dieses Plug-in rüstet den Internet Explorer zu einem vollwertigen HTML 5-Browser auf. Er kann dann mit canvas umgehen, versteht das video-Element - kurz, er kann alles, was ein moderner Webkit-basierter Browser leistet. Google Chrome Frame ist sozusagen Googles Antwort auf die fehlende HTML-5-Kompetenz des Internet Explorer. Dieses Plug-in gibt es derzeit noch nicht als Betaversion, sondern als frühes Entwicklungspreview. Das Plug-in installiert sich mit ein paar Mausklicks. Allerdings ist der Chrome-Rendering-Modus nicht automatisch aktiviert, sondern muss zuerst ausgelöst werden.Die erste Möglichkeit ist über das folgende Meta-Tag im HTML-Dokument:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

Bei einem größeren Projekt ist es hingegen praktischer, den entsprechenden Header zu senden:

X-UA-Compatible: chrome=1

Dieser lässt sich beispielsweise folgendermaßen über PHP setzen:

<?php header('X-UA-Compatible: chrome=1'); ?>

Außerdem kann man das auch bequem über die folgende Apache-Serverkonfiguration erledigen:

<IfModule mod_setenvif.c><IfModule mod_headers.c> BrowserMatch chromeframe gcf Header append X-UACompatible "chrome=1" env=gcf </IfModule></IfModule>

Link Tipps

52Framework 52framework.com/ Für HTML 5 modifiziertes Reset-Stylesheet html5doctor.com/html-5-resetstylesheet/ Video for everybody: Einsatz des HTML 5-video-Elements mit Fallbacklösungen für den Internet Explorer camendesign.com/code/video_for_everybody Modernizr www.modernizr.com/ Download des Google Chrome-Frame Plug-ins für den Internet Explorer www.google.com/chromeframe Einführung in Google Chrome Frame für Entwickler www.chromium.org/developers/howtos/chrome-frame-getting-started Wichtige Neuerungen im Google Chrome Frame blog.chromium.org/2010_02_01_archive.html Kritik am Google Chrome Frame von Mozilla shaver.off.net/diary/2009/09/28/thoughts-on-chrome-frame/ blog.lizardwrangler.com/2009/09/28/browser-soup-andchrome-frame/ CSS Reflections in Safari und Co. webkit.org/blog/182/css-reflections/ Auflistung von nützlichen Skripten für den HTML 5-Support www.html5patch.org/patches

Der Surfer kann den Internet Explorer in den Google Chrome Frame-Modus versetzen, wenn er vor die Webadresse die Zeichenfolge gcf: schreibt, also beispielsweise gcf:http:// www.google.de/ eingibt. Dieses muss allerdings erst in der Registry aktiviert werden. Vor Februar 2010 war hierfür noch das Präfix cf: im Betrieb, das automatisch aktiviert war.Bei lokalen Tests funktionierte die zweite Methode mit dem Senden des entsprechenden Headers recht zuverlässig. Und man traut den eigenen Augen kaum, wenn man mit dem Internet Explorer mit installiertem Google Chrome Frame eine Webseite aufruft, die den entsprechenden Header sendet, und man dann sieht, dass sich der Internet Explorer genauso wie der Chrome-Browser verhält.Bei den lokalen Tests war Google Chrome Frame allerdings etwas unhandlich und hatte noch einige Probleme, was natürlich damit zu erklären ist, dass es sich um eine frühe Version handelt. Die große Frage ist dann natürlich, ob die Benutzer des Internet Explorer später auch Google Chrome Frame installieren werden. Das ist eine zweischneidige Angelegenheit: Aus Webentwicklersicht wäre es auf den ersten Blick sehr begrüßenswert.Dass Microsoft selbst davon abrät, war zu erwarten. Aber auch von Mozilla-Seite gibt es Kritik am IE-Plug-in, unter anderem, weil der Benutzer dadurch die Kontrolle über seinen Browser verliert und beispielsweise nicht mehr weiß, ob Chrome oder der Internet Explorer Passwörter und History speichert. Und es wird befürchtet, dass solche Plug-ins zu einer weiteren Fragmentierung der Browserlandschaft führen. Die Zukunft wird zeigen, wie sich die Benutzer entscheiden.