Neu in Chrome 154

Rachel Andrew

Veröffentlicht: 22. September 2026

Chrome 154 wird jetzt eingeführt. In diesem Beitrag werden einige der wichtigsten Funktionen des Releases vorgestellt. Vollständige Versionshinweise zu Chrome 154

Highlights dieser Version:

  • Mit responsively-sized <iframe> kann ein <iframe> seine Größe basierend auf der intrinsischen Größe des eingebetteten Dokuments anpassen.
  • Mit CSS-Modi scroll-marker-group werden die Modi links und tabs hinzugefügt, um die Fokusreihenfolge und die Semantik der Barrierefreiheit von Scrollmarkierungen zu konfigurieren.
  • Mit CSS text-decoration-inset können Sie die Start- und Endpunkte von Textdekorationen anpassen.

Responsiv angepasste Größe <iframe>

In Chrome 154 wird die Unterstützung für responsiv dimensionierte iFrames eingeführt. Dadurch kann ein <iframe>-Element in einem übergeordneten Dokument seine Größe an die Überlaufgröße des Layouts des eingebetteten Dokuments anpassen, sodass das Scrollen im untergeordneten Dokument vermieden wird. Damit wird das Muster ersetzt, bei dem Sie iFrame-Inhalte manuell messen, Dimensionen mit postMessage() senden und die iFrame-Größe auf der Einbettungsseite aktualisieren.

Wenn Sie die Höhe eines iFrames an die Höhe des Inhalts anpassen möchten, verwenden Sie die CSS-Property frame-sizing für das <iframe>-Element auf der Einbettungsseite:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Das eingebettete Dokument muss auch durch Einfügen eines <meta name="responsive-embedded-sizing">-Elements in sein <head> aktiviert werden:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Weitere Informationen und Demos finden Sie unter Responsive iframes in Chrome 154.

scroll-marker-group-Modi für Preisvergleichsportale

Mit der Property scroll-marker-group wird festgelegt, ob ein Scrollcontainer vor oder nach seinem Inhalt ein ::scroll-marker-group-Pseudoelement generiert. In Chrome 154 wird scroll-marker-group durch zwei Modi erweitert, mit denen die Fokusreihenfolge und die WAI-ARIA-Semantik für die Barrierefreiheit von ::scroll-marker-group und ::scroll-marker festgelegt werden:

/* Links mode (default) */
scroll-marker-group: after links;

/* Tabs mode */
scroll-marker-group: before tabs;

Preisvergleichsportal text-decoration-inset

Standardmäßig hat die Textformatierung eines Elements (z. B. Unterstreichung, Überstreichung oder Durchstreichung) dieselbe Länge wie der gerenderte Text. Mit der CSS-Eigenschaft text-decoration-inset können Sie die Start- und Endpunkte der Textdekoration eines Elements anpassen, sodass sie relativ zu den Rändern des Textblocks eingerückt, darüber hinaus verlängert oder verschoben werden.

text-decoration-inset akzeptiert auto-, Längen- und Prozentwerte mit einer oder zwei Werten, z. B. um beide Enden um 10 px einzurücken:

text-decoration-inset: 10px;

Positive Werte rücken die Dekoration ein (machen sie kürzer), während negative Werte sie ausrücken (machen sie länger). So können Sie den Abstand von Dekorationen optimieren und mit CSS-Textdekorationen anstelle von Hintergrundverläufen oder zusätzlichen Elementen animierte Unterstreichungseffekte erstellen.

Weitere Informationen finden Sie in der text-decoration-inset-Dokumentation auf MDN.

Weitere Informationen

Dies sind nur einige wichtige Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 154:

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal „Chrome Developers“. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen. Oder folgen Sie uns auf X oder LinkedIn, um neue Artikel und Blogposts zu erhalten.

Sobald Chrome 155 veröffentlicht wird, informieren wir Sie hier über die Neuerungen in Chrome.