Einsatz von Attributselektoren

Zu Beginn der Arbeit mit xhtml und CSS kann man schon zufrieden sein, wenn sich eine Webseite wie gewünscht, in den gängigen Browsern ohne Bugs auf dem Monitor zeigt und den Validatortest besteht.

Nach und nach kommt man jedoch drauf, dass Webseiten nach Webstandards etwas mehr sind. Eine Seite valide zu machen erscheint nach einer gewissen Zeit noch die einfachste Übung. Der feine Unterschied ist jedoch das Markup und die geschickte Verwendung der CSS-Regeln um sowohl das html als auch das CSS semantisch möglichst sinnvoll und kurz zu halten. Das gelingt jedoch nur, wenn man sich immer weiter in die Materie vertieft und auch Kleinigkeiten Beachtung schenkt. Und irgendwie finden sich doch immer noch etwas, was man verbessern kann – es nimmt kein Ende ;-)

Ein Beispiel : In diesem Blog gibt es ein Linkelement a, welches Nachfahre von p im div content ist. Dieses Link-Element hat ein Hintergrundbild, welches verdeutlichen soll, dass das Element anklickbar ist und dass man die aktuelle Seite verlässt.

Manchmal wird nach dem a-Element jedoch statt eines Textes ein Bild (img-Element) eingefügt. Da dies aber auch ein Link ist, wird ebenfalls das Hintergrundimage von a angezeigt, was erstens nicht so schön aussieht, zweitens verwirrend und drittens deswegen nicht erwünscht ist.

Man kann nun hergehen und beim Einfügen eines Bildes dem a Element eine Klasse zuschreiben, die besagt, dass in diesem Fall das Hintergrundbild weggelassen werden soll (background-image:none;). Das jedoch hat zur Folge, dass man beispielsweise die Bezeichnung a class=“ohnebild“ jedes Mal händisch eintragen muss. OK – Mit dem Quicktags-Plugin für WordPress kann man sich das etwas erleichtern, aber wozu, wenn es anders noch viel einfacher geht?

Im CSS sind Attributselektoren bekannt und verwendbar. Man kann also bestimmen, dass alle a, die das Attribut „title“ tragen kein Hintergrundbild erhalten sollen.

#content a[title]
{background-image:none;}

Dadurch spart man sich erstens lästige Tipparbeit und zweitens auch Code im Markup. (Ein bisschen zumindest ;-)

!! Nun ist aber so, dass man ja für Links ohne Bilder ebenfalls einen Title vergeben kann und dies auch tun sollte, wenn z.B. ein Linktext nicht aussagekräftig genug ist. Dann jedoch würde der Attributselektor a[title] auch bei Links ohne Bilder greifen und das in diesem Fall jedoch erwünschte Hintergrundbild entfernen.

Damit gemau das nicht passiert, kann man den Attributselektor noch erweitern. Für Linkelemente a, auf die im Markup ein img-Element folgt, kann man im Title ein für alle gleiches Wort vergeben, zum Beispiel: „Abbildung“. Im CSS notiert man dann

#content img[title~=“Abbildung“]
{background-image:none;}

Wird dann im title-Attribut eines Linkelementes a das Wort Abbildung gefunden, wird kein Hintergrundbild eingefügt.

Auf diese Weise könnte man auch über das „alt“ Attribut der Darstellung von Bildern bestimmte Eigenschaften zuordnen. Enthält das alt-Attribut z.B. das Wort „Rembrandt“ (weil’s beispielsweise ein Bild von Rembrandt ist) könnte es einen roten Rahmen bekommen, enthält es „Picasso“ einen gelben.

(Und jetzt müsste ich „nur“ noch in diesem Blog mal meine eingefügten Bilder überarbeiten und damit den Klassensalat aus dem CSS entfernen … Wuäääh ;-/)