Tag: CSS

1. CSS dvh, svh, lvh — Mobile Viewport-Einheiten richtig einsetzen

   14.02.2025

   Der berüchtigte iOS-Safari-Bug mit 100vh hat Entwickler jahrelang beschäftigt. Die modernen CSS-Viewport-Einheiten dvh, svh und lvh lösen das Problem dauerhaft — ohne JavaScript, ohne Resize-Events und ohne fragile Workarounds. Dieser Artikel erklärt, wie Dynamic, Small und Large Viewport Units funktionieren und wann man welche Einheit wirklich braucht.

   Read more

2. aspect-ratio in Media-Layouts: Bilder, Videos und Karten ohne Verzerrung

   12.02.2025

   Bevor aspect-ratio in CSS ankam, brauchte jedes responsive Video einen Wrapper-Div mit padding-top Trick, jede Bildergalerie kämpfte mit springenden Layouts während des Ladens. Die aspect-ratio Eigenschaft löst dieses Problem nativ, mit einer einzigen Zeile CSS, kombinierbar mit object-fit und Container Queries für stabile, unverzerrte Medien Layouts.

   Read more

3. Hanging Punctuation für Zitate: Satzzeichen sauber aus dem Textblock hängen

   08.02.2025

   Hanging Punctuation setzt Anführungszeichen und andere Satzzeichen optisch außerhalb des Textblocks, damit die linke Textkante über alle Zeilen hinweg gerade wirkt. Mit der CSS-Eigenschaft hanging-punctuation lässt sich dieser jahrhundertealte Trick aus der Buchdruck-Typografie mit einer einzigen Zeile CSS umsetzen, ganz ohne negative Margins oder JavaScript-Hacks.

   Read more

4. CSS Nesting: native Verschachtelung ohne Präprozessor 2026

   03.02.2025

   CSS Nesting ist 2026 in allen modernen Browsern nativ verfügbar. Der & Selector, verschachtelte Media Queries und At-Rules wie @layer und @supports innerhalb von Regelblöcken machen Präprozessoren für viele Projekte überflüssig. Was früher Sass, Less oder PostCSS erforderte, funktioniert heute direkt im Browser — ohne Build-Step, ohne Source Maps, ohne Abhängigkeiten.

   Read more

5. CSS oklch() Farbraum: bessere Farben im Web 2026

   31.01.2025

   oklch() ist der modernste Farbraum in CSS Color Level 4 und löst fundamentale Probleme von hsl() und rgb(): Die Helligkeitsachse ist wahrnehmungsgleichmäßig, Farbverläufe durchqueren keine entsättigten Grautöne, und der Zugang zum P3-Display-Gamut ermöglicht lebhaftere Farben auf modernen Bildschirmen — direkt im Browser, ohne Bildbearbeitungssoftware.

   Read more

6. CSS :has() — der Game Changer für Layouts

   29.01.2025

   CSS :has() ist mehr als ein Parent-Selektor — es ist ein vollständiger Kontextselektor. Layout-Entscheidungen, die bisher JavaScript-Event-Handler erforderten, lassen sich mit :has() deklarativ im Stylesheet treffen. Das verändert, wie man CSS-Architekturen aufbaut.

   Read more

7. CSS @starting-style — Einblend-Animationen für neu eingefügte Elemente

   29.01.2025

   Jahrelang brauchte man JavaScript, um ein Element beim Einblenden aus display:none zu animieren. CSS @starting-style löst dieses Problem nativ — und ermöglicht elegante Übergänge für Popover, Dialoge und dynamisch eingefügte Inhalte ohne eine Zeile JavaScript.

   Read more

8. CSS calc(), min(), max() und clamp() — Arithmetik im Stylesheet

   24.01.2025

   Responsive Typographie, adaptive Abstände und flüssige Layouts ohne einen einzigen Breakpoint — das ist das Versprechen von CSS calc(), min(), max() und clamp(). Wer diese vier Funktionen und ihre Verschachtelung beherrscht, schreibt wartbarere Stylesheets mit weniger Code und weniger Browser-Streitigkeiten zwischen Pixel und Viewport.

   Read more

9. CSS Blend Modes — mix-blend-mode und background-blend-mode

   15.01.2025

   Photoshop-Ebeneneffekte direkt im Browser — ohne Export, ohne JavaScript. CSS Blend Modes ermöglichen Duotone-Effekte, Textur-Overlays und kreative Typographie rein im Stylesheet. Der Schlüssel liegt im Verständnis der Mathematik hinter multiply, screen und overlay sowie dem Compositing-Kontext, den isolation kontrolliert.

   Read more

10. CSS Container Queries — Komponenten statt Viewport

    01.01.2025

    CSS Container Queries beenden das Zeitalter der viewport-zentrierten Responsiveness. Eine Karte weiß jetzt, wie breit ihr Container ist — und passt sich an, egal ob sie in einer Sidebar, einem Hauptbereich oder einem Modal erscheint. Das verändert die CSS-Architektur von Grund auf.

    Read more