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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
hdyejdhdgd
hdyejdhdgd

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

Antworten
dazzle
dazzle

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

Antworten
Schwierig
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
sehdhsgsg

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

mindbreaker
mindbreaker

LOL. Wieso. Quellen sind eh drin.

Antworten
Sven Finke
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.