Der 2. Hack: “CSS-2-Selectors verwenden”

Die sogenannten “CSS-2-Child-selectors” werden nur von Opera, Mozilla basierten Browsern (Netscape 6, Konqueror, …) , dem IE 7 (Win) und IE 5 (Mac) problemlos interpretiert. IE 5/6 (Win) ignorieren einfach alle Regeln, die durch diese CSS-2-Selectoren zugewiesen werden. Ein Umstand, den wir uns beim 2. Hack zu Nutze machen.

Dazu schreiben wir als erstes unsere Breite für den IE 5/6 (Win) innerhalb eines CSS-1-Selectors.

1
2
3
4

#ContentBox{
     border: 10px solid black;
     width: 220px;
}

Auch hier zu beachten ist, dass wir schon bei der width-Definition unserer ContentBox die Rahmenbreite hinzufügen (200px + 10px + 10px = 220px), damit wir eine korrekte 200px breite Box mit 10px breitem Rahmen erhalten.

Nach diesem CSS-1-Selector fügen wir den CSS-2-Child-Selector ein und überschreiben damit für die Browser, die in der Lage sind damit umzugehen die eigentlich falschen Breitenangaben

1
2
3

html>body #ContentBox {
     width: 200px;
}

Der komplette Quellcode:

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

<html>
  <head>
    <title>2. Hack</title>
    <style type="text/css">
      #ContentBox {
        border: 10px solid black;
        width: 220px;
        background-color: yellow;
      }
      html>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.&lt;br&gt;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

Was genau passiert :
Sämtliche Browser lesen die Definition von #ContentBox Quellcodes wie gewohnt ein. Unmittelbar danach wird ihnen jedoch hinterm dem CSS-2-Selector mitgeteilt, dass die Box nun eine geringere Breite haben soll und somit überschreiben sie die bereits gespeicherte Breite. IE5 + 6 jedoch brechen den Lesevorgang ab und behalten so den alten Wert. Was dazu führt, dass sie eine 220px breite ContentBox mit Innen einem 10px breitem Rahmen ausgeben.

Der Haken bei der Sache:

  • Was aber passiert bei Browsern, die zwar mit den "CSS-2-Selectoren" nichts anfangen können, aber das "Box Modell" richtig darstellen?

    Richtig! Wir bekommen eine 220px breite Box mit einem zusätzlich 10px breitem Rahmen. Also eine Box die insgesamt 240px Platz in unserem Webdokument beansprucht.

    Und bei welchem Browser dieser Fall eintritt? Beim IE 6/Win zum Beispiel.

    Damit fällt also auch dieser Hack aus, da er möglicherweise mehr Umstände macht, als Vorteile zu bringen.

Pages: 1 2 3 4 5