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 Technology Preview: unterstützt
  • Safari Technology Preview: 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-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.

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

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.

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

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.

Unterstützte Browser

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

Quelle

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

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