Wie die Zeit vergeht – schon vor 17 Jahren wurden die Vorläufer der so genannten Cascading Stylesheets (kurz: CSS) entwickelt. Es handelt sich hierbei um eine Art Design-Programmiersprache, in der sämtliche Eigenschaften des Layouts einer Internetseite en bloc definiert werden können. Das Besondere an dieser Sprache ist, dass eine CSS-Datei unabhängig vom eigentlichen Inhalt, also dem HTML-Code der Internetseite, abgespeichert wird.
Der Bedarf für Stylesheets entstand, weil Mitte der 90-er Jahre durch die zunehmende Weiterentwicklung der HTML-Standards immer mehr gestalterische Möglichkeiten aufkamen, deren Umsetzung jedoch zugleich den HTML-Code unübersichtlich machte. Form und Inhalt voneinander zu trennen, war also das Postulat der Zeit.
In dem Stylesheet werden die Regeln definiert, wie bestimmte, wiederkehrende Elemente eines Webseitenlayouts behandelt werden, also Textüberschriften, Absätze, aber auch Bilder und Grafiken. Das ermöglicht es, eine bestimmte Internetseite quasi auf Knopfdruck in unbegrenzt vielen verschiedenen Layoutvarianten anbieten zu können. Der Inhalt muss nur einmal generiert werden und das Layout variiert je nachdem, welches Stylesheet gerade aktiviert ist. Ein schönes Beispiel für die vielfältigen Möglichkeiten, die das Prinzip der Cascading Stylesheets bietet, zeigt der CSS-Zen-Garten unter www.csszengarden.com.
Webdesigner stellen hier ihre aufwändig und mit Liebe zum Detail gestalteten Stylesheets kostenlos zur Verfügung. Auf der Startseite rechts befindet sich eine vertikale Navigation. Wählen Sie dort ein beliebiges CSS aus, zum Beispiel „Under the Sea“ – es zeigt sich nun eine Website in opulenter Tiefseeoptik. Ein Klick auf ein anderes CSS – und schon ist dieselbe Internetseite zu sehen, aber in einem völlig anderen Layout. Alle gezeigten Layouts lassen sich als CSS-Datei kostenlos herunterladen und für private Zwecke einsetzen. Eine beeindruckende Werkschau, die aufzeigt, wie mit einfachen programmiertechnischen Mitteln auch komplexe Layouts umgesetzt werden können.
{ 0 Kommentare... }