CSS
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links | Archiv   Letzte Änderungen 21.08.2019
     
Inhaltserzeugung mit CSS

von Thiemo Fetzer

CSS 2 hat etliche noch kaum bekannte Stärken. So können Sie sogar "dynamisch" Inhalte erzeugen und formatieren.

Unterstützt werden diese neuen CSS-2-Pseudoklassen bisher nur vom Netscape Navigator 6 und 7. Doch werden die restlichen Browser in den nächsten Versionen bestimmt nachziehen.

CSS 1 konnte Inhalte formatieren und komplett anders darstellen als HTML. CSS 2 ist um einiges stärker ausgedehnt als CSS 1. Mit CSS 2 kann ein Eingriff in den Inhalt gemacht werden.
Mit zwei neuen Pseudoklassen ist es möglich, Inhalt zu erzeugen. Die Syntax entspricht der der anderen Pseudoklassen wie :hover, :visited usw. Zunächst kommt das Element oder die Klasse, dann der Inhalt. Die Pseudoklasse :before setzt den erzeugten Inhalt vor das Element, die Pseudoklasse :after hinter das Element.

Ein Beispiel

<style type="text/css">
p:before {content: 'Inhalt: '}
p:after {content: 'Und wenn Sie nicht gestorben sind...'}
</style>


Bei diesem Beispiel wird jedem Blocksatz, also jedem <p>-Element, der Text "Inhalt:" vorangestellt und am Ende die Zeile "Und wenn Sie nicht gestorben sind..." angefügt.
Wie das Ganze geht, ist eigentlich schnell erkannt. Eine praktische Anwendung ist z.B. die Arbeit mit logischen Textauszeichnungen.
Das <code></code> Element zeichnet z.B. den Quellcode irgendeiner Programmiersprache aus. Mit der Inhaltserzeugung von CSS 2 können Sie dieser Auszeichnung die Eigenschaft geben, dass dem Element immer ein "Quellcode" vorangestellt wird, dass der Code also immer mit "Quellcode:" beginnt.

<style type="text/css">
code:before {content: 'Quellcode: '}
</style>


Auch bei der Auszeichnung <samp></samp> macht dies Sinn. Dieses Element zeichnet ein Beispiel aus. Diesem können Sie z.B. sagen, dass ihm immer ein "Beispiel: " vorangestellt wird.

<style type="text/css">
samp:before {content: 'Quellcode: '}
</style>


Den angefügten Inhalt können Sie natürlich mit CSS beliebig formatieren. Der angefügte Text bei dieser Klasse soll z.B. nur in Großbuchstaben, fettgedruckt und rot dargestellt werden.

<style type="text/css">
.wichtig:before {content: 'Wichtig '; color: red; text-transform: uppercase; font-weight: bold}
.wichtig:after {content: 'Wichtig '; color: red; text-transform: uppercase; font-weight: bold}
</style>



Mit CSS erzeugter Inhalt...
Mit CSS erzeugter Inhalt...

(tf)