Inhaltserzeugung mit CSS CSS 2 hat noch so einige kaum bekannte Stärken. So können Sie sogar "dynmisch" Inhalte erzeugen, und diese dann auch formatieren.

CSS 1 konnte Inhalt 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 Pseudo Klassen ist es möglich, Inhalt zu erzeugen. Die Syntax hierfür ist wie bei den anderen Pseudoklassen, wie :hover, :visited usw. Zunächst kommt das Element, oder die Klasse, und dann der Inhalt. Die Pseudoklasse :before fügt den erzeugten Inhalt vor das Element, die Pseudoklasse :after hintver 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. hierbei 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, das dem Element immer ein "Quellcode" vorangestellt wird, das 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, das ihm immer ein "Beispiel: " vorangestellt wird.

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


Es gibt mit dieser neuen CSS Eigenschaften so viele Möglichkeiten, die man gar nicht auf einmal entdecken kann. Diesen angefügten Inhalt können Sie natürlich auch 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...


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

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: