Seite 18 - CSS

Live Edit spiegelt Aenderungen an HTML und CSS in Echtzeit in den Browser, ganz ohne Reload-Taste. Bei einfachen Frontend-Dateien ist der Effekt beeindruckend, bei Build-lastigen Hyva/Tailwind-Setups gilt es die Grenzen der Technik zu kennen.

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.

will-change signalisiert dem Browser, dass sich eine Eigenschaft demnaechst aendert, und der Browser reagiert darauf oft, indem er ein eigenes Compositing-Layer fuer das Element anlegt. Das beschleunigt einzelne Animationen spuerbar, aber jedes zusaetzliche Layer kostet Grafikspeicher. Wer will-change grosszuegig auf viele Elemente dauerhaft setzt, erzeugt genau die Ruckler, die die Eigenschaft eigentlich verhindern sollte.

Die shape()-Funktion erweitert clip-path um echte Kurvenbefehle wie curve to, arc to und smooth to, direkt in lesbarer CSS-Syntax. Wo bisher nur ein externes SVG oder eine grobe Polygon-Annäherung half, entstehen jetzt organische, kurvige Formen ohne Build-Step und ohne Pfad-Editor.

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.