3.1 Das CSS-Konzept

Das Konzept von YAML basiert auf dem Baukastenprinzip. Die Stylesheets sind nach Funktion in mehrere separate Bausteine (CSS-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 Anpassungen (Hacks). Viele Hacks für den Internet Explorer machen Gebrauch von verschiedenen CSS-Parsing-Bugs, die den Internet Explorer dazu veranlassen, ungültige oder fehlerhafte CSS-Deklarationen zu akzeptieren. In den seltensten Fällen lassen sich bei Vermischung aus regulärem CSS und Hacks validierende Stylesheets erzeugen.

Der Anfang ist nicht bei Null

Bei der Layoutentwicklung mit YAML startet der Webdesigner nicht bei Null. YAML-Layouts basieren auf einem quasi "gestaltlosen" Layout-Rohbau.

Bei diesem Rohbau handelt es sich um ein flexibles 3-Spalten-Layout mit Kopf- und Fußzeile. Allerdings ist dieser Rohbau kein massiver, unverrückbarer Fels sondern so ausgelegt, dass er sich möglichst leicht und mit wenigen Handgriffen an die unterschiedlichsten Layoutanforderungen anpassen kann.

Gleichzeitig enthält dieser Rohbau bereits alle erforderlichen Browser-Hacks, um unabhängig vom späteren optischen Erscheinungsbild des fertigen Layouts eine browserübergreifend einheitliche Darstellung zu garantieren.

Im vorhergehenden Kapitel wurde der XHTML-Quelltext dieses Rohbaus bereits ausführlich beschrieben. Die folgenden Abschnitte beschäftigen sich mit der Ausgestaltung dieses Rohbaus mittels verschiedener CSS-Bausteine.

3.2 IE 5/Mac & Netscape 4

Veraltete BrowserDer Internet Explorer 5 für Macintosh und der Netscape Browser in der Version 4 haben eine Sonderstellung in der Unterstützung durch YAML.

Die Einbindung der einzelnen CSS-Bausteine erfolgt über ein zentrales Stylesheet (siehe Abschnitt 3.3: Das zentrale Stylesheet), in welchem alle für das Layout erforderlichen Bausteine über die @import-Regel eingebunden werden.

Des Weiteren werden innerhalb der CSS-Bausteine alle Eigenschaften medienspezifisch über die @media-Regel deklariert.

Sowohl der Internet Explorer 5/Mac als auch der Netscape-Browser der Version 4 können wenigstens eine der beiden Regeln nicht interpretieren und werden dadurch automatisch von sämtlichen CSS-Formatierungen ausgeschlossen. Die Inhalte der XHTML-Dateien werden daher unformatiert angezeigt. Weiterhin hat insbesondere der Netscape-Browser massive Probleme bei der Darstellung von CSS.

Die beiden Browser werden von YAML in der Weise unterstützt, dass sie bewusst von der fehlerhaften Interpretation der CSS-Formatierung ausgeschlossen werden. Die Inhalte bleiben damit vollständig nutzbar, werden jedoch lediglich im dem vom Browser vorgegebenen Standarddesign angezeigt, ähnlich wie das auch in Textbrowsern (z.B. Lynx) der Fall ist.

Kurz: Ja, Netscape 4 und IE5/Mac werden berücksichtigt, auch Nutzer dieser älteren Browser werden nicht von den Inhalten ausgeschlossen. In diesen beiden Browsern sehen die Seiten nur anders aus. Das ist alles.

Hinweis: In allen IE-Hacks werden die Belange des IE/Mac berücksichtigt, sodass eine erweiterte Unterstützung (Layout) des IE/Mac auf der Anwenderseite durch eine nachträgliche Zusammenführung der Stylesheets möglich ist.