Während heutige Browser noch oft Probleme mit CSS1 und CSS2 haben, arbeitet das W3C schon an der dritten Version von CSS. In den letzten Tagen bin ich öfters auf Probleme gestoßen, die sich mit CSS1 und 2 gar nicht oder nur relativ umständlich lösen lassen.

Als Beispiel, wie CSS3 das Leben erleichtert möchte ich hier folgendes Beispiel zeigen:

Zebra tables

Um die Lesbarkeit von Tabellen zu erhöhen, werden die Zeilen abwechselnd mit 2 Farben eingefärbt. Benutzer von iTunes werden dieses Bild sofort erkennen. Die breiten Streifen helfen dem Auge sich entlang der Zeile zu bewegen.

Traditionell werden in solchen Tabellen die Tabellenzeilen jeweils abwechselnd mit 2 Klassen eingefärbt. Der Stylesheet sieht in der Regel so aus:

.odd  { background-color: inherit; }
.even { background-color: #e8f0f8; }

und die dazugehörige Tabelle sieht meist so aus:

<table>
<tr class="even"><td>foo</td></tr>
<tr class="odd" ><td>bar</td></tr>
<tr class="even"><td>baz</td></tr>
<tr class="odd" ><td>qux</td></tr>
</table>

Es ist natürlich lästig, die Classes bei jeder Zeile mitzuschleppen. In Skriptgenerierten Seiten ist das noch relativ einfach lösbar, wenn man jedoch Tabellen von Hand schreibt artet das schnell in Arbeit aus. Das Einfügen von Zeilen (bei ungeraden Anzahlen) ist bei längeren Tabellen nahezu undenkbar.

Es geht allerdings auch ohne Classes. CSS2 bietet sogenannte “adjacent sibling selectors”. Dazu muß man im HTML-Dokument überhaupt keine extra Vorkehrungen treffen. Die Tabelle könnte dann so aussehen:

<table>
<tr><td>foo </td></tr>
<tr><td>bar </td></tr>
<tr><td>baz </td></tr>
<tr><td>qux </td></tr>
<tr><td>quux</td></tr>
</table>

Damit nun die Zeilen abwechselnd eingefärbt werden, muß das dazugehörige Stylesheet so ausssehen:

tr+tr, tr+tr+tr+tr       { background-color: #e8f0f8; }
tr+tr+tr, tr+tr+tr+tr+tr { background-color: inherit; }

Natürlich hat auch diese Lösung ihre Probleme. Bei langen Tabellen werden die Stylesheets jedoch unerträglich unübersichtlich, außer man generiert das Stylesheet per Skript.

Wie Superman in seinem Strampelanzug kommt CSS3 hier zur Hilfe. Der nth-child Selektor erleichtert hier dem Designer das Leben. Die obere Tabelle läßt sich dann mit folgendem Stylesheet einfärben:

tr:nth-child(odd)  { background-color: inherit; }
tr:nth-child(even) { background-color: #e8f0f8; }

Das war’s. Keine unübersichtlichen Stylesheets, kein unnötiger Kram im HTML.

 

Border Images

Möchte man Blockelementen einen stylischen Rahmen verpassen, so muß man diese Elemente kunstvoll in Tabellen oder absolut positionierte <div>-Blöcke verpacken. (Ich verzichte hier auf Beispielcode, da dies nur zu einer HTML-Wüste führen würde) Dies bläht nur den DOM-Tree unnötig auf, ohne irgendwas zum Inhalt beizutragen.

CSS3 führt hier das Border-Module ein. Damit lassen sich für die 4 Kanten und Ecken eines Blocks Grafiken festlegen. Hierzu muß die Grafik in ihre Einzelteile zerlegt werden, sowie festlegen, wie diese Grafiken an die Größe des Blocks angepaßt werden. Als Beispiel möchte ich hier Zeigen, wie diese Rahmenteile benutzt werden könnten, um ein langweiliges Eingabefeld zu stylen. Der HTML-Code sieht erstmal völlig langweilig und unscheinbar aus:

<form method="get" action="foo.html">
<fieldset>
<label for="foo">foo:</label>
<input id="foo" name="foo" size="30" />
</fieldset>
</form>

Mit einem passenden Stylesheet wird nun diesem Eingabefeld ein modernes Design verpaßt. Die einzelnen Rahmenteile wurden nach den englischen Himmelsrichtungen benannt. (Ich habe in dem Beispiel einen möglicherweise schon vorhandenen Rahmen um das Eingabefeld außer Acht gelassen.)

input {
        border-top-left-image    : url("nw.png");
        border-top-image         : url("n.png") ;
        border-top-right-image   : url("ne.png");
        border-left-image        : url("w.png") ;
        border-right-image       : url("e.png") ;
        border-bottom-left-image : url("sw.png");
        border-bottom-image      : url("s.png") ;
        border-bottom-right-image: url("se.png");
        border-top-fit-length   : repeat;
        border-left-fit-length  : repeat;
        border-right-fit-length : repeat;
        border-bottom-fit-length: repeat;
      }

Wenn alles korrekt gelaufen ist, sollte dann das Eingabefeld von einem abgerundeten Rahmen eingefaßt sein. Da es bislang keine CSS3-fähigen Browser gibt, kann ich dieses Beispiel nicht nachprüfen. Das Bild ist nur eine Attrappe und zeigt, wie es aussehen sollte.

Ich hoffe, daß die Browser möglichst bald CSS3 unterstützen, um die Trennung von Markup und Design noch weiter voranzutreiben.