Weitere Tricks

Jetzt aber zum IE, für den der Farbverlauf über den Gradient-Filter umgesetzt wird:

In runden Klammern hinter gradient müssen Sie bei startColorStr die Farbe angeben, mit der der Farbverlauf beginnt und bei EndColorStr die Endfarbe. Ab Version 8 interpretiert der IE zusätzlich die Filterangaben in einer etwas modifizierten Syntax:

Dabei wird filter mit dem Präfix -ms- versehen und der restliche String in Anführungszeichen gesetzt, um zumindest formal der CSS-Syntax zu entsprechen. Wichtiger Punkt aber: Auch wenn dies jetzt CSS-konformer aussieht, bleiben Filter eine proprietäre Entwicklung von Microsoft und haben damit einen anderen Stellenwert als Angaben wie -moz-border-shadow, die sich auf CSS3-Eigenschaften in der Entwicklung beziehen.Übrigens müssen Sie die -ms-filter-Angabe nicht unbedingt zusätzlich zur filter-Angabe machen - alle Versionen des IE, auch der IE8 und IE9 und sogar im Kompatibilitätsmodus - interpretieren ebenfalls die Angabe ohne -ms-. Empfehlenswert ist es aber allemal, die Filterangaben in einem eigenen Stylesheet auszulagern, das über Conditional Comments eingebunden wird.

Farbangabe mit Transparenz

Ein weiterer Einsatzbereich des Gradient-Filters ist die Simulation der Farbangaben mit Alphatransparenz.Über folgenden Code soll ein Bereich eine halbtransparente Hintergrundfarbe erhalten, ohne dass sich die Transparenz aber auf die Schrift auswirkt - ein klassischer Fall für rgba(). Bei rgba() kann man neben den drei Werten für den Rot-, Grün- und Blauton auch noch den Grad der Transparenz als Wert zwischen 0 (ganz durchsichtig) bis 1 (ganz opak) spezifizieren.

Für den IE kommt hier wieder der Gradient-Filter zum Einsatz. Dabei wird die Farbe über eine achtstellige Zahlenkombination angegeben. Die ersten beiden Zeichen geben den hexadezimalen Grad der Transparenz an - 00 wäre ganz transparent und FF ganz undurchsichtig. Da der IE9 rgba() unterstützt, sollten Sie über Conditional Comments dafür sorgen, dass nur ältere IEs die Filterangabe zu sehen bekommen.

Filter haben mehrere Besonderheiten:

• Im IE6 und IE7 benötigt das Element hasLayout, damit der Filter wirkt. Im Beispiel wurde das über die proprietäre Eigenschaft zoom: 1 realisiert.
• Bei manchen Filtern wirkt der Text unschön, da ClearType bei Filtern teilweise deaktiviert ist.
• Der Code ist mühsam zu schreiben und das Debuggen ist nicht ganz einfach. Für Letzteres gibt es Abhilfe: Beispielsweise über das praktische Tool CSS3please, das Ihnen die Filter für Farbverläufe, RGBA und für CSS3-Transforms automatisch erstellt.

Selektoren im IE : Selectivizr

Damit CSS3-Selektoren auch im Internet Explorer vor Version 9 funktionieren, gibt es die JavaScript-Bibliothek Selectivizr. Selectivizr setzt auf anderen JavaScript-Bibliotheken wie etwa jQuery oder Mootools auf, die es als Basis benötigt. Allerdings funktionieren auch nur jeweils die Selektoren, die auch in der verwendeten Bibliothek unterstützt werden. Eine Aufstellung der verschiedenen Bibliotheken, die als Basis infrage kommen, und welche CSS3-Selektoren dort jeweils implementiert sind, finden Sie auf der Seite des Selectivizr-Projekts.Um Selectivizr zu nutzen, müssen die CSS-Formatierungen in einer eigenen Datei stehen und per link eingebunden werden. Formatierungen, die innerhalb von <style> und </style> angegeben sind, werden nicht geparst. Dann geht aber alles ganz einfach: Selectvizr untersucht automatisch Ihr Stylesheet, erkennt die Selektoren und wählt die Elemente aus. Sie brauchen selbst keinen JavaScript-Code zu schreiben. Ein Beispiel: Erst wird das Stylesheet eingebunden, dann die Basis-Bibliothek - im Beispiel jQuery. Innerhalb von den Conditional Comments steht der Verweis auf Selectivizr.

Zusätzlich können Sie innerhalb von <noscript> auch eine eigene CSS-Datei angeben, die berücksichtigt wird, falls JavaScript nicht aktiviert ist. Im Beispiel heißt sie ersatz.css.

Features im großen Stil: CSS3PIE

Gleich bei mehreren CSS3-Features bessert CSS3 PIE nach: Danach versteht der Internet Explorer runde Ecken über border-radius, Schatten mit box-shadow, Bilder für Rahmen über border-image und weitere in CSS3 eingeführte Optionen für Hintergrundbilder und Farbverläufe.Wenn Sie CSS3-PIE heruntergeladen haben, finden Sie im entpackten Ordner die PIE.htc-Datei, die die entscheidende ist. Die htc-Datei funktioniert allerdings nur, wenn Sie Ihre Beispieldatei auf einem Server ausführen: Entweder testen Sie sie direkt in einem Testordner auf Ihrem Webserver im Internet oder Sie probieren es auf einem heimischen Testserver wie XAMPP. Dann können Sie ganz normal Ihre CSS3-Angaben im Stylesheet schreiben. Soll PIE tätig werden, ergänzen Sie in der CSS-Regel eine Zeile:

Durch folgende Angabe funktionieren die runden Ecken auch im IE< 9:

Wichtig ist, dass der Pfad hinter behavior auf die PIE.htc verweist, und zwar nicht von der CSS-Datei ausgehend, sondern von der HTML-Datei!Mehrfache Hintergrundbilder

Damit die CSS3-Hintergrundeigenschaften unterstützt werden, ist eine etwas andere Vorgehensweise erforderlich. Der Grund ist, dass dafür die bereits aus CSS 2.1 bekannten Eigenschaften background oder background-image verwendet werden, die der Internet Explorer selbst normalerweise versucht zu parsen. Wenn Sie etwa background mit mehreren Hintergrundbildern benutzen und wollen, dass CSSPIE tätig wird, müssen Sie dieselben Werte wie bei background zusätzlich bei -pie-background angeben.Hierzu ein Beispiel: Durch folgenden Code erhält ein Element drei Hintergrundbilder, die außerdem unterschiedlich positioniert werden. Das wird jetzt zwei Mal angegeben - einmal bei background für moderne Browser und einmal bei -pie-background für den IE<9. Außerdem muss natürlich noch PIE.htc eingebunden werden.

Die Nachbildungen, wie sie CSS3 PIE vornimmt, sind aber meist nicht so vollständig wie die ursprüngliche CSS3-Eigenschaft, sodass natürlich immer Tests notwendig sind. Beispielsweise funktionieren die mehrfachen Hintergrundbilder nicht beim body-Element, sondern nur bei den anderen Elementen.

Nach Bedarf handeln

Nützliche Tools für den IE

CSS3PIE oder auch das händische Arbeiten mit Filtern ermöglicht viele Effekte, die sonst den anderen Browsern vorbehalten sind. Man darf aber nicht vergessen, dass es sich bei Filtern oder auch den htc-Dateien, die CSS3PIE benutzt, um proprietäre und nicht standardkonforme Techniken handelt. Sofern es möglich ist und kleine Unterschiede akzeptabel sind, sind Nachbesserungen über CSS mithilfe von Modernizr, die einen ähnlichen, aber nicht identischen Effekt haben, sicher die elegantere Lösung.Wie man verfährt, sollte immer von Fall zu Fall entschieden werden. So werden bei der Yahoo-Webseite Farbverläufe und abgerundete Ecken über CSS3 realisiert. Bei Farbverläufen wird über Filter für den IE8 und IE9 nachgebessert, bei den runden Ecken hingegen auf das Nachbessern verzichtet.