Webstandard & Webdesign - CSS, HTML

 

CSS Selektoren, eine vergessene Spezies?

Sie gibt es bereits seit Jahren, genauer gesagt seit CSS1 und der Entwurf seitens des W3C wurde 1996 veröffentlicht. Die Rede ist von CSS Selektoren, genauer gesagt von den beiden Pseuo-Elementen :first-letter und :first-line. Für die meisten bietet diese Information nichts neues. Warum nur, werden sie dann nur so selten eingesetzt? In den wenigesten Fällen eines Webseitenentwurfes wird Text ohne jegliche gestalterischen Eigenschaften zurückgelassen. Das heißt, entweder sorgen typografische Raffinessen oder grafische Elemente für eine besondere Gestaltung von Textinhalten. Warum nur, werden dann all zu oft zusätzliche HTML-Elemente wie bspw. ein span- oder b-Tag mit dieser Aufgabe beauftragt? Wozu zusätzlichen HMTL-Code anlegen, wenn die Aufgabe genauso elegant von den beiden angesprochenen Pseuo-Elementen erledigt werden kann?

An der mangelnden Unterstützung seitens der Browser kann es nicht wirklich liegen, da ihre Fähigkeiten bereits von der 5.5er Version des Internet Explorer unterstützt werden und dieses Ausschlußkriterium somit entfällt. Auch ihre eventuell vermutbaren begrenzten Fähigkeiten können es nicht sein. Denn diese gehen weit über eine eventuelle Vergrößerung der Schriftgröße hinaus. Also, nur Mut zu den Pseudo-Elementen :first-letter und :first-line! Wer jetzt noch zusätzliche Informationen über die Fähigkeiten benötigt, kann diese selbstvertsändlich gern an dieser Stelle bekommen.

Pseudo-Element :first-letter

Das erste Zeichen eines Textes erhält die CSS-Eigenschaften die diesem Pseudo-Element zugewiesen werden. Hierbei kann es sich u.a. um folgende Eigenschaften handeln.

• sämtliche Schrift-Eigenschaften (font, line-height, text-decoration)
• sämtliche Farb- und Hintergrund-Eigenschaften (color, background)
• alle Eigenschaften bezüglich Innen- und Außenabstände (padding, margin)
• alle Rahmeeigenschaften (border)
• clear und float Eigenschaften

Ein aus dem Print-Medium bekanntes Mittel zum hervorheben eines bestimmten Textbereiches, ist eine Initiale, ein sogenannter Schmuckbuchstabe. Dieser steht meistens zu Beginn eines Absatzes. Eine Initiale auch Majuskel genannt, kann sich größenmäßig über mehrere Zeilen erstrecken bzw. ihr Schriftgrad kann um das Vielfache größer sein als der der Grundschrift. Sehr ansehnliche Beispiele hierfür bietet der aktuelle Artikel Drop Caps 101 von Armen Thomassian.

Pseudo-Element :first-line

Die erste Textzeile eines Textes erhält die CSS-Eigenschaften die diesem Pseudo-Element zugewiesen werden. Hierbei kann es sich u.a. um folgende Eigenschaften handeln.

• sämtliche Schrift-Eigenschaften (font, line-height, text-decoration, inkl. word- und letter-spacing)
• sämtliche Farb- und Hintergrund-Eigenschaften (color, background)
• alle Eigenschaften bezüglich Innen- und Außenabstände (padding, margin)
• clear Eigenschaften

Auch wenn die Möglichkeiten der Gestaltung hier nur aufgelistet sind, ist zu erkennen das die Einsatzgebiete hierfür vielfältig sind. Sie können somit die indivduellesten Erscheinungsbilder erstellen und das ganz ohne zusätzlichen HTML-Code. Das es mit diesen beiden Elementen nicht das Ende des Fahnenstange erreicht ist, zeigen die neueren Pseudo-Klassen :after, :before: und :first-child die seit CSS 2.1 zur Verfügung stehen. Deren Unterstützung seitens des IE, beginnt allerdings erst bei der Version 7 bzw. 8. Abhilfe kann diesbezüglich ein kleines Script von Dean Edwards schaffen. Mit diesem ist es möglich, u.a. diese Pseudo-Klassen für die älteren IE-Versionen zugängig zu machen. Was den ein oder anderen vielleicht noch mehr freuen wird, ist das es auch dabei hilft alphatransparente PNG-Grafiken korrekt im IE6 und kleiner darzustellen. Wer mehr über Tipps und Tricks im Umgang mit CSS Selektoren erfahren möchte, wird im Buch "CSS-Design. Die Tutorials für Einsteiger" fündig.