Internet Explorer 8 und Firefox 3

Die am meisten benutzten Browser sind Internet Explorer und Firefox und somit geben sie den Ton an, was auf Webseiten machbar ist. Und die Neuerungen können sich durchaus sehen lassen.

CSS-Unterstützung im IE8

Die gute Nachricht vorweg: Der Internet Explorer 8 besteht den Acid2-Test. Dieser vom Web Standards Project entwickelte Test überprüft hauptsächlich die CSSFähigkeit von Browsern und besonders ihre Konformität zu CSS 2.1.

Viele Korrekturen im Internet Explorer 8 betreffen fehlerhafte Interpretation bei Floats oder bei zusammenfallenden Margins. Darüber hinaus gibt es CSS-Eigenschaften, die die meisten anderen Browser schon länger unterstützen und die nun auch vom IE8 interpretiert werden.

So unterstützt der Internet Explorer 8 nun auch die Pseudoklasse :focus. Sie kann neben :link, :visited und :active bei Verlinkungen (und anderen Elementen) eingesetzt werden. Über :focus lassen sich Elemente, die den Focus per Tastatur erhalten, gesondert formatieren.

Endlich kann auch der Internet Explorer 8 mit per CSS erzeugten Inhalten umgehen: Häufig werden erzeugte Inhalte beispielsweise eingesetzt, um externe Links mit einem besonderen Icon zu versehen oder auch um die URLs von Links beim Ausdruck mit auszugeben. Die nun neu unterstützten Pseudoelemente :after und :before dienen dazu, am Ende oder Anfang eines Elements zusätzliche Inhalte einzufügen. Welche das sein sollen, wird hinter der Eigenschaft content angegeben. Wenn Sie die folgende Anweisung in einem Print-Stylesheet unterbringen, bewirkt sie, dass hinter dem Linktext in runden Klammern die URL mitausgegeben wird:

Interessant ist ebenfalls die neu unterstützte Eigenschaft outline, die zur Hervorhebung von Elementen durch Konturen dient. Mit outline-color bestimmen Sie die Farbe der Kontur, mit outline-width die Breite und mit outline-style die Art. Die angegebenen Werte für den Konturstil sind dieselben wie bei border-style, also zum Beispiel solid für eine durchgezogene Linie. Über die Kurzschrifteigenschaft outline werden Konturfarbe, -dicke und -art angegeben. Im Unterschied zur CSS-Eigenschaft border werden durch Konturen die Elemente nicht vergrößert. Sie können beispielsweise Links beim Anklicken per outline hervorheben, ohne dass der Linkbereich größer wird.

Über outline lassen sich auch die gestrichelten Rahmen entfernen, die aktive Links automatisch erhalten.

Sie sollten dann allerdings dafür sorgen, dass die aktivierten Links anders hervorgehoben werden, weil das eine wichtige Orientierung für Surfer darstellt.

Ebenfalls verbessert ist die Unterstützung für die CSS-Eigenschaft display zur Definition der Anzeige. Internet Explorer 8 unterstützt jetzt die fortgeschrittenen Werte für display, womit sich Elemente als Tabellen darstellen lassen. display: table wird dem umfassenden Element zugewiesen, das nächste erhält table-row für die Tabellenzeile und die einzelnen Zellen dann display: table-row. Damit lassen sich ganz einfach Mehrspaltenlayouts erstellen - ganz ohne float oder position.

Verbessert ist zudem die Unterstützung von Eigenschaften für den Ausdruck. Die neu unterstützten CSS-Eigenschaften page-break-inside, widows und orphans dienen dazu, genau zu bestimmen, wo Seitenumbrüche erfolgen sollen und wo nicht. Und noch eine Neuerung wird viele Webentwickler freuen: Das Konzept has-Layout ist im Internet Explorer 8 nicht mehr relevant. Es war maßgeblich für die Darstellung im IE6 und IE7: hasLayout ist dafür verantwortlich, dass manche Bugs nicht auftreten, wenn einem Bereich eine minimale Höhe oder zoom:1 zugewiesen wurde. Der Internet Explorer 8 kommt ohne aus.

Firefox 3 und CSS

Wenn man diese gewaltigen Änderungen beim IE8 ansieht, kommen einem die Änderungen beim Firefox 3 bezüglich CSS eher mager vor. Das liegt daran, dass Firefox 2 bei der CSS-Unterstützung dem Internet Explorer 7 um Längen voraus ist. Wie stehts mit der Eigenschaft outline? Bereits implementiert. :focus? Schon längst. Über display eine Tabelle darstellen? Geht auch schon in Firefox 2. Erzeugte Inhalte per CSS? Können wir auch abhaken.

Trotzdem soll nicht verschwiegen werden, dass der derzeit aktuelle Firefox 2 den Acid2-Test noch nicht besteht - aber Firefox 3 besteht ihn. Aber auch ansonsten gibt es interessante Neuerungen bezüglich CSS im Firefox 3. So zum Beispiel bei den Farbzuweisungen per CSS.