Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Spickzettel: Diese CSS-Feinheiten solltest du kennen

Manchmal kann der Umgang mit CSS nerven. In diesem Artikel zeigen wir euch ein paar Tücken der Stylesprache und wie ihr mit ihnen umgehen könnt.

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

position: Keine Ahnung?

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.

transform ändert alles

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.

Eigenheiten des Boxmodels

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.

Das Gegenteil zu float: Clearfix

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 */
}

Die Höhe bei float-Elementen

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.

display und float

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.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

7 Reaktionen
hdyejdhdgd

Bitte noch wtfhtmlcss.com als Quelle angeben der Faire halber. Danke.

Antworten
dazzle

Sehe ich auch so. Und Korrekturlesen wäre auch nicht schlecht.

Antworten
Schwierig

Ich bin erstaunt, dass man eine Quelle für diese rudimentären CSS Regeln angeben sollte. Das hätte ich dir auch im 1. Lehrjahr so aufschreiben können...

Antworten
sehdhsgsg

Vielleicht vorher mal die Quelle anschauen, bevor du uns alle belehren willst?

mindbreaker

LOL. Wieso. Quellen sind eh drin.

Antworten
Sven Finke

Wo sind die Quellen drin? Im Artikel findet man keine Quellen zu der Internetseite. Und wenn man sich diese mal anschaut dann wird schnell klar das alles fast 1zu1 aus dem englischen übersetzt wurde.

Zudem findet man auf wtfhtmlcss.com noch ein paar andere Dinge die vielleicht interessant sein könnten, ein Link dorthin wäre also nicht nur aus Urheberrechtlichen Gründen richtig gewesen, sondern für viele Leser wahrscheinlich sogar interessant.

Mich würde nur mal interessieren WARUM die Quellen so oft nicht angegeben werden. Verursacht das bei Journalisten körperliche Schmerzen? Wurde dem Chef dieser Text einfach als der eigene verkauft? Was ist so schwer daran die Quellen klar zu kennzeichnen... ?

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen