Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Das Box-Modell

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Das Box-Modell

Alles im Internet ist eckig, selbst dann, wenn es nicht so scheint. Das CSS-Boxmodell beschreibt den rechteckigen Raum, der für alle Elemente im Dokumentenbaum generiert wird. Im Grunde einfach, wird das Boxmodell dann zur Herausforderung, wenn Browser es fehlinterpretieren: So hat es nahezu jeder Webdesigner und -entwickler beim Internet Explorer 5 kennengelernt.

Spezifikation

Laut CSS-Spezifikation verfügt der von jedem Element beanspruchte Raum ("Box") über einen Inhaltsbereich (zum Beispiel Text oder Bild) und optional über einen diese Box umgebenden Innenabstand, Rahmen und Außenabstand. Die folgende Grafik veranschaulicht diese Aufteilung:

Visualisierung des CSS-Boxmodells

Bild: Copyright Jon Hicks (Lizenzbestimmungen)

Die Breite und Höhe des Inhalts eines Elements bestimmen sich über seine "wirkliche" Breite beziehungsweise Höhe, bei einem Bild also über die eigentlichen Maße des Bildes, oder über die width- und height-Eigenschaften. Der Innenabstand wird über die Eigenschaften padding-top, padding-right, padding-bottom, padding-left beziehungsweise in Kurzform via padding definiert. Die Breite des Rahmens basiert analog dazu auf den Werten für border-width, die ebenfalls für jede Seite separat spezifiziert werden können, und die margin-Eigenschaft mitsamt ihrer ebenfalls für jede einzelne Seite verfügbaren Eigenschaften komplettiert dieses Quartett.

Addiert man die Werte all dieser Eigenschaften für jeweils Horizontale und Vertikale, erhält man die Gesamtbreite beziehungsweise -höhe eines Elements.

Probleme mit dem Boxmodell

Überträgt man das Boxmodell in die Realität, mag man argumentieren, daß width und height die Gesamtmaße eines Elements, also inklusive seiner "Verpackung" (Innenabstand und Rahmen) sowie Außenabstand, festlegen müssten, und nicht nur die Maße des Elementinhalts. Genau diesen Ansatz verfolgt der Internet Explorer 5 (also 5.0/5.5), und dies sorgt für Probleme. Während zum Beispiel alle anderen Browser ein Element mit einer über width spezifizierten Breite von 200 Pixel und einem Innenabstand von 50 Pixel als insgesamt 300 Pixel breit annehmen, bezieht der Internet Explorer 5 diese insgesamt 100 Pixel Innenabstand in die Gesamtbreite ein – das Element ist also 200 Pixel breit, wobei davon dem Elementinhalt nur noch 100 Pixel zur Verfügung stehen.

Dieses Beispiel in vereinfachter Darstellung:

falsch
richtig

Für "Standardistas" unerheblich, aber dennoch notwendig, erwähnt zu werden: Auch der Internet Explorer 6 zeigt dieses Verhalten, wenn er in den sogenannten Kompatibilitätsmodus springt, es also kein oder ein falscher Dokumenttyp verwendet wird, oder diesem etwas voransteht (zum Beispiel eine eigentlich standardkonforme XML-Verarbeitungsanweisung à la <?xml version="1.0" encoding="utf-8"?>).

Boxmodell-Hacks

Eine ganze Reihe von Wegen steht zur Verfügung, wenn es darum geht, dieses Fehlverhalten vom Internet Explorer zu adressieren, und in der Regel handelt es sich um generelle Methoden, um ihm alternative CSS-Deklarationen vorzugeben oder welche vorzuenthalten. Aufgrund der Vielzahl von Möglichkeiten sollen hier nur einige besondere Methoden erörtert werden. Unter den "weiterführenden Links" befinden sich Referenzen zu ausführlichen Übersichten.

Zur Terminologie: Es wird nicht nur im Hinblick auf das Boxmodell oft von "Hacks" gesprochen, oftmals ist diese Bezeichnung jedoch nicht korrekt. Manche Methoden basieren auf Bugs in den jeweiligen Implementierungen (wie Tantek Çeliks Boxmodell-Hack), andere auf proprietären Erweiterungen (wie "Conditional Comments"), andere wieder auf noch nicht überall implementierten Bestandteilen der CSS-Spezifikation (wie bei der Anwendung von Kindselektoren mit dem >-Kombinierer).

Der Klassiker: Tantek Çeliks Boxmodell-Hack

Tantek Çeliks Boxmodell-Hack (deutsche Übersetzung) basiert auf einem "Parsing Bug" im Internet Explorer, der es über das Setzen der voice-family-Eigenschaft mitsamt einem "fiktiven" Wert zulässt, Deklarationen sowohl für den 5er Internet Explorer als auch "korrigierend" für alle anderen Browser zu setzen.

Auf das obige Beispiel bezogen würde dieser Hack wie folgt angewandt werden:

div#beispiel {
padding: 50px;
width: 300px; /* nur IE 5.x */
voice-family: "\"}\"";
width: 200px; /* alle anderen User-Agents */
voice-family: "\"}\"";
}

Bei dieser Variante handelt es sich um eine Abwandlung der Originalversion. Zum einen verzichtet sie auf die Deklaration voice-family: inherit;, zum anderen fügt sie der "korrigierenden" zweiten width-Zuweisung noch einmal die Deklaration voice-family: "\"}\""; an. Dies ist notwendig, damit etwa eine nachfolgende Regel nicht fälschlicherweise vom Internet Explorer ignoriert wird, ein Effekt, der sonst zu beobachten ist.

Der Kontroverse: "Conditional Comments"

"Conditional Comments" sind mittlerweile ein populäres Rezept, um dem Internet Explorer gezielt Extrawürstchen zu braten. Als proprietärer Kommentar, der eine Abfrage auf einzelne Versionen des Internet Explorers ermöglicht, schenken sie einem die grundsätzliche Option auf nur für den Internet Explorer verständliche und zugängliche Inhalte. So kann man allen Internet Explorern mit Versionsnummer 5 über folgende Notation ein spezielles Stylesheet zuweisen und darüber beispielsweise dessen Boxmodell-Probleme behandeln:

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Von der Verwendung von "Conditional Comments" wird jedoch abgeraten. Dies hat drei gewichtige Gründe: Erstens entsprechen sie keinem offenen Standard und unterliegen somit weder der Kritik noch dem Dialog wie W3C-Standards. Zweitens ignorieren sie die HTML-Spezifikation, die vorgibt, daß Kommentare vom Parser ignoriert werden sollen. Drittens nehmen sie die Möglichkeit, alle CSS-Zuweisungen in einem einzelnen Stylesheet zu verwalten.

Der Einfache: Alternativer Boxmodell-Hack

Eine weitere Möglichkeit besteht darin, leere CSS-Kommentare unmittelbar vor (Internet Explorer 5.0) und nach (Internet Explorer 5.5) dem Doppelpunkt einer Eigenschaft zu setzen, so daß die betroffene Deklaration von eben diesen Browsern ignoriert wird. Für den Internet Explorer 5 wird dann vor dieser für sie zu ignorierenden Deklaration eine entsprechend alternative Zuweisung vorgenommen:

div#beispiel {
padding: 50px;
width: 300px; /* nur IE 5.x */
width/**/:/**/ 200px; /* alle anderen User-Agents */
}

Auch bei dieser Methode verwenden wir Eigenschaften redundant, aber sie ist im Gegensatz zu Tantek Çeliks Boxmodell-Hack einfach zu memorieren und entspricht gegenüber "Conditional Comments" keinem unkonformen oder benachteiligenden Vorgehen.

Weiterführende Links

Kommentare

Martin Labuschin
am 14.12.2005 - 13:41

Muss man sich eigentlich noch um den IE 5.x kümmern? Ich hab ihn bei meinem CSS-Update total außer Acht gelassen und dachte das könnte ich mit ruhigem Gewissen machen...

Permanenter Link

Heiko
am 14.12.2005 - 16:29

@Martin - den IE5.0 würde ich bei kommerzielen Projekten solange berücksichtigen, bis der 7.0 draußen ist und das kann noch dauern ;o)

Permanenter Link

Gabi
am 14.12.2005 - 18:50

Hm, Hacks gefallen mir gar nicht... sie können zum Bumerang werden. Für meine privaten Projekte wäre das alles überschaubar und machbar, aber ich würde als Gewerbliche Anbieterin niemals Kundenseiten mit Hacks versehen.
Da würde ich (wie ich das ohnehin mache) lieber ein bißchen mehr Quelltext in Kauf nehmen und Boxen in Boxen erstellen. Und meine Vorstellungen vom Layout ein bißchen an die Gegebenheiten anpassen. Wenn man sich mit diesen beiden Kompromissen angefreundet hat, klappt das eigentlich recht gut und ist vor allen Dingen sicher.

Permanenter Link

tobias
am 17.12.2005 - 21:52

@martin: Auch wenn man es nicht glauben will, aber die Verbreitung des Explorers liegt bei etwa 70%.
Diesen bei der Entwicklung einer Website außen vor zulassen ist also etwas heikel...

Permanenter Link

serotonic
am 18.12.2005 - 15:25

Martin:
Ich habe auch die Erfahrung gemacht, dass 5.x noch massiv als Standardbrowser in Firmen eingesetzt wird, so traurig und unverständlich das auch in vielfacher Hinsicht ist.
Allerdings versuche ich mitterweile - wenn es auch oft geradezu "gefährlich" für bereits angenommene Aufträge ist - dem Kunden nahe zu bringen, dass Optimierung auf diesen veralteten Browser eine deutliche Mehrarbeit bedeutet, die er auch tragen muss, wenn er sie wünscht. Ein kurzer Hinweis auf das Relaesedatum des Browsers wirkt da manchmal Wunder (und die Worte "aktuelle Browser" im Angebot ebenfalls).

Permanenter Link

molily
am 14.01.2006 - 12:47

Von Conditional Comments "wird abgeraten" - ja, wer rät wo davon ab? Ich sehe wachsenden Einsatz von CC, vor allem nach der Bitte des IE-Teams. Die Gründe sind bis auf den letzten völlig konstruiert. Man will einen bestimmten Browser mit bestimmten Deklarationen versorgen. Dass CC von außen wie einfache Kommentare aussehen, ist deren Vorteil.
"Erstens entsprechen sie keinem offenen Standard und unterliegen somit weder der Kritik noch dem Dialog wie W3C-Standards."
Wieso sollten sie auch? Was ist schlimm daran? Es ist eine Microsoft-Erfindung speziell für den MSIE. Nicht mehr und nicht weniger. Und das ist gut so. Ein Standard für browserspezifische Stylesheets würe absurd - genau das soll die Standardisierung von CSS verhindern. Aber solange MSIE den Standard nicht unterstützt, sind CC gerechtfertigt.
"Zweitens ignorieren sie die HTML-Spezifikation, die vorgibt, daß Kommentare vom Parser ignoriert werden sollen."
Man kann darüber streiten, ob Microsoft CC nicht sinniger hätte umsetzen können. Das ist aber eine völlig hypothetische Diskussion. Hier ein Verstoß gegen den Standard zu sehen, ist extrem kleinkrämerisch. In der Praxis ist das sowieso kein Nachteil. Wieso also von CC abraten? Unterliegen die anderen Hacks etwa dem öffentlichen Dialog? Nein, sie beziehen sich auch nur auf bestimmte Browsereigenheiten. Die Anforderungen, die du an CC stellst, erfüllen die anderen Hacks auch nicht. Dass width/**/:/**/ irgendeinem Browser eine bestimmte Anweisung gibt, steht auch in keinem Standard.
"Drittens nehmen sie die Möglichkeit, alle CSS-Zuweisungen in einem einzelnen Stylesheet zu verwalten."
Das ist das einzige praxisrelevante Argument, die anderen sind esoterisch. Ich sehe nicht, warum der Gebrauch von CC dem Webstandards-Ideal widerspricht.

Permanenter Link

Teg
am 18.01.2006 - 11:17

Ich sehe die Sache ähnlich wie molily.

Warum sollte man sein Stylesheet durch irgendwelche kryptischen Stylesheet-Hacks wie voice-family: "\"}\""; oder width/**/:/**/ versauen, wenn man für ältere Browsermodelle sauber eine separate Datei mit Workarounds erstellen kann. Einen Bug zu umgehen indem man andere Bugs ausnutzt halte ich nicht für sehr sauber. Was ist wenn irgendwann ein zukünftiger Browser zufällig den voice-family-Bug hat aber nicht den Boxmodell-Bug? Naja, vielleicht findet sich da auch wieder ein anderer Bug mit dem man das dann lösen kann... (c:

Permanenter Link

Music Jams
am 18.03.2007 - 14:00

Wir verwenden für spezifische Browser extra ausgelagerte Stylesheet Dateien. Man muss auch nach einem halben Jahr noch in dem CSS Gefrickel dursteigen.

[Anm. d. Red.: Link entfernt, holt euch euren PageRank gefälligst woanders]

Permanenter Link

Die Kommentare sind geschlossen.