CSS im Internet Explorer 7
In der Version 7 des Browsers von Microsoft wurde laut eigener Aussage einige Verbesserung im Bereich der Cascading Style Sheets-Unterstützung eingebaut. Fehler wurden beseitigt, Unterstützung für neue Kommandos/Attribute eingebaut und die Interpretation von CSS-Konzepten (z. B. Boxmodell) verbessert. Es ist ein offenes Geheimis, dass sich der Internet Explorer am weitesten entfernt von den Webstandards bewegt. Insofern ist es für einen Webprogrammierer sinnvoll und nützlich, über die CSS-Unterstützung in diesem Browser Bescheid zu wissen. Neben den Änderungen bei den eigentlichen CSS-Befehlen beschreibt dieser Artikel die bedeutensten Verbesserungen und Veränderungen im Internet Explorer 7 im Vergleich zur Vorgängerversion.CSS-Selektoren
Attributabhängige Selektoren
Der IE 7 unterstützt das "Angebot" von CSS 2.0, das CSS-Kommandos für HTML-Elemente definiert werden können, die ein bestimmtes Attribut besitzen oder deren Attribut einen bestimmten Wert zugewiesen haben.In der Vorgängerversion wurde keine Variante dieser Art von Selektoren unterstützt.
Folgende Möglichkeiten interpretiert der IE 7 neu:
| CSS-Kommando | Bedeutung |
|---|---|
h1[align] |
Überschrift h1 mit Attribut align |
h1[align=center] |
Überschrift h1 mit Attribut align und Wert center |
h1[align~=cen] |
Überschrift h1 mit Attribut align welches den Wert "cen" enthält |
h1[lang|=en] |
Überschrift h1 mit Attribut lang dessen Wert beginnt mit en |
Verschachtelte Selektoren
Im IE7 ist die Unterstützung für den Kindselektor und den Nachbarselektor hinzugekommen. Beispiel für Kindselektor:div > h1 {color: red;}
Allen Überschriftenh1, die sich eine Ebene unter dem div befinden, werden die Schriftfarbe rot zugewiesen. Beispiel für Nachbarselektor:
h1 + p {font-style:italic;}
Dem Textabsatzp wird, wenn er direkt nach einer Überschrift kommt, eine kursive Schriftart zugewiesen.
Mehrere Klassen für einen Selektor
Nur im Strict-Modus können für einen Selektor (= HTML-Element) im IE 7 mehrere CSS-Klassen vergeben werden. Bisher konnten zwar auch mehrere Klassen angegeben werden, allerdings wurde in diesem Fall nur die letzte Klasse interpretiert. Beispiel:h1.Klasse1.Klasse2 {CSS-Kommando(s);}
Fehler mit * html-Selektor
Dashtml-Element ist das Grundelement einer Webseite. Das bedeutet, dass es dazu in der Baumstruktur kein "höherwertiges Element" gibt. Dennoch kann mit CSS ein Selektor definiert werden, der das
html-Element als Kindelement anderer HTML-Elemente betrachtet. Da es so ein Element nicht gibt, sollte eigentlich kein Browser etwas Passendes dafür finden. Beim Internet Explorer ist das allerdings schon der Fall. Beispiel:
* html {CSS-Befehl1; CSS-Befehl2; ...}
Im Strict-Modus des IE7 ist dieser Bug beseitigt. Im Quirksmodus funktioniert er aber noch.Hinweis: Viele Webseiten nutzen diesen Bug, um CSS-Befehle speziell für den Internet Explorer zu definieren. Im IE 7 kann dieser Bug im Strict-Modus nicht mehr genutzt werden.
CSS-Pseudoklassen
Klasse :first-child
Der IE 7 interpretiert im Gegensatz zur Version 6 zusätzlich die Pseudoklasse:first-child. Beispiel:
div h1:first-child {text-decoration:underline;}
Wenn die Überschrifth1 das erste Element innerhalb des div-Bereiches ist, wird sie unterstrichen dargestellt.
Klasse :hover
Der Hover-Effekt konnte bis zum IE 6 nur bei Ankern mit CSS realisiert werden. Im IE 7 kann:hover auf alle HTML-Elemente angewendet werden.
CSS-Kommandos
Darstellung von Rahmen
Im Vergleich zur Version 6 des IE's werden bei der Eigenschaftborder-style die Rahmenarten dotted (gepunkteter Rahmen) und dashed (gestrichelter Rahmen) richtig interpretiert. Zuvor wurde bei einer Rahmenbreite von 1 Pixel bei einer dotted-Definition der Rahmen im dashed-Stil dargestellt.
Positionierung von Elementen
Im diesen Rahmen sind beim IE 7 die CSS-Eigenschaftenmax-height, max-width, min-height und min-width hinzugekommen. Dabei werden numerische und prozentuale Angaben vom Browser interpretiert.Der Wert
visible für die CSS-Eigenschaft overflow wird korrekt nach dem CSS-Standard intepretiert.Für die Eigenschaft
position wird jetzt der mögliche Wert fixed interpretiert. Dies funktioniert allerdings nur im standardkonformen HTML-Modus (Dokumententyp-Deklaration).
Interpretation von abbr
Bis einschließlich dem Internet Explorer 6 hat der Browser für das Tag<abbr> keine CSS-Definitionen interpretiert. Diese Einschränkung wurde ebenfalls in der neuen Version behoben.
Alpha-Kanal bei png-Bildern
Obwohl es noch nicht reibungslos läuft, unterstützt der IE7 den Alpha-Kanal für Bilder im png-Format. Dies führt zur verbesserten Darstellung der Bilder im Browserfenster, womit gleichzeitig auch CSS-Eigenschaften leichter für diese Bilder definiert/genutzt werden können.Wichtiger Fehler im CSS-Boxmodell
Für das bekannte Boxmodell wurde ein bedeutender Fehler im IE 7 beseitigt. Falls bei der Anwendung des Boxmodells das innere HTML-Element inkl. Rahmen größer ist als der Außenrahmen wurde dieser immer der Größe des inneren Elementes angepasst, so dass dieses nie außerhalb des Außenrahmens angezeigt wurde.Im IE7 wird die Breite und die Höhe für den Außenrahmen berücksichtigt, so dass beide Elemente jetzt mit ihren "wahren" Angaben dargestellt werden.
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project