2.4 Der Aufbau des XHTML-Quelltextes
Das Ziel des YAML-Frameworks besteht darin, ein universell einsetzbares, browserübergreifend voll funktionsfähiges Layout zu liefern indem die dafür erforderlichen XHTML-Strukturen unabhängig von den späteren Inhalten bereitgestellt werden. Im Speziell bedeutet das, dem Seitenersteller größtmögliche Freiheiten bei der Wahl fixer oder flexibler Layouts bzw. Spaltenbreiten zu lassen. Weiterhin soll auch ein gewisser Komfort geboten werden, weshalb oft benötigte Elemente vordefiniert sind bzw. gestalterische Erfordernisse in der Struktur berücksichtigt werden.
Das Ergebnis ist eine universelle Quelltext-Struktur, die ohne Änderungen im zugrunde liegenden Markup eine Vielzahl an Modifikationsmöglichkeiten per CSS bietet. Die Quelltext-Struktur liegt dem Download-Paket als inhaltsleere HTML-Datei bei.
Wahl des Doctypes
Für die vorliegende Quelltextstruktur wurde der Doctype XHTML 1.0 Transitional gewählt. Grundsätzlich obliegt die Entscheidung über den Doctype bei Ihnen. Sie können also ebenso eine Strict-Variante von XHTML verwenden oder beispielsweise mit HTML 4.01 arbeiten, falls dies Ihre Inhalte erfordern sollten.
- Standard Mode
In diesem Darstellungsmodus interpretiert der Browser (X)HTML so, wie es vom W3C definiert wird. Bei Fehlern im (X)HTML-Code kommt es schnell zu schwerwiegenden Darstellungsfehlern. Für fehlerfreie Seiten besteht in diesem Darstellungsmodus jedoch größtmögliche Sicherheit für ein browserübergreifend einheitliches Erscheinungsbild einer Webseite.
- Quirks Mode
In diesem Darstellungsmodus ist der Browser deutlich fehlertoleranter und wird versuchen, unter allen Umständen eine brauchbare Webseite anzuzeigen. Dieser Modus wird in allen Browsern automatisch verwendet, wenn kein oder ein sehr alter Doctype (oder auch ein falsch geschriebener) im HTML-Dokument vorgegeben wird. Der Internet Explorer 5.x kennt übrigens nur diesen Darstellungsmodus.
Entscheidend für die korrekte Darstellung des Layouts - insbesondere im Internet Explorer - ist letztlich der durch den gewählten Doctype im Browser aktiverte Darstellungsmodus. Alle CSS-Bausteine von YAML, einschließlich der CSS-Anpassungen für den Internet Explorer sind darauf ausgerichtet, dass sich der Browser in einem standardkonformen Darstellungsmodus (Standard Mode) befindet.
Die Struktur im Detail
Lassen Sie uns nun einen Blick auf das Fundament des YAML-Frameworks werfen. Hier ein Auszug der Datei markup_draft.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head> ... </head>
<body>
<div class="page_margins">
<div class="page">
<div id="header"> ... </div>
<div id="nav"> ...</div>
<!-- begin: main content area #main -->
<div id="main">
<!-- begin: #col1 - first float column -->
<div id="col1">
<div id="col1_content" class="clearfix">
...
</div>
</div>
<!-- begin: #col2 - second float column -->
<div id="col2">
<div id="col2_content" class="clearfix">
...
</div>
</div>
<!-- begin: #col3 static column -->
<div id="col3">
<div id="col3_content" class="clearfix">
...
</div>
<!--
IE Column Clearing -->
<div id="ie_clearing"> </div>
</div>
<!-- end: #main -->
</div>
<!-- begin: #footer -->
<div id="footer"> ... </div>
</div>
</div>
</body>
</html>
Der äußerste DIV-Container .page_margins regelt in erster Linie die Gesamtbreite des Layout. Er umfasst alle weiteren Container, daher kann die Layoutbreite bzw. die maximale und minimale Breite eines flexiblen Layouts an dieser Stelle festgelegt werden.
Weiterhin kann der Container zusammen mit dem Container .page für die Bereitstellung von grafischen Layouträndern verwendet werden, doch dazu später mehr. Beiden Containern wird im IE die proprietäre Eigenschaft hasLayout zugewiesen, zur Vermeidung verschiedener CSS-Bugs (z.B. Escaping Floats Bug bei Verwendung horizontaler Menüs auf float-Basis). Weitere Informationen finden Sie in Abschnitt 3.5: CSS-Anpassungen für den Internet Explorer.
Es folgen die Container für den Kopfbereich #header, die Hauptnavigation #nav sowie der Hauptinhaltsbereich #main mit seinen drei Spalten. Den Abschluss bildet, wie zu erwarten, der #footer welcher die Inhalte der Fußzeile aufnimmt.
Der im Quelltextauszug rot markierte Bereich des IE Column Clearings ist eine Besonderheit von YAML. Die Bedeutung und Wirkungsweise dieses Containers wird im Abschnitt 2.7: Das Clearing von #col3 dieses Kapitels ausführlich besprochen.
Das folgende Beispiellayout demonstriert das auf dieser Grundlage entstehende Dreispaltenlayout:
examples/01_layouts_basics/3col_standard.html
Hinweis: Seit Version 3.1 des YAML-Frameworks ist .page_margins eine CSS-Klasse, um die Mehrfachverwendung zu ermöglichen. In allen früheren Versionen wird die ID #page_margins verwendet, welche diese Möglichkeit nicht zulässt.
Variationen des Markups
Wie eben bereits deutlich wurde, regeln die beiden CSS-Klassen .page_margins und .page das grundsätzliche Erscheinungsbild des Layouts, indem Sie die Gesamtbreite und ggf. umlaufende Randabstände, Rahmen oder Hintergründe festlegen.
Bei der oben dargestellten Quelltextstruktur umschließt .page_margins als äußerster DIV-Container alle anderen Elemente der Webseite. Im Ergebnis dessen entsteht ein Layout, welches vereinfacht einer rechteckigen Box vor einem Hintergrund (<body>) entspricht. Nicht in jedem Fall ist diese Optik gewünscht.
Alternativ dazu lassen sich durch Mehrfachverwendung der Klassen .page_margins und .page auch Layouts erstellen, deren Hintergrundfarbe/-grafik sich horizontal über den gesamten Viewport erstreckt und nur die eigentlichen Inhalte sich innerhalb eines Rechtecks mit definierter Breite befinden. Folgendes Layoutbeispiel demonstriert den Effekt:
examples/07_layouts_advanced_2/fullpage_3col.html
Zur Realisierung dieser optischen Wirkung wird Schachtelungsreihenfolge des Markups verändert. Hier exemplarisch ein Auszug für das Markup des Kopfbereiches des Layouts (Header):
<div id="header">
<div class="page_margins">
<div class="page">
...
</div>
</div>
</div>
Während im Standard-Markup der Container .page_margins alle Elemente umschließt, wurde in diesem Beispiel die Verschachtelung dahingehend geändert, dass #header als äußerster Container fungiert und .page_margins lediglich dessen Inhalte umschließt und somit dessen Breitenvorgaben auch nur auf die Inhalte wirken. Der Container #header selbst spannt ohne explizite Breitenvorgabe automatisch über die gesamte Breite des Viewports und kann daher unmittelbar zur grafischen Gestaltung des Kopfbereiches genutzt werden.
Sie können diese Modifikation wahlweise auf jedes Grundelement Ihres Layouts (Header, Navigation, Main, Footer) anwenden oder auch nur auf einzelne Bereiche, während Sie die restlichen Elemente wie im Standardmarkup von einem gemeinsamen Elterncontainer .page_margins umschließen lassen. Und wie im Standardmarkup legen Sie einzig und allein durch die Breitenvorgabe für .page_margins die Gesamtbreite Ihres Layouts fest. Wie Sie bereits jetzt erkennen können, ist das (X)HTML-Grundgerüst ausgesprochen flexibel einsetzbar.
Gestaltungsfreiheit durch das Kombinationsmodell
Das Box-Modell, wie es seit CSS 1 existiert, ist eindeutig auf die Arbeit mit fixen Maßeinheiten (z.B. Pixelmaßen) ausgelegt. Die Gesamtbreite eines Containers wird über die Addition der einzelnen Bestandteile des Modells (width, padding, border) bestimmt.
Bei der Mischung von Maßeinheiten (z.B. width:25%; padding: 0 10px;) innerhalb eines Containers ist es jedoch nicht mehr möglich, die Gesamtbreite der Box vorab rechnerisch zu ermitteln. Die Gestaltungsfreiheit bei der Erstellung flexibler Layouts ist damit von vorn herein eingeschränkt.
Ein weiteres Problem bei flexiblen Spaltenbreiten betrifft speziell den Internet-Explorer. Dieser interpretiert im Quirks Mode das CSS-Box-Modell falsch. Der IE 6 lässt sich durch einen passenden Doctype in den standardkonformen Darstellungsmodus versetzen. Jedoch wurde YAML von Beginn an für eine volle Unterstützung der Version 5.x des Internet Explorers ausgelegt. Diese Version arbeitet generell im Quirks Mode.
Um den IE trotzdem zur Darstellung der korrekten Breite zu überreden, wurde der Box-Modell-Hack entwickelt, bzw. noch zahlreiche weitere Variationen dieses Hacks. Alle Varianten dieses Hacks basieren jedoch auf dem gleichen Prinzip: Über die Ausnutzung von Parser-Bugs wird dem IE eine modifizierte Breite zugeschoben welche die Fehlinterpreation berücksichtigt und im Ergebnis zu Darstellung der korrekten Breite führt. Dieses Prinzip scheitert jedoch bei der Mischung von Maßeinheiten auf Grund der oben beschriebenen Problematik und stellt damit eine weitere massive Einschränkung für die Gestaltungsfreiheit des Seitenerstellers dar.
Die Lösung all dieser Probleme liegt in dem bei YAML umgesetzten Kombinationsmodell für die Spalten des Basislayouts, durch jeweils zwei ineinander verschachtelte DIV-Container.
<!-- begin: #col1 - first float column -->
<div id="col1">
<div id="col1_content" class="clearfix">
...
</div>
</div>
Die Gesamtbreite der Spalte wird dem äußeren Container #colx zugewiesen. Die Innenabstände (padding) und eventuelle Rahmendefinitionen (border) gehen hingegen an den inneren Container colx_content, welcher wiederum keine definierte Breite (width:auto) erhält.
Auf diese Weise ist die Gesamtbreite eines Containers #colx immer eindeutig. Somit sind beliebige Kombinationen mit unterschiedlichen Maßeinheiten möglich, was den Gestaltungsfreiraum für flexible Layouts enorm erhöht und gleichzeitig wird das Auftreten Box-Modell-Bug des Internet Explorers geschickt umgangen.
