Neue Browser - aus Sicht der Webentwickler

Internet Explorer 8 und Firefox 3

Die erste Beta-Version des Internet Explorer 8 kann seit Anfang März heruntergeladen werden, vom Firefox 3 steht seit Kurzem die Final zum Download bereit. Was aber bringen die neuen Versionen für Webentwickler?

Internet Explorer 8 und Firefox 3

© Archiv

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:

Internet Explorer 8 und Firefox 3

© Archiv

Klassischer Dreispalter per CSS - aber dieses Mal über die noch neue CSS-Eigenschaft display: table realisiert.
a[href]:after {
content:" ("attr(href)")";}

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.

a:hover { outline: 2px solid #333; }

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

a { outline: none; }

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.

Internet Explorer 8 und Firefox 3

© Archiv

Schickes neues CSS-Feature im Firefox 3: Über RGBA kann die Transparenz einer Farbe bestimmt werden.

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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".