Hier finden Sie einige der interessanten Funktionen, die im Mai 2023 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im Mai 2023 wurden Firefox 113, Chrome 113, Chrome 114 und Safari 16.5 stabil. Sehen wir uns an, was das für die Webplattform bedeutet.
WebGPU
Chrome 113 enthält die WebGPU, die Nachfolgerin der WebGL- und WebGL 2-Grafik-APIs für das Web. Es bietet moderne Funktionen wie GPU-Computing, einen geringeren Overhead beim Zugriff auf die GPU-Hardware, die Möglichkeit, von einem einzigen Grafikgerät aus auf mehrere Canvases zu rendern, sowie eine bessere und vorhersehbarere Leistung.
First-Party-Sets
First-Party-Sets (FPS) sind Teil der Privacy Sandbox. So können Organisationen Beziehungen zwischen Websites deklarieren, damit Browser entscheiden können, wann der Zugriff von Drittanbieter-Cookies für Websites innerhalb eines Sets eingeschränkt werden soll. FPS wurde in Chrome 113 gestaffelt eingeführt.
CSS-Medienfunktionen und mehr
Chrome 113 enthält die Medienfunktionen overflow-inline
und overflow-block
.
und die Medienfunktion update
.
Außerdem ist die linear()
-Glättungsfunktion enthalten. Weitere Informationen finden Sie im Artikel Komplexe Animationskurven in CSS mit der linear()
-Glättungsfunktion erstellen.
Unterstützte Browser
Funktionen der CSS-Farbebene 4
Firefox 113 enthält die Funktionsnotationen color()
, lab()
, lch()
, oklab()
, oklch()
und color-mix()
sowie die Eigenschaft „forced-color-adjust“. Das bedeutet, dass die neuen Farbräume und Funktionen jetzt in allen drei Haupt-Rendering-Engines unterstützt werden. Weitere Informationen zu diesen Farbräumen und Funktionen finden Sie im High Definition CSS-Farbleitfaden.
Mehr Kontrolle über :nth-child()
-Auswahlen
In Firefox 113 können Sie außerdem eine Auswahlliste an :nth-child()
und nth-last-child()
übergeben. Weitere Informationen und Beispiele finden Sie im Beitrag Mehr Kontrolle über :nth-child()-Auswahlen mit der Syntax „of S“.
Unterstützte Browser
Compressions Streams API
Die Compression Streams API wird jetzt in allen drei Haupt-Engines unterstützt, da sie in Firefox 113 enthalten ist. Sie ermöglicht die Komprimierung und Dekomprimierung von Streams. Das bedeutet, dass JavaScript-Anwendungen keine Komprimierungsbibliothek mehr enthalten müssen.
CSS-Verschachtelung
In Safari 16.5 wurden die meisten Probleme behoben. Außerdem wird jetzt CSS-Verschachtelung unterstützt. Mit dem neuen Verschachtelungs-Selektor >
können Entwickler, die Präprozessoren verwendet haben, ähnliche Stilregeln auf eine vertraute Weise verschachteln:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
Schlagzeilen mit text-wrap: balance
ausbalancieren
Ab Chrome 114 können Sie text-wrap: balance
verwenden. So können Sie die Überschriften ausbalancieren und vermeiden, dass in der letzten Zeile nur ein Wort steht. Das Ergebnis ist ansprechender und besser lesbar. Weitere Informationen finden Sie unter CSS text-wrap: balance.
CHIPS: Cookies Having Independent Partitioned State
Im Rahmen der schrittweisen Abschaffung von Drittanbieter-Cookies können Sie mit CHIPS Drittanbieter-Cookies aktivieren, die mithilfe des neuen Cookie-Attributs Partitioned
nach Top-Level-Website partitioniert werden. CHIPS ist in Chrome 114 verfügbar.
Popover API
Chrome 114 enthält außerdem die Popover API, mit der sich leichter vorübergehende Benutzeroberflächenelemente erstellen lassen, die über der gesamten Benutzeroberfläche der Webanwendung angezeigt werden.
Dazu gehören interaktive Elemente wie Aktionsmenüs, Vorschläge für Formularelemente, Inhaltsauswahlen und die Benutzeroberfläche für die Ausbildung.
Mit dem neuen Pop-up-Attribut kann jedes Element automatisch in der obersten Ebene angezeigt werden. Das bedeutet, dass sich die Entwickler keine Gedanken mehr über Positionierung, Stapeln von Elementen, Fokus oder Tastaturinteraktionen machen müssen.
Weitere Informationen zur Popover API
Betaversionen von Browsern
Betaversionen von Browsern bieten eine Vorschau auf Funktionen, die in der nächsten stabilen Version des Browsers enthalten sein werden. Jetzt ist der ideale Zeitpunkt, um neue Funktionen oder Änderungen zu testen, die sich auf Ihre Website auswirken könnten, bevor sie allgemein verfügbar sind. Die neuen Betaversionen sind Firefox 114, Chrome 115 und Safari 16.6. Diese Releases bringen viele tolle Funktionen auf die Plattform. Alle Details finden Sie in den Versionshinweisen. Im Folgenden sind nur einige Highlights aufgeführt.
Chrome 115 unterstützt mehrere Werte für die CSS-Property display
. Das bedeutet, dass display: flex
zu display: block flex
und display: block
zu display: block flow
wird. Die einzelnen Werte werden als alte Keywords beibehalten. Sobald sie in Chrome Stable verfügbar sind, sind die mehreren Werte für alle Engines verfügbar.
Außerdem sind in Chrome 115 die Erweiterungen ScrollTimeline
und ViewTimeline
für die Web Animations-Spezifikation enthalten. So lassen sich Scroll-Animationen über CSS und JavaScript erstellen.
Firefox 114 enthält die WebTransport API, ein modernes Update für WebSockets, das mehrere Streams, unidirektionale Streams und die Übermittlung in einer anderen Reihenfolge unterstützt.
Teil der Serie Neu im Web