Fortgeschrittene CSS-Techniken: Tipps und Tricks

Diese Anleitung fasst eine Reihe von fortgeschrittenen, aber äußerst nützlichen CSS-Techniken zusammen, die über die Grundlagen hinausgehen und bei der Erstellung komplexer und robuster Layouts helfen können.

1. Leere Elemente mit :empty ansprechen

Mit der :empty-Pseudo-Klasse können Sie Elemente auswählen, die keine Kind-Elemente oder Textinhalte haben (auch keine Leerzeichen). Dies ist nützlich, um leere Container auszublenden oder zu formatieren.

/* Blendet alle leeren Absätze aus */
p:empty {
  display: none;
}

/* Wählt Elemente aus, die NICHT leer sind */
div:not(:empty) {
  border: 1px solid #ddd;
  padding: 1rem;
}

2. *-of-type-Selektoren für präzise Auswahl

Diese Pseudo-Klassen ermöglichen eine sehr spezifische Auswahl von Elementen basierend auf ihrer Position relativ zu Geschwisterelementen des gleichen Typs.

• :first-of-type: Wählt das erste Element seines Typs unter den Geschwistern aus.
• :last-of-type: Wählt das letzte Element seines Typs aus.
• :only-of-type: Wählt ein Element aus, das das einzige seines Typs unter den Geschwistern ist.
• :nth-of-type(n): Wählt das n-te Element seines Typs aus.
• :nth-last-of-type(n): Wählt das n-te Element seines Typs aus, zählt aber von hinten.

Beispiele:

/* Wählt den ersten Absatz innerhalb eines <article>-Elements */
article p:first-of-type {
  font-weight: bold;
}

/* Wählt jeden dritten Listenpunkt aus */
li:nth-of-type(3n) {
  color: purple;
}

/* Wählt jeden geraden Absatz aus, beginnend mit dem zweiten */
p:nth-of-type(2n) {
  background-color: #f0f0f0;
}

3. Mehrspaltige Layouts mit columns

Die columns-Eigenschaft ist eine einfache Möglichkeit, Textinhalte in ein mehrspaltiges Layout im Zeitungsstil zu bringen, ohne auf komplexe Grid- oder Flexbox-Layouts zurückgreifen zu müssen.

.content-block {
  /* Kurzschreibweise: erstelle bis zu 3 Spalten, die jeweils mindestens 250px breit sind */
  columns: 3 250px;

  /* Abstand zwischen den Spalten */
  column-gap: 2rem;

  /* Trennlinie zwischen den Spalten */
  column-rule: 1px solid #eee;
}

.content-block h2 {
  /* Lässt eine Überschrift über alle Spalten laufen */
  column-span: all;
}

Browser-Support: Die grundlegende columns-Eigenschaft wird von allen modernen Browsern unterstützt. column-span kann jedoch in einigen mobilen Browsern Einschränkungen haben.

4. Werte zurücksetzen mit unset

Der unset-Wert kann auf jede CSS-Eigenschaft angewendet werden. Er setzt den Wert einer Eigenschaft auf ihren vererbten Wert zurück, falls sie vererbbar ist, andernfalls auf ihren Initialwert. Dies ist nützlich, um Stile in einem spezifischen Kontext gezielt aufzuheben.

/* Alle 'background'-Eigenschaften für dieses Element zurücksetzen */
.special-element {
  background: unset;
}

Browser-Support: unset wird von allen modernen Browsern unterstützt, aber nicht vom Internet Explorer 11.

Fazit

Die Beherrschung dieser fortgeschrittenen CSS-Techniken ermöglicht die Erstellung sauberer, wartbarerer und flexiblerer Stylesheets. Insbesondere die *-of-type-Selektoren und die columns-Eigenschaft bieten elegante Lösungen für gängige Layout-Herausforderungen.