Jens Oliver Meiert

Boxmodell-Hack (Tantek Çelik)

Originalversion:
http://www.tantek.com/­CSS/Examples/boxmodelhack.html
Übersetzer:
Jens Oliver Meiert, meiert.com
Datum der Übersetzung:
10. Juli 2004 (↻ 7. Februar 2007)

Bei diesem Dokument handelt es sich um eine deutsche Übersetzung, die urheberrechtlich geschützt ist; bitte beachten Sie auch etwaige Hinweise des Originaldokuments. Das in allen Zweifelsfällen maßgebliche Dokument ist das englische Original.

Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an den Übersetzer. Kommentare des Übersetzers, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht des Übersetzers. Sie sind kein Bestandteil des Ursprungsdokuments.

Boxmodell-Hack

Boxtest

Hier ist ein Beispiel-div mit der Klasse boxtest.

Es hat einen Rahmen von 20 Pixeln, 30 Pixel Innenabstand und 300 Pixel Breite.

div.boxtest {
  border: 20px solid;
  padding: 30px;
  background: #ffc;
  width: 300px;
}

Die Gesamtbreite inklusive Rahmen und Innenabstand sollte 400 Pixel betragen.

20 + 30 + 300 + 30 + 20 = 400

User-Agents (zum Beispiel Browser), die das CSS-1-Boxmodell durch das Platzieren von Rahmen und Innenabstand innerhalb der definierten Breite fehlinterpretieren, werden eine Gesamtbreite von 300 Pixeln und eine Breite des Inhalts von 200 Pixeln errechnen.

300 – 20 – 30 – 30 – 20 = 200

Die roten und blauen Balken verdeutlichen den Unterschied. Dieses div (einschließlich seines Rahmens) sollte so breit sein wie der blaue Balken.

 
 

Content

Hier ist ein Beispiel-div mit der Klasse content.

Es sollte nahezu identisch formatiert sein wie das boxtest-div:

div.content {
  border: 20px solid;
  padding: 30px;
  background: #ffc;
}

mit einer wichtigen Ergänzung – es gibt eine zweite Regel, die einen CSS-Parsing-Bug im IE 5/5.5 unter Windows ausnutzt, um eine Breite zuzuweisen, die anschließend überschrieben wird.

div.content {
  width: 400px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 300px;
}

Dieses div-Element (einschließlich seines Rahmens) sollte genauso breit sein wie der blaue Balken, selbst im IE 5/5.5 unter Windows.

Zusätzlich fügen wir nun noch eine weitere Regel hinzu, die unmittelbar der obigen folgt, um User-Agents zu bedienen, die CSS-2-Selektoren und das CSS-Boxmodell unterstützen, aber demselben Parsing-Bug unterliegen wie der IE 5/5.5 (siehe oben). Ich nenne sie die »Sei nett zu Opera 5«-Regel. Stellen Sie sicher, dass Sie kein Leerzeichen um das > stehenlassen.

html>body .content {
  width: 300px;
}

Bemerken Sie bitte, dass User-Agents, die dem Parsing-Bug (illustriert durch den "\"}\""-Wert) unterliegen, möglicherweise die nächste Regel ignorieren; deshalb hilft die »Sei nett zu Opera 5«-Regel diesen fehlgeleiteten Parsern, den »Faden« wieder aufzunehmen.

Um nachzuweisen, dass das CSS-Parsen solcher User-Agents an dieser Stelle wieder fortgeführt wird, füge ich eine weitere Regel hinzu, und zwar unmittelbar hinter der vorherigen (nur um dies zu verdeutlichen).

p.ruletest {
  color: blue;
}

Dieser Absatz besitzt das Attribut class="ruletest" und sollte deshalb in blau dargestellt werden. Falls er rot ist, greift eine zuvor definierte Regel, die durch die spätere richtigerweise hätte überschrieben werden sollen. Beachten Sie, dass diese letzte Regel unnötig ist und hier nur dem Zweck dient, nachzuweisen, dass die oben dargestellten Regeln des Boxmodell-Hacks hinter sich korrekt »aufräumen«.

Ergänzungen

Vermeiden Sie den unnötigen ?xml-Prolog

4. April 2002: Prerit Bhakta merkte an, dass unter Verwendung des ?xml-Prologs

<?xml version="1.0"?>

der IE 6 unter Windows das »quirky« Boxmodell verwendet (also in den Kompatibilitätsmodus springt).

Da der »?xml«-Prolog unnötig ist, empfehle ich, ihn einfach wegzulassen.

Validieren Sie Stylesheets als medienunabhängige Dateien

3. September 2002: Jonathan Horn merkte an, dass der W3C-CSS-Validierer Fehlermeldungen zurückgibt, wenn die voice-family-Eigenschaft in einem screen-Stylesheet verwendet wird.

Wie ich in den Beiträgen zu Dave Sheas »mezzoblue« anmerkte, ist dies ein Fehler im W3C-CSS-Validierer. Der Validierer sollte eine Warnung ausgeben (und keinen Fehler), wenn CSS-Eigenschaften, die bei einem bestimmten Medientyp nicht unterstützt werden, verwendet werden, und dies wurde auch so an das W3C weitergegeben:

Mein Rat: Validieren Sie Ihr Stylesheet erst medienunabhängig, damit Sie sicher sein können, valides CSS zu gebrauchen, und importieren Sie es dann gegebenenfalls in einem medienabhängigen Element.

Übersetzungen

15. September 2002: Christophe Ducamp lieferte eine französische Übersetzung, Bidouillage de Boîtes.

10. Februar 2004: Maurício »Maujor« Samy Silva lieferte eine portugiesische Übersetzung, Corte Do Modelo Da Caixa.

19. Februar 2004: Alex Kachanov lieferte eine russische Übersetzung, Трюк с блочной моделью CSS.

4. Juni 2004: Vakorin Nikita lieferte ebenfalls eine russische Übersetzung, Способ обхода коробочной модели.

4. Juli 2004: Hermann Kaser lieferte eine spanische Übersetzung, Hack para el modelo de cajas en CSS.

2. August 2004: Daniel Torres Burriel lieferte ebenfalls eine spanische Übersetzung, Corte Del Modelo De la Caja.

12. Februar 2005: Marcel Feenstra lieferte eine holländische Übersetzung, Box Model Hack.

24. Februar 2005: Mehmet Doğan lieferte eine türkische Übersetzung, Kutucuk Modeli.

»Creative Commons«-Lizenz. Diese Seite unterliegt einer Creative Commons-Lizenz.