Der 3. Hack : Tanteks Box Modell Hack

Tanteks Box Modell Hack dürfte in CSS-Designer-Kreisen einer der bekanntesten Hacks sein. Daher soll er natürlich nicht unerwähnt bleiben. An dieser Stelle möchte ich aber auch ausdrücklich auf das Original von Tantek Celik hinweisen. In meiner Erklärung lehne ich mich an dieses Original an, um denen, die des Englischen nicht mächtig sind, den Zugang zu erleichern.

Wie gehabt, als Erstes … der CSS-Quellcode:

1
2
3
4
5
6
7
8
9

#ContentBox {
     border: 10px solid black;
     width:220px;
     background-color: #FFFF00;
     voice-family: ""}\"";
     voice-family:inherit;
     width: 200px;
}
html>body #ContentBox {width: 200px;}

… gefolgt vom Quellcode des HTML-Dokuments mit implementiertem Tantek-Hack …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
  <head>
  <title>3. Hack</title>
    <style type="text/css">
      #ContentBox {
         border: 10px solid black;
         width: 220px;
         background-color: #FFFF00;
         voice-family: "\"}\"";
         voice-family:inherit;
         width: 200px;
      }
	     html&gt;body #ContentBox {
         width: 200px;
      }
    </style>
  </head>
  <body>
    <div id="ContentBox">
        <p>
          Diese Box ist innen 200px breit und hat einen Rahmen mit der Dicke 10px. 200px+10px+10px = 220px
        </p>
    <div>
  </body>
</html>
Diese Box ist innen 200px breit und hat einen Rahmen mit der Dicke 10px. 200px+10px+10px = 220px

Folgendes geschieht:

Trifft ein Browser, der weder das “Box Modell” fehlerfrei parsen, noch mit “CSS-2-Selectoren” etwas anfangen kann (z.B. IE 5/Win) auf diesen Quellcode, liest er nur die Zeilen bis zum Attribut voice-family: "\"}\""; ein, bricht danach den Vorgang ab und gibt eine 200px breite ContentBox mit 10px breitem Rahmen auf den Monitor aus.

Trifft hingegen ein Browser, der zwar das “Box Modell” fehlerfrei implementiert hat, jedoch mit “CSS-2-Selectoren” nichts anzufangen weiß (z.B. IE 6/Win) auf diesen Quellcode, liest er ebenfalls die Zeilen bis zum Attribut voice-family: "\"}\";"; ein, bricht jedoch den Vorgang nicht ab, sondern setzt ihn fort, um dann mit dem width-Wert in der letzten Zeile, den ersten width-Wert zu überschreiben.

Den “CSS-2-Selector” html>body #ContentBox {width: 200px;} ignoriert er, wie wir inzwischen wissen.
(Die Attribute voice-family: "\"}\""; und voice-family:inherit; haben im Übrigen keinen Einfluss auf die Darstellung. Sie dienen lediglich als “Filter”)

Last but not least: Für Browser, die zwar das “Box Modell” richtig darstellen und auch mit “CSS-2-Selectors” das Richtige anzufangen wissen, aber deren CSS-Parser dennoch Bugs enthält, ist die letzte Regel bestimmt (html>body #ContentBox {width: 200px;}). Tantek schreibt nicht umsonst:

I call it the “be nice to Opera 5″ rule

Dem ist eigentlich nichts mehr hinzuzufügen.

  • Hinweis:

    Tanteks “Box Modell Hack” zeigt im Netscape 4.x keinerlei Wirkung. Im Gegenteil: Er “zerlegt” das Layout im wahrsten Sinne des Wortes und spuckt Nägel

Pages: 1 2 3 4 5