Das ist bisher an mir vorbeigegangen: Auch der Internet Explorer 8 führt für seine browserspezifischen CSS Erweiterungen einen Präfix -ms ein. Damit ist die Syntax nun analog zum Mozilla -moz, Opera -o, oder Safari -webkit. Es gibt ein paar kleinere Syntaxänderungen und CSS expressions werden nicht mehr unterstützt.
Eine Liste der browserspezifischen CSS Erweiterungen für den Internet Explorer 8 findet man unter: CSS Improvements in Internet Explorer 8 und eine Kompatibilitätsliste für die unterschiedlichen IE Versionen liefert Microsoft ebenfalls. Zu den CSS Elementen, die mit dem -ms Präfix versehen wurden gehört u.a. die Eigenschaft filter. Die Syntax für dieses Element unterscheidet sich von der Syntax älterer Versionen:
/*ältere IE Versionen*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/*IE 8*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";Die Präfix Elemente des IE8 sind zum guten Teil nicht neu, das Gestalten von Scrollbars, die Filter, das gab es alles bereits mit dem IE6. Auf die Implementierung von abgerundeten Ecken rounded-corners, Farbverläufen gradients oder Teiltransparenten Farbangaben rgba muß weiterhin gewartet werden. Dazu noch ein Tipp:
div {
/* alte Browser */
background: rgb(200, 54, 54);
/* rgba fähige Browser */
background: rgba(200, 54, 54, 0.5);
}
/* und für den ie über die Verwendung von Filter: */
<!--[if IE]>
div {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#99000050,
endColorstr=#99000050
);
zoom: 1;
}
<![endif]-->Die auf den ersten Blick merkwürdige Farbangabe #99000050 ist kein Schreibfehler, die Farbe wurde als AARRGGBB Wert notiert. Die ersten beiden Ziffern stehen für die Transparenz. Auf diesem Weg lässt sich rgba also auch für den Internet Explorer implementieren. Die Idee alternativ ein semi-transparentes PNG für diesen Effekt zu nutzen, scheitert an der Version 6 (ohne dem Einsatz von Javascript), der Filter funktioniert hingegen schon ab Version 5.
Wie bereits einleitend erwähnt: CSS expressions werden nicht mehr unterstützt. Microsoft schreibt:
While powerful, this feature was never standardized, has a high performance cost and increases the browser’s attack surface. Moreover, its main usage scenario has been to work around CSS bugs and limitations in Internet Explorer (for instance, to simulate max-width or pseudo-classes like : first-child).
Solche “wundervollen” CSS Spielereien (nochmal der IE6 und seine mangelnde PNG Unterstützung) gehören damit der Vergangenheit an – Schade nur, dass gerade die älteren ohnehin langsameren Browser diese Form der Hilfestellung weiterhin benötigen.
* html img, * html .png {
position:relative;
behavior: expression(
(this.runtimeStyle.behavior="none") &&
(this.pngSet ? this.pngSet=true:
(this.nodeName == "IMG" &&
this.src.toLowerCase().indexOf('.png') >-1 ?
(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "
progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"
) :
(this.origBg = this.origBg? this.origBg :
this.currentStyle.backgroundImage.toString().
replace('url("','').replace('")',''),
this.runtimeStyle.filter = "
progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none"
)
),
this.pngSet=true
)
);}Bei generiertem Inhalt über CSS (Attribute wie content oder quotes) zieht der Internet Explorer 8 gleich, und führt die vollständige Unterstützung für generierten Inhalt nach der CSS 2.1 ein. Gleiches gilt für die Pseudo-Klassen :before, :after, :focus und :active.
Ohne Frage unterstützt der IE8 die CSS2.1 Spezifikation wesentlich besser und standardkonformer als seine Vorgänger Fassungen. Bleibt abzuwarten, ob es Microsoft gelingt das Tempo anderer Hersteller mitzugehen.
