Neu auf der Webplattform im März

Hier finden Sie einige der interessanten Funktionen, die im März 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.

Rachel Andrew

Stabile Browserversionen

Im März 2024 wurden Firefox 124, Safari 17.4 und Chrome 123 stabil. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.

Farbschemas mit light-dark() anpassen

Die Farbfunktion light-dark() ist in Chrome 123 verfügbar und erleichtert die Anpassung von Farbschemata an die Nutzerpräferenzen. Im folgenden Beispiel ist color-scheme auf light dark auf root festgelegt. Die benutzerdefinierten Eigenschaften verwenden die Farbfunktion light-dark(), um Farben festzulegen, zwischen denen abhängig von den Einstellungen des hellen oder dunklen Modus des Nutzers gewechselt wird.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Weitere Beispiele und Details finden Sie unter CSS-color-schemeabhängige Farben mit light-dark().

Unterstützte Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Quelle

Bessere Steuerung von Eingaben mit field-sizing

Außerdem können in Chrome 123 mit der Eigenschaft field-sizing automatisch wachsende Textfelder aktiviert werden.

Unterstützte Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: nicht unterstützt
  • Safari: Nicht unterstützt.

Quelle

Kerning für CJK-Satzzeichen mit text-spacing-trim

In Chrome 123 wird mit der Eigenschaft text-spacing-trim das Kerning auf Satzzeichen in Chinesisch, Japanisch und Koreanisch (CJK) angewendet, um übermäßige Abstände anzupassen. Weitere Informationen finden Sie unter Vier neue internationale Funktionen für Preisvergleichsportale.

Unterstützte Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Die CSS-At-Rule @scope

Safari 17.4 enthält das Zeichen @scope, mit dem Sie Elemente in bestimmten DOM-Unterbäumen auswählen und Elemente genau ansteuern können, ohne übermäßig spezifische Selektoren zu schreiben, die schwer zu überschreiben sind, und ohne Ihre Selektoren zu eng an die DOM-Struktur zu binden.

Weitere Informationen finden Sie unter Reichweite von Selektoren mit der CSS-At-Regel @scope beschränken.

Unterstützte Browser

  • Chrome: 118.
  • Edge: 118.
  • Firefox: hinter einer Flagge.
  • Safari: 17.4.

Quelle

Verbesserungen bei der Funktion „Bild im Bild“

Chrome 123 enthält zwei Funktionen zur Verbesserung von Bild im Bild. Der erste ist der picture-in-picture Displaymodus des Preisvergleichsportals. Auf diese Weise können Sie spezifische CSS-Regeln schreiben, die nur angewendet werden, wenn die Web-App (Teil der) im Bild-im-Bild-Modus angezeigt wird.

Mit der zweiten Funktion können Sie opener.focus in einem Fenster als Bild im Bild verwenden, um den Fokus auf Systemebene auf den Tab zu verschieben, zu dem das Bild-im-Bild-Fenster des Dokuments gehört.

So können Sie den ursprünglichen Tab bei Bedarf wieder in den Vordergrund bringen. Das ist beispielsweise der Fall, wenn Nutzende auf eine Benutzeroberfläche zugreifen müssen, die nicht in das kleinere Bild-im-Bild-Fenster passt.

Unterstützung für align-content im Block- und Tabellenlayout

Chrome 123 und Safari 17.4 unterstützen align-content im Block- und Tabellenlayout. Weitere Informationen zur Änderung des align-content-Supports

Service Worker Static Routing API

Ab Chrome 123 ist die Service Worker Static Routing API verfügbar. Mit dieser API können Sie deklarativ angeben, wie bestimmte Ressourcenpfade abgerufen werden sollen. Das bedeutet, dass der Browser keinen Service Worker ausführen muss, nur um Antworten aus einem Cache oder direkt aus dem Netzwerk abzurufen.

Weitere Informationen finden Sie unter Service Worker Static Routing API zur Umgehung bestimmter Pfade verwenden.

Long Animation Frames API

Chrome 123 enthält außerdem die Long Animation Frames API, eine Aktualisierung der Long Tasks API, die ein besseres Verständnis für langsame Updates der Benutzeroberfläche ermöglicht. Das kann hilfreich sein, um langsame Animationsframes zu identifizieren, die sich wahrscheinlich auf den Core Web Vital-Messwert Interaction to Next Paint (INP) auswirken, mit dem die Reaktionsfähigkeit gemessen wird, oder um andere Ruckler in der Benutzeroberfläche zu identifizieren, die sich auf die Laufruhe auswirken.

Unterstützte Browser

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Das content-visibility-Attribut

Firefox 124 unterstützt die CSS-Eigenschaft content-visibility. Mit dieser Eigenschaft wird festgelegt, ob ein Element seinen Inhalt rendert. So können Browser den Inhalt erst dann rendern, wenn er benötigt wird.

Unterstützte Browser

  • Chrome: 85
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Quelle

Ergänzungen zu ArrayBuffer und Arraygruppierung

In Safari 17.4 gibt es einige neue JavaScript-Funktionen mit Unterstützung für das detached-Attribut und die Methoden transfer() und transferToFixedLength() von ArrayBuffer.

Unterstützte Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Quelle

Safari 17.4 enthält außerdem die Array-Gruppierungsmethoden Object.groupBy und Map.groupBy. Weitere Informationen zur Arraygruppierung finden Sie unter JavaScript erhält Array-Gruppierungsmethoden.

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Quelle

Diese Funktionen sind jetzt interoperabel und werden daher in die Kategorie „Neu verfügbar“ aufgenommen.

setHTMLUnsafe und parseHTMLUnsafe

Mit den Methoden setHTMLUnsafe und parseHTMLUnsafe, die in Safari 17.4 enthalten sind, kann das deklarative Shadow-DOM über JavaScript verwendet werden. Diese Methoden bieten auch eine einfachere Möglichkeit, HTML im DOM imperativ zu parsen, als es mit innerHTML oder DOMParser der Fall ist.

Betaversionen von Browsern

Betaversionen von Browsern geben Ihnen einen Einblick in die Funktionen, die in der nächsten stabilen Version des Browsers enthalten sein werden. Dies ist eine gute Gelegenheit, neue Funktionen oder Löschungen zu testen, die sich auf deine Website auswirken könnten, bevor diese Funktion veröffentlicht wird. Neue Betaversionen sind Firefox 125 und Chrome 124. Diese Releases bringen viele tolle Funktionen auf die Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.

Firefox 125 wird eine spannende Version sein. Sie enthält align-content auf Blöcken, wodurch diese Funktion interoperabel ist. Außerdem ist die Popover API enthalten und wird deshalb Teil von Baseline Newly available. Auch die Property transition-behavior wird unterstützt. Pop-ups und transition-behavior sind Teil von Interop 2024.

Chrome 124 enthält die Methoden setHTMLUnsafe und parseHTMLUnsafe, mit denen das deklarative Shadow-DOM aus JavaScript verwendet werden kann. Dadurch sind diese Funktionen interoperabel. Außerdem sind die WebSocketStream API und das Attribut writingsuggestions enthalten.