Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Splintered striper - Streifen machen schlank

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Splintered striper - Streifen machen schlank

Im März 2004 demonstrierte David F. Miller ein wenig DOM Skripting Magie in seinem A List Apart Artikel Zebra Tables.

Sein Skript fügt zwei abwechselnde CSS Hintergrundfarben in Tabellenzeilen ein, um diese damit lesbarer und ästhetischer zu machen, und erspart dem Author des Dokumentes die mühevolle Aufgabe, große statische Tabellen dementsprechend per Hand zu stylen.

Obwohl Davids Originalskript seine Arbeit gut ausführt, ist es dennoch in der Anwendung äußerst spezifisch und beschränkt:

  • Es funktioniert nur für eine einzige Tabelle, die mittels id Attribut identifiziert wird und mindestens eine tbody Sektion beinhalten muß.
  • Es kann nur Hintergrundfarben setzen.
  • Es sind nur zwei Farben für gerade und ungerade Zeilen erlaubt.
  • Es wirkt auf Datenzellen, anstatt Zeilen, und auch nur dann, wenn noch keine class oder Hintergrundfarbe definiert ist.

Einen Schritt weiter

In einem meiner Projekte mußte ich vor kurzem einer ungeordneten Liste einen gestreiften Effekt verleihen. Anstatt einfach den Zebra Tables Code für diesen speziellen Fall zu modifizieren, entschloß ich mich, das Skript komplett neu zu schreiben, um es genereller zu machen.

Da das splintered striper Skript nun etwas mehrzweckiger ist, wurde meine Funktion zwangsweise etwas komplexer. Im Gegensatz zum Originalskript, welches nur einen einzigen Parameter brauchte (die ID der Zieltabelle), wird die neue Funktion wie folgt aufgerufen:

striper('[Elternelement Tag]','[Elternelement Klasse oder null]','[Kindelement Tag]','[komma-getrennte Klassenliste]')

Diese neue, relativ selbsterklärende Funktion:

  • wirkt auf jede Art von Elternelement (und, falls man es spezifiziert hat, nur auf jene mit einer bestimmten Klasse),
  • setzt den Kindelementen innerhalb der Elternelemente zwei oder mehr Klassen (anstatt nur zwei Hintergrundfarben),
  • lässt jegliche Klassen, die schon an die Kindelemente vergeben wurden, intakt.

Das Skript in Aktion

Die Demoseite zeigt drei Anwendungsbeispiele. Der Einfachheit halber rufen wir die striper Funktion direkt vom onload Attribut im body auf. In einer echten Produktionssituation würden wir das Skript an den onload Handler anhängen; da wir verschiedene Variablen an die striper Funktion weitergeben müssen, würde das ungefähr so aussehen:

window.onload = function() { striper('tbody','gestreift','tr','ungerade,gerade'); }

Danke an einen anderen Patrick für diese Verfeinerung meines Originalskripts, in dem ich ursprünglich eine Wrapper-Funktion vorgeschlagen hatte.

Abschließende Gedanken

Das Skript ist für Situationen gedacht, in denen wir ein großes statisches Dokument nachträglich im Browser stylen möchten; falls das Dokument aber dynamisch mittels serverseitiger Skripte generiert wird, macht es natürlich mehr Sinn, die verschiedenen Klassen dort zu setzen.

Nur weil ich die Funktion striper nenne, heißt das nicht, daß sie nur auf Streifenmuster begrenzt ist; da es sich hier eher um ein generelles Skript zur "abwechselnden Klassen-Verleihung" handelt, kann man damit eine ganze Reihe verschiedener Effekte erzeugen.

Wie sieht es mit der Barrierefreiheit aus? Obwohl wir Javascript einsetzen, betrifft das Ergebnis nur die Präsentation und nicht die Funktionalität. Solange die Eltern- und Kindelemente schon ausreichend gestylt sind, macht es für die Barrierefreiheit keinen großen Unterschied, ob das Skript ausgeführt wird oder nicht.

In der (nicht zu fernen) Zukunft können wir uns hoffentlich das ganze Palaver mit dieser Art von Skripten sparen: wenn Browser die CSS 3-Spezifikation implementieren, werden wir diese Probleme viel eleganter mit dem nth-child Pseudo-Selektor lösen können. Aber bis es endlich soweit ist, können wir ruhig ein wenig DOM-Skripting verwenden, um Browser auf die Sprünge zu helfen.

Kommentare

Nico Kaiser
am 21.12.2005 - 10:00

Oh, auf der Demoseite ist irgendetwas ganz Schlimmes mit den "ss" passiert:

"daß", "Klaßen", "verbeßert", "klaßisch"...

Permanenter Link

Jens Grochtdreis
am 21.12.2005 - 11:37

Die darfst Du alle behalten :-)

Permanenter Link

Michel
am 21.12.2005 - 13:01

Webkrauts gegen neue Rechtschreibung? ;) (dagegen)

Danke für diesen Artikel, dürfte ein sehr sehr praktisches Script sein :D

Permanenter Link
Patrick Lauke

Patrick Lauke (Autor)
am 21.12.2005 - 13:50

"Webkrauts gegen neue Rechtschreibung"

nein nein, nur mein grausiges deutsch ist daran shuld. haette doch eher die schweizer attituede nehmen sollen und ueberhaupt kein scharfes "s" benutzen...

Permanenter Link

Harald Kampen
am 21.12.2005 - 17:02

Interessante Anregung. In einem CMS könnte man sowas auch Hartccodieren.

Permanenter Link

Die Kommentare sind geschlossen.