Donnerstag,
24. November 2005

Arne Kamola schreibt in seinem Weblog recht ausführlich seine Meinung zum YAML-Template und sieht drei große Schwächen, die es sich meiner Meinung nach lohnt, zu diskutieren.

Das Template ist aus meiner Sicht eine reine DIV-Suppe. Jedes Seiten-Struktur-Element ist mindestens zwei mal geschachtelt. Der Hauptinhalt ist von insgesammt vier(!) DIVs umschlossen. Dieses Verfahren mag zwar logischer und etwas besser sein als verschachtelte Tabellen, aber diese Art von Markup kommt dem von verschachtelten Tabellen verdammt nahe.

Das ist zunächst korrekt, die gesamte Seite ist von zwei DIVs umschlossen, ebenso die Inhalte der einzelnen Spalten. Der Grund dafür ist die Art und Weise mit der ich dem fehlerhaften Box-Modell des Internet Explorers begegne.

Die Gesamtbreite eines DIVs berechnet sich aus den Werten für width, padding, border und margin. Der IE interpretiert jedoch das Box-Modell falsch und berechnet aus diesen Werten eine falsche Gesamtbreite. Um diesen Fehler des IE zu umgehen, wird der Wert für die Gesamtbreite an das jweils äuYßere DIV übergeben, während das innere DIV quasi die Funktion von “padding” des regulären Box-Modells übernimmt.

Mit dem Box-Modell-Hack für den IE lässt sich das Problem mit nur einem DIV beheben. Dem IE wird dazu per CSS eine “falsche Breite” untergeschoben, welche die Fehlinterpretation berücksichtigt und so dem IE zum richtigen Ergebnis verhilft. Dieser CSS-Hack ist jedoch nur für fixe Spaltenbreiten sinnvoll anwendbar. Es gibt gute Gründe die Spaltenbreite flexibel zu definieren (em oder %), während die Randabstände und border-Breite in Pixeln angegeben werden. In diesen Fällen scheitert jedoch der Hack, da sich die für den Hack benötigte “falsche Breite” nicht berechnen lässt.

Durch die Nutzung des Box-Modell-Hacks würden zwar die DIV-Verschachtelungen reduziert, gleichzeitig jedoch auch die Flexibilität des Layouts beschnitten weil damit flexible Spaltenbreiten generell im IE zu Darstellungsfehlern führen würden. Anders herum heisst dies aber auch, dass im speziellen Falle von fixen Spaltenbreiten eine Optimierung des XHTML-Markups möglich ist und durch den Einsatz des Box-Modell-Hacks die Inhaltsspalten auch mit nur einem DIV korrekt dargestellt werden können.

Der logische Aufbau des Templates widerspricht meiner Auffassung von einem logisch aufgebautem (X)HTML-Dokument in einigen, mir sehr wichtigen Punkten, völlig. So kommt nach dem Seiten-Titel und dem Menü (Navigation) zuerst der Inhalt der rechten und danach der Inhalt der linken Spalte. Und erst danach kommt der eigentliche Seiten-Inhalt. Meiner Meinung nach gehören solche Neben- und Zusatz-Informationen, wie sie meist in solchen Spalten dargestellt werden, fast ans Ende des Dokuments; also hinter den Hauptinhalt.

Das Argument ist berechtigt und leider bisher (nicht nur im YAML Template) ungelöst. Im Gegensatz zu absolut positionierten DIVs, welche innerhalb des XHTML-Markups in beliebiger Reihenfolge angeordnet werden können, müssen Fließobjekte generell VOR dem Inhalt stehen, der sie umfließt. Das Problem hat daher meines Erachtens jedoch nichts mit einer mangelhaften Umsetzung einer guten Idee, sondern viel mehr mit dem generellen Einsatz von Fließumgebungen für Layouts und ihrer Funktionsweise zu tun.

Mir ist bisher keine Lösung bekannt, wodurch die Reihenfolge der Elemente einer Fließumgebung beliebig austauschbar wird. Der Einsatz von floats erzeugt hier eine struktuelle Schachstelle im XHTML-Code, welche bei der CSS-Darstellung am Bildschirm nicht sichtbar wird. Der man sich jedoch bei der Ausrichtung des Layouts hinsichtlich der Barrierefreiheit bewusst sein sollte. Arne Kamola liefert hierzu jedoch nachfolgend einen interessanten Lösungsansatz:

Oder (was heißt „oder“?! Und!) man könnte muss zumindest eine Sprungmarke im Dokument anbringen, mit deren hilfe man direkt zum Hauptinhalt springen kann. Gerrit hat dazu eine kleine Anleitung geschrieben. Wobei ich schon seit längerer Zeit noch drastischer vorgehe und diesen „Direkt zum Inhalt“-Link als allererstes Element in meinen HTML-Dokumenten anbringe – noch vor dem Seiten-Titel und der Navigation!

Dies beiseitigt zwar noch nicht die stukturelle Schwäche im HTML-Code, jedoch wird durch die zusätzliche Navigation (welche per CSS bei der Darstellung z.B. auf einem Textbrower ein- und für die Darstellung am Monitor ausgeblendet werden kann) unnötiges Scrollen vermieden. Ich werde dies im nächsten YAML-Update sicher einbauen.

Was meine Dreistigkeit in Bezug auf Form und Funktion betrifft, so sehe ich da keinen Widerspruch. “Form follows function” ist der Leitspruch der Bauhaus-Kultur. Vermutlich lässt sich damit jedoch die Architektur des Hundertwasser-Hauses in Wien nicht begründen und trotzdem finden’s die Leute schön. Es hat halt jeder so seine Präferenzen.

 


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.