Interop 2027: CSS-Features, die du heute schon nutzen kannst

Interop 2027 wird gerade geplant, und das meiste CSS auf der Wunschliste läuft schon in Chrome und Edge. Einiges davon kannst du heute ausliefern, solange die Seite ohne es noch gut aussieht. Hier sind fünf Features aus Josh W. Comeaus Top 10, wo sie stehen und eine klare Einteilung: jetzt nutzen oder warten.

Was Interop ist, an einem Beispiel

Interop ist ein jährliches Projekt, in dem die großen Browserhersteller (Google, Apple, Microsoft und Mozilla, dazu Igalia und Bocoup) gemeinsame Schwerpunkte festlegen und gemeinsam daran arbeiten. Comeaus Beispiel ist Subgrid: Firefox hatte es 2019, die anderen taten jahrelang wenig, dann kam es in Interop 2023, und Ende jenes Jahres lief es in allen modernen Browsern. Für 2027 hat Mozilla ein Ranking aufgesetzt, in dem Entwickler für Features abstimmen, und das Team will die Schwerpunkte danach auswählen.

Eine einzige Support-Zeile gilt für alles Folgende, das einen caniuse-Eintrag hat. Comeaus Kästen sagen im Oktober 2026 überall dasselbe: unterstützt in Chrome 155 und Edge 154, nicht unterstützt in Firefox 157 und Safari 27. Die Frage ist also nie „läuft es überall?“, sondern „was passiert dort, wo es nicht läuft?“.

Heute nutzen: corner-shape

corner-shape ändert, wie border-radius zwei Seiten verbindet. Statt eines Viertelkreises bekommst du squircle, bevel, notch oder scoop. Anders als clip-path ändert es die Border-Box selbst, also folgen Rahmen, Outlines und Schatten der neuen Ecke. Comeau nennt es ein perfektes Progressive Enhancement: Firefox und Safari behalten einfach die runde Ecke.

.card {
  border-radius: 16px;
  corner-shape: bevel;
}

Wenn du zuerst den Radius einstellen willst, liefert dir der Border-Radius-Generator den Wert, die Fase kommt obendrauf. Für Formen, die heute in jedem Browser gleich aussehen müssen, bleibt clip-path das Werkzeug, mit dem Nachteil bei Schatten.

Heute nutzen, hinter @supports: interpolate-size

interpolate-size: allow-keywords erlaubt eine Transition von height: 0 nach height: auto, also das Akkordeon, das alle mit JavaScript nachbauen. Laut Comeau ist es seit 2024 in Chrome. Sein Rat ist konkret: Pack die Transition in eine @supports-Abfrage, sonst bekommen Browser ohne Support eine kurze Verzögerung dazu.

html {
  interpolate-size: allow-keywords;
}

@supports (interpolate-size: allow-keywords) {
  details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 300ms, content-visibility 300ms;
    transition-behavior: allow-discrete;
  }
  details:open::details-content {
    height: auto;
  }
}

Mit Vorsicht: reading-flow und Scroll-State-Abfragen

reading-flow löst ein echtes Barrierefreiheitsproblem. Die Tab-Reihenfolge folgt dem DOM, also führt ein Grid, das sich auf dem Handy umsortiert, Tastaturnutzer in einer Reihenfolge durch die Elemente, die nicht mehr zum Bildschirm passt. reading-flow: grid-rows lässt den Fokus den sichtbaren Zeilen folgen, reading-order gibt dir feinere Kontrolle. Liefer es aus, aber verlass dich noch nicht darauf: In Firefox und Safari gilt weiter die DOM-Reihenfolge, die also sinnvoll bleiben muss.

Scroll-State-Container-Queries sagen dem CSS, wann ein Header mit position: sticky klebt oder ob ein Container noch nach oben oder unten scrollen kann. Woanders ändert der Header sein Aussehen einfach nie, und das ist meistens in Ordnung.

header {
  position: sticky;
  top: 0;
  container-type: scroll-state;
}
@container scroll-state(stuck: top) {
  .header-content { border-bottom: 1px solid; }
}

Warten: CSS-Funktionen

Mit @function definierst du eigene CSS-Funktionen mit Parametern und einem result und rufst sie etwa als --gradient-to-transparent(red) auf. Es ist das spannendste Feature der Liste und das schlechteste für Progressive Enhancement, weil eine Funktion meist einen Wert liefert, von dem das Design abhängt. Wo sie fehlt, wird die Deklaration verworfen und die Eigenschaft fällt auf den vorherigen Wert zurück. Lern sie jetzt, aber halt sie aus deinem Produktions-CSS heraus, bis mehr als eine Engine sie kann.

Comeaus Liste hat fünf weitere Punkte, darunter border-shape, Gap Decorations mit der Eigenschaft rule, scroll-ausgelöste Animationen und eine vorgeschlagene inherit()-Funktion, die laut ihm noch kein Browser umsetzt.

Nächster Schritt: Nimm eine Karte oder ein Akkordeon auf deiner Seite, füg corner-shape oder den interpolate-size-Block hinzu und prüf in Firefox oder Safari, dass nichts kaputtgeht. Danach stimm im Interop-2027-Ranking ab. Quelle: Josh W. Comeau, The Future of CSS: My top 10 picks for Interop 2027.