CSS im Internet Explorer 7
IE7 auf dem CSS-Prüfstand

IE6 weit zurück

CSS im Internet Explorer 7

Der Internet Explorer 6 ist in die Jahre gekommen und hinkt in seiner CSS-Unterstützung weit hinter den anderen Browsern wie Firefox oder Opera her. Das soll sich im neuen Internet Explorer 7 ändern, von dem derzeit die dritte Betaversion zum Download bereitsteht. Die CSS-Implementierung der Betaversion entspricht allerdings schon der endgültigen Version.

In diesem Artikel erfahren Sie, welche CSS-Selektoren und CSS-Eigenschaften der Internet Explorer jetzt unterstützt und über welche Browser-Hacks Sie den Internet Explorer 7 gezielt ansprechen können.

Fortschrittliche Selektoren

CSS im Internet Explorer 7

Ein Absatz

Ein zweiter Absatz

Erster Absatz

Zweiter Absatz

Dritter Absatz

Hover & fixed besser unterstützt

CSS im Internet Explorer 7

Neben den Fällen, in denen die Unterstützung durch den Internet Explorer 7 vollkommen neu ist, gibt es weitere, in denen die Unterstützung verbessert wurde.

Über die Pseudoklasse :hover heben Sie Elemente besonders hervor, wenn der Benutzer mit der Maus darüberfährt. Dies funktioniert im Internet Explorer bis einschließlich Version 6 jedoch nur bei Links, eine Beschränkung, die im Internet Explorer 7 nicht mehr gilt.

Mit der CSS-Eigenschaft position:fixed lassen sich Bereiche definieren, die beim Scrollen der Seite fest bleiben – erwünscht ist das häufig bei Menüs, die so auch sichtbar sind, wenn der Surfer beim Scrollen am Seitenende angekommen ist. Leider ging das bisher nicht im Internet Explorer, jetzt aber ab Version 7: Der Internet Explorer 7 unterstützt position:fixed wie vorgesehen.

Apropos feststehende Bereiche: Feststehende Hintergrundbilder definieren Sie in CSS mit Hilfe von background-attachment: fixed. Im Internet Explorer bis einschließlich Version 6 funktioniert das nur beim Element body. Auch an dieser Stelle ist der Internet Explorer 7 fortschrittlicher: background-attachment: fixed können Sie nun auch bei anderen Elementen als bei body einsetzen.

Übrigens unterstützen andere Browser wie Firefox, Safari oder Opera die genannten CSS-Eigenschaften alle korrekt.

Fehlende Implementierung

CSS im Internet Explorer 7

Doch leider lässt der Internet Explorer 7 noch etliche Wünsche unerfüllt: Nicht unterstützt wird unter anderem der Selektor lang() für sprachspezifische Formatierungen. Ebenfalls nicht interpretiert werden die Pseudoelemente :before und :after, die zur Einfügung von zusätzlichem Text dienen – vorzugsweise eingesetzt, um Links für den Ausdruck besonders vorzubereiten.

Zudem vermisst man die Unterstützung von a:focus – in anderen Browsern können Sie hierüber Links beim Durchsteppen mit der Tabulatortaste hervorheben. Nicht implementiert sind außerdem die Werte inherit oder transparent, und eine Unterstützung von alternativen Stylesheets sucht man auch vergeblich.

Browser-Bugs

CSS im Internet Explorer 7

Die gute Nachricht vorweg: Ein Großteil der Bugs im Internet Explorer sind in der Version 7 bereinigt – zumindest die meisten derjenigen, die auf Seiten wie www.positioniseverything.net und www.quirksmode.org dokumentiert werden so beispielsweise der Guillotine-Bug oder der Peekaboo-Bug und viele mehr.

Korrigiert ist auch das Fehlverhalten bei vorhandener XML-Deklaration:

Steht diese an sich bei XHTML mögliche XML-Deklaration am Anfang eines Dokuments, wechselt der Internet Explorer 6 automatisch in den Quirksmodus, in dem er beispielsweise das Boxmodell falsch interpretiert. Auch dieser Bug ist in der Version 7 behoben, der neue Internet Explorer bleibt auch bei vorhandener XML-Deklaration im Standardmodus.

CSS-Filter

CSS im Internet Explorer 7

Um mit den Unzulänglichkeiten der unterschiedlichen Browser-Versionen umzugehen, greifen CSS-Designer gern zu CSS-Filtern oder auch Browser-Hacks. Mit diesen lassen sich gesonderte Angaben für einzelne Browser machen. Aber klappen diese auch noch im neuen Internet Explorer? Leider nein, der Großteil der Browser-Hacks funktioniert im Internet Explorer 7 nicht mehr. Web-Entwickler nutzen gern die fehlende Unterstützung des Internet Explorers für fortschrittliche Selektoren aus, um Angaben vor diesem zu verbergen. Da der Internet Explorer bis einschließlich Version 6 Kindselektoren wie html > body nicht interpretierte, ließen sich darüber Angaben vor diesem Browser verbergen. Der auf dem Kindselektor basierende Filter funktioniert aber natürlich nicht für den Internet Explorer 7.

Andere Browser-Hacks basieren dagegen auf Fehlern, wie der Sternchen-Hack. Für Formatierungen, die nur für den Internet Explorer gelten sollten, wird der Selektor * html verwendet – ein an sich unsinniger Selektor, den der Internet Explorer bis einschließlich Version 6 aber interpretiert. Hier verhält sich auch der Internet Explorer 7 standardkonform und ignoriert die bei diesem Selektor angegebenen Formatierungsanweisungen – zumindest, wenn er sich im Standardmodus befindet.

Das bedeutet allerdings nicht, dass automatisch alle Seiten, die diese Filter verwenden, im Internet Explorer 7 nicht korrekt dargestellt werden. Vielmehr kommt es auf die Kombination an: Wird beispielsweise der Sternchen-Hack wegen eines Bugs eingesetzt, der im Internet Explorer 7 bereits behoben ist, so wird der Internet Explorer 7 die Seite wie gewünscht darstellen. Umgekehrt wird es schwierig, wenn ein Filter im Internet Explorer 7 nicht mehr greift, der für ein immer noch existierendes Problem benötigt wird.

CSS-Filter für den IE7

CSS im Internet Explorer 7

Inzwischen gibt es auch die ersten speziellen Filter, um nur den Internet Explorer 7 anzusprechen – beispielsweise über den Selektor *+html. Die auf diese Weise eingeleiteten Angaben liest nur der Internet Explorer 7.

Einfacher gelingt die Ansprache des Internet Explorers jedoch über die so genannten Conditional Comments (konditionalen Kommentare), eine Microsoft-spezifische Erfindung.

Konditionale Kommentare schreiben Sie in den head-Bereich Ihres HTML-Dokuments. Eingeleitet werden die konditionalen Kommentare durch HTML-Kommentare, dann folgt in eckigen Klammern mit if die Version des Internet Explorers, für den die darauf folgenden Angaben gelten sollen. Sie beenden die Angabe mit endif. Das folgende Beispiel zeigt, wie sich auf diese Art ein Stylesheet ie7.css einbinden lässt, dessen Angaben ausschließlich vom Internet Explorer 7 und keiner anderen Version gelesen werden:

Die Angabe [if IE 7.0] benötigen Sie für die dritte Beta- und die endgültige Version des Internet Explorers, für die ältere Beta-Version sollten Sie hingegen [if IE 7.0b] schreiben. Ohne Angabe einer Version [if IE] sprechen Sie sämtliche Internet Explorer an.

Konditionale Kommentare sind Microsoft-spezifisch, können jedoch problemlos eingesetzt werden, weil die Angaben innerhalb von Kommentaren stehen und somit von anderen Browsern einfach ignoriert werden. Verwenden Sie konditionale Kommentare, können Sie sich sicher sein, dass diese auch in den künftigen Versionen des Internet Explorers interpretiert werden. Der Einsatz von Hacks, die auf Fehlern basieren, ist in dieser Hinsicht wesentlich riskanter.

Webseiten im IE7 testen

CSS im Internet Explorer 7

Sie haben verschiedene Möglichkeiten, Ihre Webseiten im Internet Explorer 7 zu testen. Die Beta 3 ist auf Deutsch verfügbar und kann bei Microsoft heruntergeladen werden. Normalerweise werden Sie den Internet Explorer 7 zusätzlich zu anderen Versionen installieren wollen, nicht ausschließlich. Für die Parallelinstallation mehrerer Internet-Explorer-Versionen kann man auf verschiedene Tricks zurückgreifen. Links zu Anleitungen finden Sie im oben stehenden Kasten. Außerdem lässt sich der Internet Explorer in einer eigenen Virtual Machine installieren. Haben Sie nur einzelne Seiten, auf die Sie einen raschen Blick werfen möchten, bietet sich ein Screenshot-Dienst wie www.danvine.com/iecapture an.