Entdecken Sie einige der interessanten Funktionen, die seit März 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Seit März 2024 sind Firefox 124, Safari 17.4 und Chrome 123 stabil. In diesem Beitrag werden die neuen Funktionen der Webplattform beschrieben.
Farbschemas mit light-dark() anpassen
Die Farbfunktion light-dark() wurde in Chrome 123 eingeführt und vereinfacht die Anpassung von Farbschemas an Nutzerpräferenzen.
Im folgenden Beispiel ist color-scheme für root auf light dark festgelegt.
In den benutzerdefinierten Eigenschaften wird die Farbfunktion light-dark() verwendet, um Farben festzulegen, zwischen denen je nach Präferenz des Nutzers für den hellen oder dunklen Modus 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 color-scheme-abhängige Farben von CSS mit light-dark().
Bessere Steuerung der Eingaben mit field-sizing
In Chrome 123 ermöglicht das Attribut field-sizing außerdem automatisch vergrößerte Texteingabefelder.
Unterstützte Browser
- 123
- x
- x
- x
Unterschneidung für CJK-Zeichensetzung mit text-spacing-trim
In Chrome 123 wendet die Eigenschaft text-spacing-trim die Unterschneidung auf chinesische, japanische und koreanische Satzzeichen (CJK) an, um übermäßige Leerzeichen anzupassen.
Weitere Informationen finden Sie unter Vier neue internationale Funktionen für Preisvergleichsportale.
Unterstützte Browser
- 123
- x
- x
- x
Die CSS-At-Regel für @scope
Safari 17.4 enthält @scope, mit dem Sie Elemente in bestimmten DOM-Unterstrukturen auswählen und Elemente präzise ausrichten können, ohne übermäßig spezifische Selektoren zu schreiben, die sich nur schwer überschreiben lassen, und ohne die Selektoren zu eng an die DOM-Struktur zu koppeln.
Weitere Informationen finden Sie unter Reichweite von Selektoren mit der CSS-@scope-at-Regel beschränken.
Verbesserungen bei Bild im Bild
Chrome 123 bietet zwei Funktionen, die den Bild-im-Bild-Modus verbessern.
Das erste ist der CSS-Anzeigemodus picture-in-picture.
So kannst du bestimmte CSS-Regeln schreiben, die nur dann angewendet werden, wenn die Web-App im Bild-im-Bild-Modus angezeigt wird.
Mit der zweiten Funktion können Sie opener.focus aus einem Bild-im-Bild-Fenster eines Dokuments verwenden, um den Fokus auf Systemebene auf den Tab zu lenken, zu dem das Bild-im-Bild-Fenster des Dokuments gehört.
So können Sie den ursprünglichen Tab bei Bedarf wieder im Vordergrund anzeigen. Dies 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 festlegen, wie bestimmte Ressourcenpfade abgerufen werden sollen. Das bedeutet, dass der Browser keinen Service Worker ausführen muss, um Antworten aus einem Cache oder direkt aus dem Netzwerk abzurufen.
Weitere Informationen finden Sie unter Service Worker Static Routing API verwenden, um den Service Worker für bestimmte Pfade zu umgehen.
Long Animation Frames-API
Chrome 123 enthält auch die Long Animation Frames API, eine Aktualisierung der Long Tasks API, um langsame UI-Updates besser zu verstehen. Dies kann nützlich sein, um langsame Animationsframes zu ermitteln, die sich wahrscheinlich auf den Core Web Vital-Messwert Interaction to Next Paint (INP) auswirken, der die Reaktionszeit misst, oder um andere UI-Verzögerungen zu identifizieren, die sich auf die flüssige Darstellung auswirken.
Unterstützte Browser
- 123
- x
- x
- x
Das Attribut content-visibility
Firefox 124 unterstützt die CSS-Eigenschaft content-visibility.
Diese Eigenschaft bestimmt, ob ein Element den Inhalt überhaupt rendert. So können Browser den Inhalt erst dann rendern, wenn er benötigt wird.
Ergänzungen zu ArrayBuffer und Arraygruppierung
In Safari 17.4 erhält JavaScript einige neue Funktionen. Die Property detached sowie die Methoden transfer() und transferToFixedLength() von ArrayBuffer werden unterstützt.
Safari 17.4 enthält auch die Array-Gruppierungsmethoden Object.groupBy und Map.groupBy. Weitere Informationen zur Array-Gruppierung finden Sie unter JavaScript erhält Array-Gruppierungsmethoden.
Diese Features sind jetzt interoperabel und werden daher mit Baseline neu verfügbar verknüpft.
setHTMLUnsafe und parseHTMLUnsafe
Mit den Versandmethoden setHTMLUnsafe und parseHTMLUnsafe in Safari 17.4 kann das deklarative Shadow-DOM in JavaScript verwendet werden.
Diese Methoden bieten auch eine einfachere Möglichkeit, HTML imperativ in DOM zu parsen, als mit innerHTML oder DOMParser.
Beta-Browser-Releases
Betaversionen des Browsers liefern Ihnen eine Vorschau auf Elemente, die sich in der nächsten stabilen Version des Browsers befinden werden. Dies ist ein guter Zeitpunkt, um neue Funktionen zu testen oder zu entfernen, die sich auf deine Website auswirken könnten, bevor die Veröffentlichung weltweit verfügbar ist. Die neuen Betaversionen sind Firefox 125 und Chrome 124. Diese Releases bieten viele tolle Funktionen auf der Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier ein paar Highlights.
Firefox 125 entwickelt sich zu einer aufregenden neuen Version.
Sie enthält align-content in Blöcken, um diese Funktion interoperabel zu machen.
Ebenfalls enthalten ist die Popover API, sodass sie Teil von „Baseline Newly verfügbar“ wird. Die Eigenschaft transition-behavior wird ebenfalls unterstützt.
Popover und transition-behavior sind Teil von Interop 2024.
Chrome 124 enthält die Methoden setHTMLUnsafe und parseHTMLUnsafe, damit das deklarative Shadow-DOM über JavaScript verwendet werden kann. Dadurch sind diese Funktionen interoperabel. Ebenfalls enthalten sind die WebSocketStream API und das Attribut writingsuggestions.