Webkrauts: Für mehr Qualität im Web.

Artikel

Splintered striper – Streifen machen schlank

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.

Zum Autor

Patrick H. Lauke ist Webmaster an einer kleinen englischen Universität, arbeitet nebenbei als freier Webdesigner und Entwickler und ist ein Mitglied der WaSP Accessibility Task Force.

Info:

Splintered striper – Streifen machen schlank ist Beitrag Nr. 33

Autor:

Patrick Lauke am 21. Dezember 2005 um 22:00

Kategorie:

Adventskalender 2005

Kommentare

Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.

1. 1.
   

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

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

   Kommentar von Nico Kaiser - 21. Dezember 2005 um 10:00

2. 2.
   

   Die darfst Du alle behalten

   Kommentar von Jens Grochtdreis - 21. Dezember 2005 um 11:37

3. 3.
   

   Webkrauts gegen neue Rechtschreibung? (dagegen)

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

   Kommentar von Michel - 21. Dezember 2005 um 13:01

4. 4.
   

   "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…

   Kommentar von patrick h. lauke - 21. Dezember 2005 um 13:50

5. 5.
   

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

   Kommentar von Harald Kampen - 21. Dezember 2005 um 17:02

Kommentar-Feed für diesen Beitrag

Die Kommentarfunktion ist zur Zeit leider deaktiviert.