CSS: Anleitungen und Praxiswissen | Seite 8 | mironsoft Blog
CSS
-
18.10.2025
Ein Paint Worklet zeichnet einen Hintergrund nicht als fertige Bilddatei, sondern als kleines JavaScript-Programm, das der Browser bei jedem Repaint direkt in den Element-Hintergrund rendert. Wer einmal ein parametrisierbares Muster als Worklet registriert, kann es über CSS Custom Properties in beliebig vielen Komponenten wiederverwenden, ohne für jede Farbvariante eine neue SVG-Datei zu exportieren.
-
13.10.2025
CSS Houdini öffnet den Browser-Rendering-Prozess für Entwickler. Benutzerdefinierte Hintergründe, Muster und Layout-Algorithmen als Worklets — direkt in CSS nutzbar. Der mächtigste, aber auch komplexeste Ansatz zur CSS-Erweiterung.
-
11.10.2025
Style-Isolation war bisher das Reservat von Shadow DOM und CSS-in-JS. Mit CSS @scope bringt die nativer Kaskade eine echte Abgrenzung in reguläre Stylesheets – ohne JavaScript, ohne Custom Elements. Donut Scope, proximale Spezifität und die :scope Pseudo-Klasse machen CSS-Komponenten wartbarer und überschneidungsfreier.
-
10.10.2025
Mit marks: crop und den Bleed-Deskriptoren der @page-Regel lassen sich Schnittmarken und Beschnittzugabe direkt im Browser simulieren, ganz ohne Layout- oder Druck-Software. Wer versteht, wo diese CSS-Mechanik endet und wo eine echte Druckvorstufe mit dediziertem PDF-Export beginnt, spart sich teure Überraschungen kurz vor dem Druckauftrag.
-
08.10.2025
Jedes CSS Grid kennt zwei Arten von Spuren: explizite Tracks, die mit grid-template-columns und grid-template-rows bewusst definiert werden, und implizite Tracks, die der Browser automatisch erzeugt, sobald Inhalt über die definierten Grenzen hinauswächst. Wer grid-auto-rows und grid-auto-columns nicht kennt, überlässt die Größe dieser automatisch erzeugten Spuren dem Browser-Standardwert und wundert sich über Zeilen, die viel größer oder kleiner ausfallen als der Rest des Rasters.
-
08.10.2025
Aktiviert ein Nutzer den Windows Hochkontrastmodus, ersetzt das Betriebssystem die meisten Farben einer Webseite kompromisslos durch eine begrenzte Systempalette. Mit forced-colors, System-Farbschlüsselwörtern und forced-color-adjust bleibt eine Oberfläche trotzdem bedienbar, statt Ränder, Icons und Zustände unsichtbar verschwinden zu lassen.
-
07.10.2025
Ein wartbares Dark-Light-Token-System entsteht nicht aus einer einzigen Ebene von Custom Properties, sondern aus drei sauber getrennten Schichten: Primitive Tokens, Semantic Tokens und Component Tokens. Zusammen mit der light-dark() Funktion lässt sich diese Architektur ohne doppelte Media Queries pro Komponente umsetzen.
-
02.10.2025
Gutes Focus-Management trennt Webentwicklung von zugänglicher Webentwicklung. :focus-visible zeigt den Fokusring nur bei Tastaturnutzung, :focus-within ermöglicht Container-Reaktionen — zusammen mit korrekten outline-Styles nach WCAG bilden sie das Fundament für Keyboard-Navigation ohne Kompromisse beim visuellen Design.
-
26.09.2025
Die Wahl der CSS-Architektur beeinflusst Team-Produktivität, Bundle-Größe, Wartbarkeit und Onboarding-Aufwand für Jahre. CSS-in-JS, Utility-First und Vanilla CSS lösen dasselbe Problem mit fundamental unterschiedlichen Ansätzen — und jeder hat spezifische Kontexte, in denen er überlegen ist.
-
26.09.2025
Divide und Space Between Utilities lösen ein spezifisches Problem, das gap allein nicht abdeckt: sichtbare Trennlinien zwischen Geschwisterelementen und Abstände in Layout-Kontexten ohne native Flex- oder Grid-Unterstützung. Wer versteht, wie divide-x, divide-y, space-x und space-y intern funktionieren, vermeidet unnötige Wrapper-Divs und wählt für jeden Anwendungsfall das passende Werkzeug.