3.1 Das CSS-Konzept
Das CSS-Konzept von YAML basiert auf dem Baukasten-Prinzip sowie auf der Kaskade. Die CSS-Definitionen des Basislayouts sind nach Funktion in mehrere separate CSS-Bausteine (Dateien) aufgeteilt
- Positionierung der Hauptbereiche der Webseite (Header, Footer, Spalten)
- Screenlayout: Gestaltung der Hauptbereiche
- Formatierung der Inhalte
- Gestaltung von Navigationselementen
- Druckvorlagen
Das fertige Layout setzt sich anschließend aus mehreren dieser Bausteine zusammen. Diese Trennung nach Funktionen erleichtert die Bearbeitung und verbessert die Übersichtlichkeit.
Weiterhin erfolgt eine strikte Trennung von regulärem CSS und speziell für den Internet Explorer erforderlichen Anpassungen (Bugfixes für CSS-Bugs). Viele dieser Bugfixes für den Internet Explorer machen Gebrauch von den ebenso zahlreichen Parser-Bugs, die den Internet Explorer dazu veranlassen, ungültige oder fehlerhafte CSS-Deklarationen dennoch zu akzeptieren.
In den seltensten Fällen lassen sich jedoch bei Vermischung von regulärem CSS und den IE-Bugfixes validierende Stylesheets erzeugen. Zudem stören sie in der Regel die Übersichtlichkeit im CSS. Eine Zusammenfassung der Anpassungen in eine spezielle Datei ermöglicht zugleich einen besseren Überblick bezüglich der einzelnen IE-Browserversionen, welche zum Teil unterschiedliche Hilfestellungen benötigen.
Einsatz der Kaskade
Neben der thematischen Gliederung der Stilzuweisungen in verschiedene CSS-Bausteine wird innerhalb von YAML an vielen Stellen intensiv von der CSS-Kaskade Gebrauch gemacht.
Über die Kaskade entscheidet der Browser, welche CSS-Eigenschaften für die Darstellung eines Elements relevant ist. Diese Kaskade ist in 4 Stufen unterteilt:
- Stufe 1: Herkunft der Deklarationen
(Browser-, Autoren-, Benutzer-Stylesheet) - Stufe 2: Sortierung nach Ursprung und Gewicht
- Stufe 3: Sortierung nach Spezifität der Selektoren
- Stufe 4: Sortierung nach der Reihenfolge des Auftretens
Über die CSS-Grundbausteine (base.css und iehacks.css) wird dem Seitenersteller ein dreispaltiges Basislayout als Grundlage für die Layouterstellung zur Verfügung gestellt. Diese Stylesheets werden in jedem YAML-basierten Layout eingebunden und bleiben immer unverändert.
Das Basislayout kann dann durch gezieltes Überschreiben von Stil-Deklarationen modifiziert und durch Ergänzung von Eigenschaften gestaltet werden. Alle Eingriffe (Gestaltung & Modifikation) des Seitenerstellers erfolgen in gesonderten Stylesheets. Auf diese Weise bleibt YAML als stabile Basis auf unterster Ebene immer vorhanden.
3.2 Namenskonventionen
Innerhalb der Dokumentation, sowie bei der Benennung von Dateien und Verzeichnissen des Frameworks werden immer wieder bestimmte Bezeichnungen verwendet, deren Bedeutung hier kurz erläutert werden soll.
Grundbausteine (core-Dateien)
Die core-Dateien bilden den Kern - oder das Fundament - des YAML-Frameworks und befinden sich im Ordner yaml/core/.
Sie stellen die Funktionalität des Frameworks bereit und sind für die browserübergreifend einheitliche Darstellung des Layouts verantwortlich. Sie bilden daher die Grundbausteine jedes YAML-basierten Layouts und werden in jedem Fall benötigt.
Ergänzungsbausteine
YAML basiert auf der Ausnutzung der Kaskade. Die eigentliche Layoutgestaltung erfolgt über die Modifikationen des von YAML bereit gestellten Basislayouts. Hierfür stellt YAML einige vorgefertigte CSS-Bausteine (z.B. Navigationsbausteine) sowie Vorlagen für oft benötigte Bausteine (z.B. das Screenlayout) zur Verfügung. Diese Bausteine sind funktional gegliedert:
- Screenlayout - screen/
- Printlayout - print/
- Navigation - navigation/
Bei unverändertem Einsatz, sollten sie direkt aus dem Ordner yaml/ in das Layout importiert werden. Eigene Stylesheets oder Modifikationen dieser Bausteine sollten hingegen im eigenen css-Ordner verwaltet werden.
Patches
Eine Patch-Datei fasst alle notwendigen CSS-Anpassungen für den Internet Explorer in einer CSS-Datei zusammen. Diese wird über einen Conditional Comment in den (X)HTML-Quelltext eingebunden und sorgt somit für die fehlerfreie Darstellung des Layouts.
Dateivorlagen
YAML stellt für oft benötigte Bausteine Dateivorlagen zur Verfügung. Diese Vorlagen sind an der Endung des Dateinamens *_draft.* erkennbar.
Für die praktische Arbeit mit YAML kopieren Sie sich die Vorlagen, mit denen Sie arbeiten wollen, in Ihren css-Ordner und benennen sie um.
