Neu auf der Webplattform im Mai

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

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.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox-Technologievorschau: unterstützt.
  • Safari-Technologievorschau: unterstützt.

Quelle

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.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 66.
  • Safari: 17.

Quelle

Und die Medienfunktion „update“.

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Quelle

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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Funktionen der CSS-Farbe 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.

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2

Quelle

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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 9.

Compressions Streams API

Dank der Einbindung in Firefox 113 wird das Compressions Streams API jetzt von allen drei großen Suchmaschinen unterstützt und ermöglicht die Komprimierung und Dekomprimierung von Streams. Das bedeutet, dass JavaScript-Anwendungen keine Komprimierungsbibliothek mehr enthalten müssen.

Unterstützte Browser

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113
  • Safari: 16.4

Quelle

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;
   
}
 
}
}

Unterstützte Browser

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Quelle

Anzeigentitel und text-wrap: balance ausgleichen

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 leichter zu lesen. Weitere Informationen finden Sie unter CSS-Textumbruch: Guthaben.

Unterstützte Browser

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

Quelle

CHIPS: Cookies mit unabhängigem partitionierten Status

Im Rahmen der Einstellung von Drittanbieter-Cookies ermöglicht CHIPS die Partitionierung von Drittanbieter-Cookies nach der Top-Level-Website mithilfe des neuen Cookie-Attributs Partitioned. 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

Unterstützte Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 120.
  • Safari: 17.

Quelle

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. Neue 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.

Chrome 115 enthält außerdem die Erweiterungen ScrollTimeline und ViewTimeline der Spezifikation für Webanimationen. 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 anderer Reihenfolge unterstützt.

Teil der Reihe „Neu im Web“