4 CSS Tricks, die die meisten Entwickler nicht kennen

Vier CSS-Tricks können deinen Workflow komplett verändern und klassische Probleme elegant lösen. Mit modernen CSS-Features wie clamp() für responsive Schriftgrößen, Custom Properties und weiteren Techniken schreibst du weniger Code und vermeidest Hacks. Die meisten Entwickler kennen diese Tricks nicht — aber danach wirst du sie täglich nutzen.

Responsive Schriftgrößen ohne Media Queries: die clamp()-Funktion

Normalerweise brauchst du Media Queries, wenn du auf verschiedenen Bildschirmgrößen unterschiedliche Schriftgrößen haben willst. Oder du nutzt relative Einheiten wie vw, die aber unbegrenzt mitskalieren. Bei einem winzigen Bildschirm wird der Text winzig. Bei einem Riesenmonitor riesig.

Die CSS-Funktion clamp() löst genau das. Du setzt drei Werte auf einmal:

font-size: clamp(1rem, 2.5vw, 2rem);

Erster Wert: Minimum (hier 1rem = 16px)
Zweiter Wert: Ideale Größe (hier 2.5vw, relativ zur Bildschirmbreite)
Dritter Wert: Maximum (hier 2rem = 32px)

Zwischen diesen Grenzen skaliert der Text dynamisch mit. Darunter bleibt er bei 1rem, darüber bei 2rem. Eine Zeile CSS, kein einziger Media Query.

clamp() funktioniert übrigens nicht nur für Schriftgrößen. Du kannst damit Abstände, Breiten oder andere Werte flexibel begrenzen.

Seitenverhältnisse festlegen mit aspect-ratio

Du baust eine Bildgalerie und willst, dass alle Bilder immer im 16:9-Format angezeigt werden, egal wie breit der Container ist. Früher brauchte man dafür Padding-Tricks oder JavaScript.

Heute gibt es aspect-ratio:

.bild {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Gibst du nur width oder nur height an, berechnet der Browser die fehlende Seite automatisch. Das klappt mit beliebigen Verhältnissen: 4:3, 1:1, 9:16 für Hochformat. Besonders bei Bildgalerien oder eingebetteten Videos ist das praktisch.

Wichtig: Wenn du width und height beide explizit setzt, ignoriert der Browser das aspect-ratio. Macht Sinn, weil du dann beide Dimensionen vorgegeben hast.

Text kürzen mit drei Punkten: nur CSS, kein JavaScript

Ein Element hat nicht genug Platz und der Text soll mit ”…” abgeschnitten werden statt umzubrechen. Manchen lösen das mit JavaScript und String-Berechnungen. Das ist komplett unnötig.

Diese drei CSS-Eigenschaften reichen:

.text {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space: nowrap verhindert den Zeilenumbruch
overflow: hidden versteckt alles, was über die Breite hinausgeht
text-overflow: ellipsis fügt die drei Punkte ein

Du brauchst eine festgelegte width oder max-width, sonst dehnt sich das Element bis zum Bildschirmrand aus. Aber das war’s. Kein JavaScript, kein Rechnen, keine String-Manipulation.

Gradient-Borders mit border-image

Das ist der Trick, den wirklich kaum jemand kennt. Du kannst den Rand eines Elements mit einem Farbverlauf oder sogar einem Bild versehen:

.box {
  border: 4px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(45deg, #f5a623, #c0392b);
}

border muss gesetzt sein, die dort angegebene Farbe spielt aber keine Rolle. border-image-slice: 1 sorgt dafür, dass der Gradient korrekt auf die Border gemappt wird. In border-image-source kommt dein Gradient oder ein Bild rein.

Den Winkel anpassen, Farben wechseln, mehrere Farbstopps setzen. Mit etwas Kreativität entstehen damit richtig schöne Effekte, die mit einem normalen border-color schlicht nicht möglich wären.

Wenn du solche Techniken in echten Projekten anwenden willst, schau dir den Fullstack Web Developer Kurs von DevKarriere an. Dort lernst du nicht nur Grundlagen, sondern wie man modernen, professionellen Code schreibt, den Arbeitgeber wirklich sehen wollen.

Häufige Fragen

Funktioniert clamp() in allen Browsern?

Ja. Laut MDN Web Docs wird clamp() seit Chrome 79, Firefox 75, Safari 13.1 und Edge 79 unterstützt. Du kannst es bedenkenlos in neuen Projekten einsetzen.

Kann ich aspect-ratio auch für Videos und iframes nutzen?

Absolut, das ist sogar einer der häufigsten Anwendungsfälle. Setz width: 100% und aspect-ratio: 16 / 9 auf den Container und dein eingebettetes Video passt sich automatisch an jede Breite an.

Was ist der Unterschied zwischen border-image und einem normalen farbigen Border?

Mit border-color kannst du nur eine einheitliche Farbe setzen. border-image erlaubt dir, beliebige Farbverläufe oder Bilder zu verwenden. Das öffnet gestalterische Möglichkeiten, die mit einfachen Borders nicht erreichbar sind.

4 CSS TRICKS, die du noch nicht kanntest