Design for AI

Neu in CSS

Geprüft im September 2026

Neueres CSS, nach dem du einen Agenten beim Namen fragen solltest. Die Support-Zahlen sind die erste stabile Version pro Engine, im September 2026 gegen Release Notes und Baseline geprüft. Baseline-Features zuerst, dann die, die noch hinter einem Flag oder in nur einer Engine stecken.

Baseline

container queries

Container-aware card

Resize the wrapper, not the window.

Lässt eine Komponente auf die Breite ihres eigenen Containers reagieren statt auf den Viewport.

Chrome 105Edge 105Safari 16Firefox 110

:has()
Shipping

Style ein Elternelement nach seinem Inhalt, ohne JS-Zustandsklasse.

Chrome 105Edge 105Safari 15.4Firefox 121

nesting

Natives Verschachteln von Regeln in Regeln, inklusive `&` für das Elternelement, inline verschachtelter.

Chrome 120Edge 120Safari 17.2Firefox 117

@layer

Spätere Layer gewinnen, egal wie spezifisch die Regel darunter ist.

Chrome 99Edge 99Safari 15.4Firefox 97

subgrid

  • Starter

    Short blurb.

    Choose

  • Team plan

    Much longer description that pushes the button down, but only here.

    Choose

  • Enterprise

    Medium copy.

    Choose

Ein verschachteltes Grid kann die Zeilen- oder Spaltentracks seines Elternelements übernehmen, sodass.

Chrome 117Edge 117Safari 16Firefox 71

color-mix()

Mischt zwei Farben in einem gewählten Farbraum, sodass du Hover-, Tönungs- und Randfarben ohne.

Chrome 111Edge 111Safari 16.2Firefox 113

oklch()

Wahrnehmungsgleichmäßige Farbräume: gleiche Schritte in der Helligkeit sehen gleich aus, und der Farbton.

Chrome 111Edge 111Safari 15.4Firefox 113

relative color syntax

Nimmt eine bestehende Farbe und schreibt ihre Kanäle um: `oklch(from var(--brand) calc(l + .2) c h)`.

Chrome 119Edge 119Safari 16.4Firefox 128

light-dark()

Follows the OS theme.

Wählt eine von zwei Farben abhängig vom `color-scheme` des Elements.

Chrome 123Edge 123Safari 17.5Firefox 120

@property
Animated conic border

Gibt einer Custom Property einen Typ, einen Initialwert und Vererbung, was sie animierbar macht.

Chrome 85Edge 85Safari 16.4Firefox 128

text-wrap

A heading long enough to wrap awkwardly on narrow screens

Gleicht Zeilenlängen in kurzen Textblöcken (Überschriften, Bildunterschriften) aus, sodass nie ein.

Chrome 114Edge 114Safari 17.5Firefox 121

::backdrop

Deklarative Popover: jedes Element mit `popover` öffnet sich im Top Layer über das `popovertarget` eines.

Chrome 114Edge 114Safari 17Firefox 125

:modal

Confirm

Click outside or press Escape to dismiss.

Native modale Dialoge haben die richtige Fokusfalle, Inertheit der Seite und Escape-Behandlung.

Chrome 134Edge 134Safari noFirefox 137

@starting-style
Saved. Click anywhere to dismiss.

Erlaubt Transitions von `display:none` und anderen diskreten Properties.

Chrome 117Edge 117Safari 17.5Firefox 129

inert attribute

Step 1 (done)

Step 2

Entfernt einen Teilbaum mit einem Attribut aus Fokus, Klicks und dem Accessibility Tree.

Chrome 102Edge 102Safari 15.5Firefox 112

:user-valid
Enter a valid email address.

Wie `:valid`/`:invalid`, aber erst nachdem der Nutzer mit dem Feld interagiert hat, sodass ein.

Chrome 119Edge 119Safari 16.5Firefox 88

accent-color

Färbt native Checkboxen, Radios, Range-Slider und Fortschrittsbalken in deine Markenfarbe um, während.

Chrome 93Edge 93Safari 15.4Firefox 92

round()

Font size snaps to the 4px baseline grid as the viewport changes.

Mathe in CSS jenseits von calc(): einen fluiden Wert auf ein Raster snappen (`round(nearest, 1.2rem,.

Chrome 125Edge 125Safari 15.4Firefox 118

sin()
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Trigonometrie in CSS macht kreisförmige und radiale Layouts zu reinem CSS: platziere N Elemente auf.

Chrome 111Edge 111Safari 15.4Firefox 108

animation-composition

Zwei Animationen auf einer Property, addiert statt ersetzt.

Chrome 112Edge 112Safari 16Firefox 115

offset-path

Bewegt ein Element entlang eines Pfads (Kreis, Inset, Polygon, SVG-Pfad oder `shape()`) und dreht es.

Chrome 116Edge 116Safari 16Firefox 122

mask-image

Unpräfixiertes `mask` lässt dich jedes Element mit Verläufen oder Bildern ausblenden, beschneiden und.

Chrome 120Edge 120Safari 15.4Firefox 53

backdrop-filter
Frosted header

Wendet Blur/Saturate/Brightness auf das an, was hinter einem Element liegt, die Grundlage für.

Chrome 76Edge 76Safari 18Firefox 103

scrollbar-gutter

Scroll me. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Standardisierte Scrollbar-Kontrolle: reserviere die Rinne, damit das Layout nicht springt, wenn ein.

Chrome 121Edge 121Safari 26.2Firefox 64

::details-content
What is Baseline?

A signal that a feature works in all major browsers.

Is this free?

Yes, entirely.

Mehrere `<details>` mit demselben `name` zu gruppieren ergibt nativ ein exklusives Akkordeon.

Chrome 131Edge 131Safari 18.4Firefox 144

::highlight()

Type-safe highlights work without changing the DOM. Highlights are cheap and fast.

Style beliebige Textbereiche (Suchtreffer, Rechtschreibprüfung, Code-Tokens), ohne sie in Spans zu.

Chrome 105Edge 105Safari 17.2Firefox 140

view transitions
A
B

Wickle eine DOM-Änderung in `document.startViewTransition()` und der Browser animiert zwischen altem und.

Chrome 111Edge 111Safari 18Firefox 144

:open
Details toggleBody text.

Matcht `<details>`, `<dialog>`, `<select>` und Datums-/Farb-Inputs, während sie offen sind, ersetzt.

Chrome 133Edge 133Safari 26.5Firefox 136

container style queries

Frage die Custom-Property-Werte eines Containers ab: `@container style(--theme: dark)` stylt Kinder,.

Chrome 111Edge 111Safari 18Firefox 151

@scope

Card title

Nested heading keeps its own style

Begrenzt Regeln auf einen Teilbaum mit optionaler unterer Grenze ("Donut-Scope"): `@scope (.card) to.

Chrome 118Edge 118Safari 17.4Firefox 146

field-sizing

Lässt Inputs, Textareas und Selects sich nach ihrem Inhalt bemessen, sodass eine Textarea beim Tippen.

Chrome 123Edge 123Safari 26.2Firefox 152

contrast-color()
YellowNavyOrange

Gibt Schwarz oder Weiß zurück, je nachdem, was stärker mit der gegebenen Farbe kontrastiert.

Chrome 147Edge 147Safari 26Firefox 146

shape()
Speech bubble with a shape() tail

Eine Pfadsyntax in CSS-Einheiten und Mathe statt SVGs einheitenloser Zahlen, sodass Clip-Formen.

Chrome 135Edge 135Safari 18.4Firefox 148

sibling-index()
  • One
  • Two
  • Three
  • Four
  • Five

Numerische Funktionen, die die 1-basierte Position eines Elements unter seinen Geschwistern und die.

Chrome 138Edge 138Safari 26.2Firefox 154

text-box-trim

Schneidet den zusätzlichen Raum über der Versalhöhe und unter der Grundlinie in einer Zeilenbox ab,.

Chrome 133Edge 133Safari 18.2Firefox 154

anchor()
Anchored below, flips above near the bottom edge.

Tooltips und Menüs heften sich an ihren Auslöser und klappen am Rand um.

Chrome 125Edge 125Safari 26Firefox 147

comma-separated
Link in main

`@container name { }` ohne Bedingung matcht immer, wenn ein benannter Container existiert, eine saubere.

Chrome 148Edge 148Safari 26.4Firefox 149

lh

Icon sized to exactly one line.

`lh` ist die line-height des Elements, `rlh` die der Wurzel, sodass Abstände in Zeilen ausgedrückt.

Chrome 109Edge 109Safari 16.4Firefox 120

Hinter einem Flag oder in einer Engine

scroll()

Scroll to reveal these.

One
Two
Three

Treibt eine Keyframe-Animation über die Scrollposition statt über die Zeit: Lesefortschrittsbalken,.

Chrome 115Edge 115Safari 26Firefox flag (158 nightly)

@view-transition

Schaltet eine mehrseitige Site mit einer At-Regel auf beiden Seiten auf animierte Navigationen um;.

Chrome 126Edge 126Safari 18.2Firefox no

text-wrap

Pretty wrapping evaluates line breaks across the paragraph to avoid a single stranded word on the final line and to keep the right edge from looking ragged, which is what typographers do by hand.

Besserer Absatzumbruch: vermeidet verwaiste Wörter, verbessert die Silbentrennung und gleicht den.

Chrome 117Edge 117Safari 26Firefox no

popover="hint"
Saves the draft (Ctrl+S)

Ein Popover der Tooltip-Klasse, das offene `auto`-Popover nicht schließt und sich schließt, wenn ein.

Chrome 133Edge 133Safari noFirefox 149

light-dismiss

Click outside to close.

Deklariert, wie ein `<dialog>` geschlossen werden darf: `any` (Escape, Klick außerhalb oder.

Chrome 134Edge 134Safari noFirefox 137

color-mix()
Scheme-aware gradient

`color-mix()` nimmt jetzt beliebig viele Farben mit Gewichten, und `light-dark()` akzeptiert.

Chrome 150Edge 150Safari noFirefox 150

margin-trim

Title

Paragraph with its own margins.

Entfernt die Margins des ersten und letzten Kindes an den Containerkanten, sodass das Padding einer.

Chrome 155 (upcoming)Edge 155 (upcoming)Safari 16.4Firefox no

line-clamp

This description is clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Kürzt einen Block auf N Zeilen mit Auslassungspunkten.

Chrome flagEdge flagSafari legacyFirefox flag

typed om
Typed OM box

Eine typisierte JavaScript-API für CSS-Werte: lies `el.computedStyleMap().get('width')` als.

Chrome 66Edge 66Safari 16.4Firefox flag

revert-rule

Plain variant keeps the base colour via revert-rule.

Ein Cascade-Keyword, das so tut, als hätte die aktuelle Regel die Property nicht gesetzt, sodass die.

Chrome 148Edge 148Safari 27 betaFirefox 150

calc-size()
Animated open/close
Body that animates to its natural height in Chromium.

Aktiviere mit `interpolate-size: allow-keywords` und du kannst `height: 0` nach `height: auto` (oder.

Chrome 129Edge 129Safari noFirefox no

superellipse()
squirclescoopnotchbevel

Ändert, was `border-radius` zeichnet: `squircle` (kontinuierliche Kurven im iOS-Stil), `scoop` (nach.

Chrome 139Edge 139Safari noFirefox no

if()

Inline-Bedingungen in einem Wert: `if(style(--variant: primary): #2563eb; else: #e5e7eb)`.

Chrome 137Edge 137Safari TPFirefox no

@function

Fluid heading via @function

Autordefinierte Funktionen mit typisierten Parametern und einem `result`-Deskriptor, überall nutzbar, wo.

Chrome 139Edge 139Safari TPFirefox no

::scroll-button()
  • Slide 1
  • Slide 2
  • Slide 3

Reine CSS-Karussells: ein Scroll-Snap-Container bekommt Zurück-/Weiter-Buttons und eine.

Chrome 135Edge 135Safari noFirefox no

scroll-state container queries
Sticky header

Scroll inside this box.

Style ein Element nach seinem Scroll-Zustand: ein Sticky-Header, der einen Schatten bekommt, wenn er.

Chrome 133Edge 133Safari noFirefox no

text-fit

Fits the width

Skaliert die Schriftgröße einer Überschrift so, dass die Zeile ihren Container exakt füllt, die.

Chrome 150Edge 150Safari noFirefox no

background-clip
Gradient border, rounded

Beschneidet einen Hintergrund auf die Border-Box minus Padding-Box, sodass ein Verlaufsrand eine.

Chrome 150Edge 150Safari noFirefox no

column-rule
  • A
  • B
  • C
  • D
  • E
  • F

Zeichnet Linien in Grid-/Flex-Lücken mit `column-rule` und `row-rule` (plus `*-rule-inset` und.

Chrome 149Edge 149Safari noFirefox no

random()

`random(min, max, step)` liefert einen stabilen Zufallswert pro Seitenladen (oder pro Element mit.

Chrome noEdge noSafari 26.2 / 26.0Firefox flag

grid lanes
1
2
3
4
5

Ein Layout im Masonry-Stil, bei dem Elemente in die kürzeste Spaltenbahn fließen, ausgedrückt mit.

Chrome flagEdge flagSafari 26.4Firefox flag

::picker

Schaltet ein natives `<select>` auf vollständig stylbares Rendering um: style den Button, das Dropdown.

Chrome 135Edge 135Safari 27 betaFirefox no

attr()
123456

`attr()` funktioniert jetzt in jeder Property und kann das Attribut als Typ parsen (`type(<length>)`,.

Chrome 133Edge 133Safari TPFirefox flag