Seite 10 - CSS

CSS

AI generated

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

Maxim Mironjuk - Februar 14, 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.

CSS Design Patterns

AI generated

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

Maxim Mironjuk - Februar 12, 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.

CSS Design Patterns

AI generated

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

Maxim Mironjuk - Februar 08, 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.

CSS

AI generated

CSS Nesting: native Verschachtelung ohne Präprozessor 2026

Maxim Mironjuk - Februar 03, 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.

CSS

AI generated

CSS oklch() Farbraum: bessere Farben im Web 2026

Maxim Mironjuk - Januar 31, 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.

CSS

AI generated

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

Maxim Mironjuk - Januar 29, 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.

CSS

AI generated

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

Maxim Mironjuk - Januar 29, 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.

CSS

AI generated

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

Maxim Mironjuk - Januar 24, 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.

CSS

AI generated

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

Maxim Mironjuk - Januar 15, 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.

CSS

AI generated

CSS Container Queries — Komponenten statt Viewport

Maxim Mironjuk - Januar 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.