Neu auf der Webplattform im Juni

Hier finden Sie einige der interessanten Funktionen, die im Juni 2026 in stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

Veröffentlicht: 30. Juni 2026

Stabile Browserversionen

Chrome 149, Chrome 150 und Firefox 152 wurden im Juni als stabile Versionen veröffentlicht. Diesen Monat gab es keine stabile Version von Safari. In diesem Beitrag werden die neuen Funktionen in Webbrowsern vorgestellt.

Größenanpassung von Formularsteuerelementen mit field-sizing wird zur Baseline

Firefox 152 unterstützt die CSS-Eigenschaft field-sizing. Damit ist die automatische Größenanpassung von Formularelementen jetzt in allen wichtigen Browser-Engines verfügbar.

Mit der Eigenschaft field-sizing können Formularsteuerelemente wie <textarea>, <input> und <select> dynamisch verkleinert oder vergrößert werden, um an ihren Inhalt angepasst zu werden (field-sizing: content), anstatt eine Standardgröße beizubehalten (field-sizing: fixed). Dadurch sind keine JavaScript-Workarounds mehr erforderlich, wenn Sie Texteingaben oder Textbereiche erstellen, die sich beim Tippen der Nutzer anpassen.

textarea {
  field-sizing: content;
}

Einfache Formen rect() und xywh() in shape-outside werden zur Baseline

Mit Chrome 149 wird die Unterstützung für die Formfunktionen rect() und xywh() im Attribut shape-outside eingeführt. Diese grundlegenden Formen sind jetzt in allen wichtigen Browsern verfügbar.

Mit den Funktionen rect() und xywh() können Sie rechteckige Bereiche für den Ausschluss von Floats mithilfe von genauen Inset-Koordinaten oder der Syntax für Ursprung und Abmessungen definieren. Dies bietet eine einfachere und besser lesbare Syntax als die Verwendung von polygon() für rechteckige Formen für das Umfließen von Text.

Automatische Schriftartskalierung mit CSS text-fit

In Chrome 150 wird die CSS-Eigenschaft text-fit eingeführt, mit der Entwickler Schriftgrößen automatisch an die Breite eines umgebenden Felds anpassen können.

.headline {
  text-fit: grow;
}

CSS-Lückendekorationen

In Chrome 149 wird die Unterstützung für CSS-Lückendekorationen in Grid- und Flexbox-Layouts eingeführt. Mit Gap-Dekorationen können Sie Linien und Formatierungen direkt in den Abstand zwischen Grid- und Flex-Elementen einfügen, ähnlich wie column-rule in mehrspaltigen Layouts.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Weitere Informationen

Preisvergleichsportal background-clip: border-area

In Chrome 150 wird die Unterstützung für background-clip: border-area aus CSS Backgrounds Level 4 hinzugefügt.

Mit diesem Wert werden Elementhintergründe speziell auf den Rahmenbereich zugeschnitten. So können Sie benutzerdefinierte Verlaufsrahmen, dekorative Rahmenkanten und animierte Rahmeneffekte erstellen, ohne zusätzliche Wrapping-Elemente oder Pseudoelemente zu benötigen.

Programmatische Scroll-Versprechen

In Chrome 150 werden die programmatischen Scrollmethoden (scrollTo(), scrollBy() und scrollIntoView()) aktualisiert, sodass ein Promise zurückgegeben wird.

Das zurückgegebene Promise wird aufgelöst, wenn die Animation für das sanfte Scrollen abgeschlossen ist. So erhalten Sie ein zuverlässiges Signal, um Folgeaktionen auszulösen, sobald das Scrollen abgeschlossen ist.

Deklarative Tastaturnavigation mit focusgroup

In Chrome 150 wird das Attribut focusgroup eingeführt.

Mit dem Attribut focusgroup können Entwickler die Navigation mit den Pfeiltasten in zusammengesetzten UI-Steuerelementen (z. B. Symbolleisten, Tablisten und Menüs) deklarativ verwalten, ohne manuell Listener für Tastaturereignisse schreiben zu müssen.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Weitere Informationen im Focusgroup-Erklärvideo.

WebSockets werden im Back-Forward-Cache (bfcache) unterstützt

In Chrome 149 können Seiten mit aktiven WebSocket-Verbindungen jetzt im Back-Forward-Cache (bfcache) gespeichert werden.

Bisher war eine Seite mit einer offenen WebSocket-Verbindung nicht für den Back-Forward-Cache geeignet. Der Browser schließt jetzt automatisch aktive WebSocket-Verbindungen beim Aufrufen des bfcache, sodass die Seite im Cache gespeichert und sofort wiederhergestellt werden kann, wenn zurücknavigiert wird.

Zwischen- und Header-Reaktionszeit in Resource Timing

Firefox 152 unterstützt jetzt firstInterimResponseStart und finalResponseHeadersStart auf der PerformanceResourceTiming-Schnittstelle.

Damit lässt sich messen, wie lange es dauert, bis der Browser nach dem Senden einer Anfrage Zwischen-HTTP-Antworten bzw. die endgültige HTTP-Antwort empfängt.

Aktionsschaltflächen für Benachrichtigungen

In Firefox 152 wird die Unterstützung für Benachrichtigungs-Aktionsschaltflächen mit der Property actions für Notification und Optionen in ServiceWorkerRegistration.showNotification() hinzugefügt.

Sie können jetzt Aktionsschaltflächen in Betriebssystembenachrichtigungen einfügen und auf Nutzerinteraktionen reagieren, wenn auf Schaltflächen getippt wird.

Betaversionen von Browsern

Betaversionen des Browsers bieten eine Vorschau auf Funktionen in der nächsten stabilen Version des Browsers. Das ist ein guter Zeitpunkt, um neue Funktionen oder Entfernungen zu testen, die sich auf Ihre Website auswirken könnten, bevor die Änderungen für alle Nutzer eingeführt werden. Die neuen Betas in diesem Monat sind Firefox 153 und Safari 27.

In Firefox 153 Beta wird die Unterstützung für Error.stackTraceLimit eingeführt, um die maximale Tiefe des erfassten Stacktrace zu konfigurieren, IDBObjectStore.getAllRecords() und IDBIndex.getAllRecords() zum Abrufen indexierter Datensätze und RTCDtlsTransport.getRemoteCertificates() für die WebRTC-Sicherheitsprüfung. Add‑on-Entwickler erhalten außerdem eine neue publicSuffix-API und eine userScripts.execute()-Methode für die On‑Demand-Skriptinjektion.

In Safari 27 Beta wird die transform-aware-Ankerpositionierung eingeführt, die Pseudoklasse :heading zum Abgleichen von Überschriftenelementen, das Keyword revert-rule zum Zurücksetzen von Kaskadenebenen, die Unterstützung für das Keyword stretch bei der Box-Größenanpassung und :host:has()-Verbundselektoren.