- CSS3 Features für den Internet Explorer zugängig machen - Webstandard-Blog

CSS3 Features für den Internet Explorer zugängig machen

CSS
- 12 Jun, 2008
Kommentare (0)

Das vorgestern angesprochene Skript von Dean Edwards beinhaltet neben der Lösung der PNG-Problematik auch weitere interessante Ansätze, um Unzulänglichkeiten des IE, auch in Version 7, zu beheben. Dazu muss lediglich ein Upgrade des JavaScriptes durchgeführt werden ( Download von IE8.js ). Dieses beinhaltet dann u.a. Lösungsansätze für min-height und max-height, die allerdings bereits in der 7er Version des Skriptes angeboten werden. Interessant sind aber vor allem die Lösungsansätze für CSS Selektoren. Um diese Möglichkeiten etwas bildhafter zu gestalten, verwenden wir an dieser Stelle die leicht modifizierte Tabelle eines früheren Artikel zum Thema "Der Einsatz von Tabellen in Webseiten".

Tabelle ohne CSS-Selektoren

 

    Produktname 
    Herstellerfirma 
    Preis 


Produktname 1
Herstellerfirma 1
Preis 1

Produktname 2
Herstellerfirma 2
Preis 2

Produktname 3
Herstellerfirma 3
Preis 3

Produktname 4
Herstellerfirma 4
Preis 4

Produktname 5
Herstellerfirma 5
Preis 5

Produktname 6
Herstellerfirma 6
Preis 6

Produktname	Herstellerfirma	Preis
Produktname 1	Herstellerfirma 1	Preis 1
Produktname 2	Herstellerfirma 2	Preis 2
Produktname 3	Herstellerfirma 3	Preis 3
Produktname 4	Herstellerfirma 4	Preis 4
Produktname 5	Herstellerfirma 5	Preis 5
Produktname 6	Herstellerfirma 6	Preis 6

Ein Weg um umfangreiche Tabellen für den User angenehmer lesbar zu gestalten, ist bspw. die Vergabe wechselnder Hintergrundfarben für gerade und ungerade Zeilen der Tabelle. Eine Lösung hierfür bieten CSS Selektoren :nth-child(). Hiermit können bspw. alle geraden Zeilen (2,4,6,..) mit einer anderen Hintergrundfarbe versehen werden, als die ungeraden Zeilen. Diese in CSS3 implementierte Eigenschaften wird von einigen Browsern (Opera, Safari, Konquerer) bereits unterstützt, allerdings nicht vom Firefox und dem Microsoft-Browser. Für Interessierte hier eine Übersicht über die CSS-Eigenschaften und ihre Unterstützung des IE von Version 5.0-8.0. Bisher wurden für eine solche Darstellung zwei verschiedene Klassen für ungerade und gerade Zeilen definiert, die die jeweils entsprechende Hintergrundfarbe beinhalten. Das Skript von Dean Edwards erspart Euch diese zusätzlichen CSS-Klassen. Der (X)HTML-Code für die beiden Tabellen ist identisch, dass heißt es besitzt keine Zeile (tr) oder Zelle (td) auch nur eine zusätzliche CSS-Klasse. Der CSS-Code für eine solches Beispiel, könnte dann wie folgt aussehen.

CSS Selektor :nth-child() ... tr:nth-last-child(2n) { background-color:#E9E8D8; } ...

Der Selektor tr:nth-child(2n) entspricht in diesem Beispiel allen tr-Elementen, die das zweite Kind ihres Elternelements sind. Das heißt, also jeder gerade Tabellenzeile. Wer den Spieß umdrehen möchte, muss dem Wert in Klammern lediglich die Angabe +1 für alle ungeraden Zeilen hinzufügen. Das daraus resultierende Ergebnis, sieht für die entsprechenden Browser wie folgt aus.

Tabelle mit CSS-Selektoren

 

    Produktname 
    Herstellerfirma 
    Preis 


Produktname 1
Herstellerfirma 1
Preis 1

Produktname 2
Herstellerfirma 2
Preis 2

Produktname 3
Herstellerfirma 3
Preis 3

Produktname 4
Herstellerfirma 4
Preis 4

Produktname 5
Herstellerfirma 5
Preis 5

Produktname 6
Herstellerfirma 6
Preis 6

Produktname	Herstellerfirma	Preis
Produktname 1	Herstellerfirma 1	Preis 1
Produktname 2	Herstellerfirma 2	Preis 2
Produktname 3	Herstellerfirma 3	Preis 3
Produktname 4	Herstellerfirma 4	Preis 4
Produktname 5	Herstellerfirma 5	Preis 5
Produktname 6	Herstellerfirma 6	Preis 6

Hinweis an alle Firefox-User: Für Euch sieht diese zweite Tabelle aus wie die erste, denn der Firefox ist zur Interpretation dieser CSS3 Eigenschaft (noch) nicht in der Lage. Wie das folgende Zitat von David Baron zeigt, ist der Weg dort hin aber bereits geebnet.

We now support :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() and :first-of-type, :last-of-type, and :only-of-type.

Wie der Artikel zeigt, bietet CSS3 einiges an Möglichkeiten um Webseitenelemente und deren Inhalte besser präsentieren zu können und dass ohne zusätzliche CSS-Klassen. Allerdings eben nur unter der Voraussetzung das der Browser diese auch versteht und korrekt ausführt.

Wie in David Baron's Weblog zu lesen ist und wie die Abbildung zeigt, kann der noch in der Entwicklungsphase befindliche Firefox 3.1a1pre dieses Feature bereits verstehen und korrekt interpretieren können und damit ein weiteres wichtiges Kriterium auf dem Weg zu CSS3 erreichen, denn bisher hängt der Firefox in Bezug auf diesen Standard Konquerer und Safari noch spürbar hinterher.