Neue Techniken und alte Browser

CSS3 und mit altem Internet Explorer

Der IE vor Version 9 ist das Sorgenkind, was die Verwendung von CSS3 anbelangt. Aber es gibt verschiedene Techniken, um ihm auf die Sprünge zu helfen.

Der IE9 muss sich in punkto CSS3 nicht vor anderen modernen Browsern verstecken, aber es wird noch eine Weile dauern, bis er sich weit verbreitet hat – unter Windows XP etwa kann man ihn gar nicht installieren. Damit man trotzdem nicht auf den Einsatz von CSS3 verzichten muss, gibt es nützliche Strategien und Tools. Beginnen wir mit einem CSS3-Feature, dessen IE-Unterstützung sogar bis zur Version 5.5 zurückgeht.

Webfonts in allen IEs

Ein schönes Feature aus CSS3 sind die herunterladbaren Schriften, die über @fontface eingebunden werden. Sie funktionieren sogar schon im IE 5.5, allerdings müssen die Schriften für den IE bis einschließlich Version 8 im EOT-Format vorliegen, für andere Browser braucht man die anderen Formate WOFF, TrueType oder SVG.

Das Problem besteht nun darin, den IE dazu zu bringen, dass er die richtige Angabe liest. Dafür gab es bisher unterschiedliche Lösungen, die man jetzt jedoch aktualisiert hat, damit es auch mit dem Internet Explorer 9 klappt – und sogar dann, wenn er im Kompatibilitätsmodus läuft. Die neue empfohlene Syntax sieht folgendermaßen aus:

Codebeispiel:

Die doppelte src-Angabe am Anfang wurde notwendig, damit der IE9 auch im Kompatibilitätsmodus die Webfonts anwendet. Bei der zweiten Angabe mithilfe von url('myfont-webfont.eot?iefix') sorgt das Fragezeichen dafür, dass der IE bis einschließlich Version 8 die folgenden Angaben ignoriert und wirklich den Font im EOT-Format herunterlädt. Die anderen Browser wählen sich die Schrift in dem jeweiligen Format aus, das sie benötigen. Danach können Sie die so spezifizierte Schrift ganz normal im Stylesheet verwenden:

Codebeispiel:

h1 {
font-family: MyFontFamily, Arial,
sans-serif;
}

Wichtig ist hier – wie auch sonst immer – die Angabe von Fallbackschriften.

Tipp: Ein komfortabler Einstieg in Webfonts geht über die kostenlosen Schriften von Font Squirrel, die man sich als @font-face-Kit herunterladen kann. Das Kit beinhaltet die Schriften in allen erforderlichen Formaten, eine HTML-Beispielseite und eine CSS-Datei mit dem benötigten CSS-Code.

Alternative Formatierungen

Webfonts sind ein besonderer Fall, weil die prinzipielle Unterstützung im IE vorhanden ist und nur das Format ein eigenes ist. Andere Features wie beispielsweise box-shadow werden hingegen vom IE vor Version 9 überhaupt nicht unterstützt.

Mitunter genügt es in solchen Fällen, eine einigermaßen ähnliche Darstellung zu erreichen. Beispielsweise kann man statt eines Schattens über box-shadow bei älteren IEs einen Rahmen ergänzen. Das Problem dabei: Man muss dafür sorgen, dass ein Browser, der box-shadow versteht, den Rahmen nicht zusätzlich darstellt. Hier hilft die JavaScript-Datei Modernizr.

Diese JavaScript-Datei binden Sie zuerst im Kopfbereich Ihres Dokuments ein.

Codebeispiel:

Modernizr ergänzt automatisch eine Reihe von Klassen im html-Start-Tag, die widerspiegeln, welche CSS3-Features im Browser unterstützt werden und welche nicht. Im Internet Explorer vor Version 9 gibt es dort unter anderem eine Klasse mit Namen no-boxshadow, im IE9 steht stattdessen die Klasse boxshadow. Damit können Sie die beiden unterschiedlichen Regeln formulieren: Zuerst wird für alle Browser ein Rahmen definiert, der nur rechts (1px dick) und unten (2px dick) angezeigt werden soll.

Codebeispiel:

#schattig {
border-right: 1px solid #4F4E45;
border-bottom: 2px solid #4F4E45;
}

Wenn ein Browser box-shadow versteht, hat das html-Start-Element die Klasse boxshadow. Nur in diesem Fall wählt der Selektor .boshadow #schattig das Element mit der id=“schattig“ aus, die Rahmenbreite wird auf 0 gesetzt und stattdessen box-shadow angewandt.

Codebeispiel:

.boxshadow #schattig {
border-width: 0px;
-moz-box-shadow: 0 2px 5px rgba
(0,0,0,.5);
-webkit-box-shadow: 0 2px 5px rgba
(0,0,0,.5);
box-shadow: 0 2px 5px rgba(0,0,0,.5);
}

Hier wird ein Schatten ergänzt, der um 2px nach unten versetzt ist und eine Unschärfe von 5px hat. Die Farbangabe über rgba() sorgt für halbtransparentes Schwarz. Hier kann man auf rgba() zurückgreifen, da alle Browser, die box-shadow implementiert haben, auch diese Farbangaben verstehen.

Filter einsetzen

Nicht immer reicht aber ein „ungefähr so ähnlich“ aus, manchmal möchte man genau denselben Effekt realisieren. Viele Möglichkeiten ergeben sich hier über die von Microsoft eingeführten proprietären Filter. Es gibt eine große Anzahl an Filtern, wobei zur Nachbildung von CSS3-Eigenschaften folgende Filter benutzt werden:

• Der Alpha-Filter dient dazu, Elemente »»transparent zu machen, wofür man in anderen Browsern opacity nimmt.
• Der Gradient-Filter hat unterschiedliche Funktionen: Zum einen kann er verwendet werden, um die Farbangaben mit Alphatransparenz – rgba() und hsla() – umzusetzen. Zum anderen dient er der Erstellung von CSS Farbverläufen.
• DropShadow-, Shadow-, Glow- und Blur-Filter können benutzt werden, um box-shadowtext-shadow zu simulieren.
• Für 2D-Transforms können Sie den Matrix-Filter benutzen.

und

Das Prinzip der Filter soll einmal am Gradient-Filter für Farbverläufe gezeigt werden. Derzeit müssen Sie die Farbverläufe auf fünf verschiedene Arten notieren:

• Eine Angabe für den Firefox mit dem –moz-Präfix
• Zwei Angaben für Webkit-Browser mit dem –webkit-Präfix: Der aktuelle Safari 5 benötigt eine eigentlich veraltete Syntax. Inzwischen gibt es eine neuere, an der Firefox-Variante angelehnte Syntax. Der Chrome 10 unterstützt diese bereits und Safari wird wahrscheinlich demnächst folgen.
• Opera interpretiert in der aktuellen Betaversion bereits Farbverläufe mit dem Präfix –o-, ein Feature, das es sicher in die nächste offizielle Version schaffen wird.
• Außerdem sollten Sie die Angabe dann noch ohne Präfix schreiben, um dem zukünftigen CSS3-Standard zu genügen.

Damit ergibt sich folgender Code für einen linearen Farbverlauf von einem dunkleren zu einem helleren Grau.

Codebeispiel:

background-image: -moz-linear-
gradient(top, #444444, #999999); /* FF 3.6 */
background-image: -webkit-gradient
(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-
gradient(#444444, #999999); /* Chrome 10+, Safari 6? */
background-image: -o-linear-gradient
(#444444, #999999); /* Opera demnächst */
background-image: linear-gradient
(top, #444444, #999999);

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

Codebeispiel:

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:

Codebeispiel:

-ms-filter: "progid:DXImageTransform.
Microsoft.gradient(startColorStr="#444444", EndColorStr="#999999"

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.