Google verteilt Chrome 157 seit dem 28. Oktober an einen kleinen Teil der Windows-Nutzer, die Mac-Fassung soll kurz danach folgen. Alle anderen bekommen das Update mit der regulären stabilen Version, die Google für den 3. November plant. Für Webdesigner stecken in den Versionshinweisen vier Neuerungen bei CSS, die du nicht erst unter chrome://flags freischalten musst.
Was zeigt Chrome künftig am Ende einer gekürzten Zeile?
Bisher kannte Chrome für text-overflow nur zwei Werte: clip schneidet den Text hart ab, ellipsis setzt drei Punkte. Ab Version 157 nimmt die Eigenschaft zusätzlich eine eigene Zeichenfolge an, etwa text-overflow: " (mehr)";. Der Zusatz steht innerhalb der Box und verkürzt den sichtbaren Text. Ist die Box sogar schmaler als der Zusatz, kürzt der Browser auch ihn.
Wie bisher greift die Eigenschaft nur bei Text, der tatsächlich überläuft, in der Regel zusammen mit overflow: hidden und white-space: nowrap.
Was ändert sich bei Ecken und Unterstreichungen?
Mit corner-shape formt Chrome seit Version 139 Ecken, die schräg abgeschnitten (bevel), nach innen gewölbt (scoop), rechtwinklig eingekerbt (notch) oder als Squircle gerundet sind, also als Mischform aus Quadrat und Kreis. Die Form wirkt nur zusammen mit einem border-radius, bisher also in zwei Deklarationen. Die neue Kurzschreibweise corner setzt beides auf einmal, etwa corner: scoop 24px;. Einzelne Ecken steuerst du mit corner-top-left und den entsprechenden Eigenschaften für die übrigen drei Ecken, ganze Kanten mit corner-top, corner-bottom sowie logischen Varianten wie corner-block-start.
Die Eigenschaft text-decoration-inset legt fest, wie weit Unterstreichungen, Überstreichungen und Durchstreichungen gegenüber Anfang und Ende des Textes eingerückt sind oder darüber hinausragen. Erlaubt sind auto, Längen und Prozentwerte, mit einem Wert für beide Seiten oder zwei Werten für Anfang und Ende. Google nennt als Einsatzzweck Effekte, bei denen eine Unterstreichung erst nach und nach sichtbar wird; bisher brauchte so etwas einen Hintergrund-Verlauf oder ein zusätzliches Element.
Bei der Anker-Positionierung benennt Chrome zwei Werte um. Aus anchors-valid und anchors-visible der Eigenschaft position-visibility werden nach einem Beschluss der CSS-Arbeitsgruppe anchor-valid und anchor-visible. Die alten Namen funktionieren vorerst weiter, gelten aber als veraltet.
Welche Browser kennen die neuen Werte schon?
Beim eigenen Kürzungstext holt Chrome nur auf: Firefox beherrscht den Wert seit Version 9 aus dem Jahr 2011. Bei den Ecken liegt Chrome dagegen vorn, denn Firefox und Safari bieten corner-shape bislang nur in ihren Vorschauversionen Nightly und Technology Preview an.
CSS-Funktion
Chrome
Firefox
Safari
text-overflow mit eigenem Text
ab 157
seit 9
in keiner veröffentlichten Version
corner-shape
seit 139
nur Vorschauversion
nur Vorschauversion
text-decoration-inset
ab 157
seit 146, ohne Prozentwerte
nur Vorschauversion
Was das für deine Stylesheets bedeutet
Den eigenen Kürzungstext kannst du sofort einsetzen, solange die drei Punkte als Ersatz für ältere Browser davorstehen: zuerst text-overflow: ellipsis;, darunter text-overflow: " (mehr)";. Ein Browser, der den neuen Wert nicht kennt, verwirft nur die zweite Zeile. Safari-Nutzer auf Mac und iPhone sehen also weiter die Punkte, bis Apple nachzieht.
Ein Browser ohne die Kurzschreibweise corner verwirft dagegen die ganze Deklaration, also auch den Radius. Setz border-radius deshalb am besten als eigene Zeile davor; Firefox und Safari zeigen dann normal gerundete Ecken statt eckiger Kästen.
Nutzt du schon position-visibility, such am besten im Stylesheet nach anchors-valid und anchors-visible und ersetz beide durch die Einzahl. Welche Version dein Chrome hat, steht unter Hilfe › Über Google Chrome. Die neue Darstellung prüfst du anschließend in den Entwicklertools, die der Kurs zu den Chrome Developer Tools Schritt für Schritt erklärt.
Google hat die vorgezogene Verteilung von Chrome 157 am 28. Oktober 2026 angekündigt.
