3.3 Das zentrale Stylesheet
Das CSS-Konzept von YAML basiert, wie gerade besprochen, auf dem Baukastenprinzip sowie auf der Kaskade. Die CSS Bausteine sind nach Funktion (Positionierung der Layoutelemente, Formatierung der Inhalte usw.) aufgeteilt.
Das folgende Diagramm zeigt die Funktion der einzelnen innerhalb des YAML-Frameworks verfügbaren Bausteine und deren Bedeutung.
Für jedes YAML-basierte Layout existiert ein solches zentrales Stylesheet, welches alle für das Layout benötigten Bausteine (Grundbausteine, Screenlayout, Navigation, Druckvorlagen) einbindet. Ein vollständiges Layout setzt sich also immer aus mehreren dieser Bausteine zusammen. Diese Trennung nach Funktionen erleichtert die Bearbeitung und verbessert die Übersichtlichkeit.
Wie erfolgt nun der praktische Umgang mit YAML?
Einbindung & Import der CSS-Bausteine
Auch der Aufbau des zentralen Stylesheets - und damit die Einbindung von YAML in eigene Projekte - lässt sich am einfachsten anhand eines Beispiels erläutern.
Hinweis: Kopieren Sie sich den Ordner yaml aus dem Download-Paket auf Ihren Server in die gleiche Verzeichnisebene, in der sich auch Ihr css-Ordner befindet. Diese Trennung zwischen Ihren eigenen CSS-Dateien und den Dateien des Frameworks sollten Sie beibehalten, um Updates einfach einspielen zu können.
Die Einbindung des Layouts in den (X)HTML-Quelltext erfolgt über ein sogenanntes zentrales Stylesheet, welches üblicherweise über das link Element im HTML-Header der Webseite integriert wird.
<head>
...
<link href="css/layout_3col_standard.css" rel="stylesheet" type="text/css"/>
...
</head>
Dieses zentrale Stylesheet enthält Ihr Layout und sollte sich daher in Ihrem css-Ordner befinden. Innerhalb dieses Stylesheets werden die für das jeweilige Layout benötigten CSS-Bausteine über die @import Regel eingebunden.
/* import core styles | Basis-Stylesheets */
@import url(../yaml/core/base.css);
/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css);
/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_003_draft.css);
Wie Sie erkennen, wird zunächst das Basis-Stylesheet base.css des YAML-Frameworks eingebunden. Es wird direkt aus dem Ordner yaml/core/ geladen.
Im zweiten Schritt wird das Screenlayout zusammengesetzt. Dabei wird in diesem Beispiel ein Stylesheet für die Navigation (nav_shinybuttons.css) geladen. Dieses soll unverändert verwendet werden, daher erfolgt wiederum der Zugriff direkt auf den Ordner yaml. Das Screenlayout und die Gestaltung der Inhalte legen Sie selbst fest. Daher sollten diese Dateien in Ihrem eigenen css-Ordner abgelegt werden.
Im dritten und letzten Schritt folgt der Einbau des Drucklayouts. Auch hierbei bietet YAML vorgefertigte Bausteine. In diesem Beispiel wird einer dieser CSS-Bausteine für die Bereitstellung eines Printlayouts (die Datei print_003_draft.css) ohne Anpassungen aus dem Ordner yaml/print/ verwendet.
Wichtig: Das Grundprinzip, die Trennung der eigenen CSS-Dateien von den YAML-Dateien, bietet viele Vorteile und hat sich in der Praxis bestens bewährt.
Wollen Sie Änderungen an einzelnen Dateien des Frameworks vornehmen oder mit einer der Dateivorlagen aus dem Framework arbeiten, legen Sie sich eine Kopie der betreffenden Datei in Ihrem css-Ordner an und arbeiten Sie nicht mit dem Original.
Bausteine, die Sie unverändert einsetzen, importieren Sie hingegen direkt aus dem yaml-Ordner in Ihr Layout. Beim Einspielen von Updates des Frameworks müssen Sie dann nur noch den yaml-Ordner austauschen.
Anpassungen für den Internet Explorer
Mit der Einbindung des zentralen Stylesheets in den (X)HTML-Quelltext sind alle modernen Browser (Firefox, Safari, Opera, usw.) versorgt. Lediglich der Internet Explorer benötigt zusätzliche CSS-Anpassungen zur fehlerfreien Darstellung YAML-basierter CSS-Layouts. Diese werden im (X)HTML-Quelltext über einen so genannten Conditional Comment bereit gestellt.
<head>
...
<!--[if lte IE 7]>
<link href="css/patches/patch_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
Dies ist ein spezieller Kommentar, welcher ausschließlich vom Internet Explorer verstanden und ausgewertet wird. Er ermöglicht es, nur dem Internet Explorer ein weiteres, speziell auf das jeweilige Layout angepasstes Stylesheet zu übergeben. Im vorliegenden Beispiel ist dies die Datei patch_3col_standard.css, welche alle CSS-Hilfestellungen für den Internet Explorer liefert.
Näheres zu deren Funktion erfahren Sie im Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer. Für alle anderen Browser ist dies hingegen ein normaler HTML-Kommentar, daher ignorieren sie dessen Inhalt.
