Frische CSS-Konstruktionen verschieben Webdesign über ticky-tacky kleine Kästen

Frische CSS-Konstruktionen verschieben Webdesign über ticky-tacky kleine Kästen

Die Jahrzehnte alte Abhängigkeit des Webdesigns von rechteckigen Kästen endet nun. Neue CSS-Funktionen, darunter die shape()-Funktion sowie die Eigenschaften border-shape und corner-shape, bieten Designern und ihren KI-Agenten ein erweitertes Spektrum für die Anordnung von Inhalten in flüssigerer Weise.

Die World Wide Web Consortium (W3C) veröffentlichte 1996 ihren ersten Standard für die Webseitengestaltung. Zu dieser Zeit orientierten sich Webseiten an den Rasterlayouts von Fachpublikationen, Zeitungen und Zeitschriften.

Frühere Grafiktreiber und Browser-Rendering-Engines waren rudimentär. Entwickler mussten mit einem neuen Medium experimentieren und fanden, dass das Fließen von Text innerhalb eines definierten Raums einfacher war, wenn die geometrischen Koordinaten dieses Raums möglichst simpel blieben.

Heute ist Print im Wesentlichen tot, Webentwickler sind versierter (und wenn nicht, unterstützt KI sie), und Lord knows GPUs sind leistungsfähiger. Es gibt also keinen Grund mehr, warum eine Webseite noch quadratisch sein muss.

In Edwin A. Abbotts 1884 erschienenen Sci-Fi-Klassiker Flatland: A Romance of Many Dimensions wird der Protagonist, der in einer zweidimensionalen flachen Welt lebt, plötzlich mit der verblüffenden dritten Dimension konfrontiert.

Webentwickler könnten ähnliche Erschütterungen erleben, wenn sie diese neuen CSS-Konstruktionen erstmals nutzen.

Entwicklerwahl: vertikal oder horizontal

Ursprünglich konnten HTML und CSS nur horizontale oder vertikale Linien oder Rahmen zeichnen. Aufwendigere Layouts erforderten proprietäre Plug-ins wie Java-Applets, Macromedia/Adobe Flash oder umständliche JavaScript-Hacks.

SVG durchbrach die Quadratur des Web, indem es Entwicklern erlaubte, Kurven, geschwungene Linien, Logos oder beliebige Formen mittels numerischer Koordinaten zu definieren (dies ist zwar aufwendig, doch Bild-zu-SVG-Konverter erleichtern die Arbeit). SVG war jedoch auf eine Leinwand beschränkt, während CSS weiterhin das Layout der Seite steuerte.

Der erste Versuch, die beiden Welten zu verbinden, war die path()-Funktion, die SVG direkt in CSS einbettete. path() hatte Einschränkungen, sie war nicht responsiv und verstand keine Variablen oder CSS-Einheiten. Entwickler mussten alle Angaben in Pixeln festlegen.

Die shape()-Funktion öffnete dem Web ein breiteres Gestaltungsspektrum. Eine shape() definiert geometrische Koordinaten einer gewünschten Form oder Trajektorie und nutzt reaktionsfähige CSS-Syntax. In Kombination mit clip-path wurden bereits Ticket-Stubs, Chat-Bubbles und andere Designelemente erstellt.

Die neue Eigenschaft border-shape vervollständigt das Bild, indem sie CSS-eigene Koordinaten aus shape() auf die Seitenränder anwendet. Durch das Einbetten von shape() in border-shape werden die Grenzen bereits früh im Rendering-Prozess festgelegt, nicht erst am Ende.

„ Anders ausgedrückt: Das Anbringen von Rahmen an CSS-Formen wird kinderleicht! „ bemerkte der CSS-Experimentierer Temani Afif in einem Tutorial auf CSS-Tricks.

Diese Eigenschaft eröffnet Designmöglichkeiten, die zuvor innerhalb einer 40-Stunden-Woche undenkbar waren.

Afif präsentiert mehrere Beispiele: Man kann eine Webseite beliebig zerschneiden, Rahmen innerhalb von Rahmen erzeugen und den Zwischenraum zwischen äußerer Form und innerer Form ausfüllen, um Aussparungen zu erzeugen. So lässt sich beispielsweise ein offenes Herz innerhalb eines quadratischen Kastens ausschließlich mit CSS formen. Äußere Rahmen oder innere Formen können animiert werden, etwa beim Mausüberfahren oder durch das Einblenden von Bildern.

Für alle, die shape() nicht per Hand definieren wollen, gibt es die Eigenschaft corner-shape, die vordefinierte Muster wie abgerundete Ecken, abgeschrägte Kanten, Einschnitte oder eine „squircle“ anbietet.

Laut caniuse.com unterstützen alle gängigen Browser shape(), während border-shape und corner-shape noch experimentell sind (die aktuellen Versionen von Chrome, Edge und Opera bereits die Standardimplementierung).

Jetzt liegt es an den Entwicklern, ein flüssigeres Web zu gestalten. ®