Webdesigner und -entwickler erfreuen sich inzwischen an deutlichen Verbesserungen im Leistungsumfang der CSS-Spezifikation. Besonders Flexbox, CSS Grid oder die Custom Properties erleichtern die Entwicklung moderner Websites enorm und bieten vor allem gestalterisch eine deutliche Aufwertung bei reduziertem Code-Aufwand.

Dennoch gibt es immer noch eine lange Wunschliste an Funktionen, die es noch nicht gibt, aber geben sollte. Im Rahmen der Umfrage „The State of CSS 2019“ etwa waren Container-Queries das meistgewünschte nicht existente Feature. Webentwickler Tyler Sticka, Partner in der Developer-Agentur Cloud Four, hat das zum Anlass genommen, einmal auf sein Schaffen zu blicken und Features zu benennen, die seine Arbeit deutlich nach vorne bringen könnten, wenn es sie denn gäbe.

Wir stellen die interessantesten Vorschläge kurz vor:

Tyler zeigt ein simples Beispiel. Wie wäre es, wenn wir die Ecken eines Elements in Abhängigkeit vom Viewport abrunden könnten. Das ergäbe durchaus Sinn, denn abgerundete Ecken kosten Inhaltsplatz, den es bei schmaler werdendem Viewport immer weniger gäbe.

.card:media(width < 100vw) {
border-radius: 0.5em;
}

Wer kennt es nicht? Icons in einer Linie mit Text wirken immer ein bisschen außermittig, selbst bei Verwendung von vertical-align: middle. Hätten wir eine CSS-Eigenschaft, die sich an der Mitte des Textes statt der Zeile orientierte, wären diese seltsamen optischen Störfälle beseitigt. Warum also gibt es keine vertical-align: text-middle?

Ebenfalls nutzwertig wäre es, wenn wir eine Touch-Target außerhalb ihres eigentlichen Elements größer machen könnten. So bräuchten wir keine unnötig großen Buttons, sondern würden einfach einen Offset rund um das Element legen. Tyler schlägt vor:

.button {
pointer-box-offset: 0.5rem;
}

Im Printdesign werden etwa Anführungszeichen am Beginn einer Zeile so gesetzt, dass sie leicht nach links aus dem Textblock ragen, um den Textfluss optisch nicht zu stören. So erscheinen die Buchstaben in aufeinanderfolgenden Zeilen optisch besser balanciert. Im Webdesign ist das nicht möglich, weil ein Anführungszeichen eben auch ein Zeichen ist. Wie wäre es also mit:

body {
text-align: optical left;
}

In seinem Beitrag Imaginary CSS schlägt Tyler Sticka noch einige weitere interessante CSS-Features, die es nicht gibt, vor. Welche Funktionen wünscht ihr euch?

Ich fände zum Beispiel einen Platzhalter nicht schlecht, etwa das Sternchen, um mehrere Level eines Tags (h1, h2 und so weiter) gleichzeitig ansprechen zu können. Die WhatWG hat dazu einen (allerdings etwas anders angelegten) Vorschlag namens Level Ranges im Köcher.

Passend dazu: Keine Angst vor CSS: Diese Grundkenntnisse solltet ihr haben