Uns sind alle schon mal Ungereimtheiten bei CSS aufgefallen beziehungsweise erzeugt so manche Implementierung einen ungewollten Aha-Effekt. Denn: CSS hat manchmal unlogische Eigenheiten, die Entwickler kennen sollten. Im folgenden versuche ich euch ein paar dieser Eigenheiten näher zu bringen, aber vergesst nicht:

Jeder der sagt, er hat Ahnung von CSS, hat keine Ahnung von CSS.Jonathan Snook

Die Positionierung von DOM-Objekten innerhalb von CSS birgt zwar keine unlogischen Effekte, allerdings gibt es teilweise Verständnisprobleme.

Kurz und knapp: Elemente die das Property position:absolute; implementiert haben, werden relativ zu ihrem nahesten Eltern-Element positioniert, welches einen anderen, als den Standard-Status static, haben muss. Elemente die via position:fixed; positioniert wurden, sind relativ zum Viewport des Browsers positioniert.

Ein merkwürdiges Verhalten legt position:fixed; dann zu Tage, wenn das Eltern-Element über ein transform-Property verfügt. Das Verhalten des Eltern-Elements verändert sich als würde es über position:relative; verfügen, wobei das „fixed“-Element das Verhalten eines position: absolute; aufweist. Hier könnt ihr euch eine Demo dazu ansehen.

Das gute alte Boxmodel. Seit Tag eins unserer Entwicklerkarriere begleitet uns diese Berechnung von Breite und Höhe diverser DOM-Elemente. Der Unterschied zwischen padding und margin ist wahrscheinlich jedem klar, aber: Elemente die über eine festgelegte Breite verfügen werden breiter, wenn padding– oder border-width-Werte angegeben werden. Um dieses Problem umgehen zu können, solltet ihr den box-sizing: border-box;-Reset nutzen. Das erspart euch einiges an Kopfzerbrechen.

In der Webentwicklung kann man einen Satz mit float nicht beenden, ohne auch über das sogenannte „clearing“ zu sprechen. Also die Begrenzung an welcher Elmente, andere DOM-Objekte, nicht mehr umfließen sollen.

Das geht zum Beispiel mit diesem Micro-Clearfix:

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

Als Alternative kann auch eine Methode mit overflow:hidden eingesetzt werden:

.bla {
  overflow: auto; /* clearfix */
}
.blubb-bla {
  overflow: hidden; /* clearfix */
}

Ein weiteres Mysterium kann die fehlende Höhenangabe von DOM-Elementen sein, die mit float implementiert wurden. Ein Eltern-Element, das nur fließenden Inhalt enthält, wird eine Höhe von 0 aufweisen. Hier kann nur ein „Clearfix“ abhilfe schaffen, der den Browser zur Angabe einer Höhenangabe zwingt.

Auch sehr interressant: Elemente die mit float ausgestattet sind, werden automatisch als display:block; dargestellt. Somit ist eine weitere display-Angabe sinnlos.

Was hat eigentlich Peter Griffin mit CSS zu tun?

Vielleicht auch interessant: Ihr wollt Dropdown-Menüs mit CSS erstellen?? Hier findet ihr Tutorials und Demos, die euch weiterhelfen.