Neu auf der Webplattform im Mai

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

Stabile Browserversionen

Seit Mai 2023 sind Firefox 113, Chrome 113, Chrome 114 und Safari 16.5 stabil. Sehen wir uns einmal an, was das für die Webplattform bedeutet.

WebGPU

Chrome 113 enthält WebGPU, den Nachfolger der WebGL- und WebGL 2-Grafik-APIs für das Web. Sie bietet moderne Funktionen wie GPU-Computing, geringeren Zugriff auf GPU-Hardware, die Möglichkeit, von einem einzigen Grafikgerät aus auf mehreren Canvases zu rendern, sowie eine bessere, vorhersagbare Leistung.

Unterstützte Browser

  • 113
  • 113
  • x

Quelle

First-Party-Sets

First-Party-Sets (FPS) sind Teil der Privacy Sandbox. Auf diese Weise können Organisationen Beziehungen zwischen Websites angeben, sodass Browser entscheiden können, wann ein eingeschränkter Zugriff auf Drittanbieter-Cookies für Websites innerhalb einer Gruppe zugelassen wird. FPS begann in Chrome 113 mit einem gestaffelten Roll-out.

CSS-Medienfunktionen und mehr

Für CSS enthält Chrome 113 die Medienfunktionen overflow-inline und overflow-block.

Unterstützte Browser

  • 113
  • 113
  • 66
  • 17

Quelle

Und die Medienfunktion update.

Unterstützte Browser

  • 113
  • 113
  • 102
  • 17

Quelle

Dazu gehört auch die Easing-Funktion linear(). Weitere Informationen finden Sie im Artikel Mit der Easing-Funktion linear() komplexe Animationskurven in CSS erstellen.

Unterstützte Browser

  • 113
  • 113
  • 112
  • 17,2

Funktionen der CSS-Farbstufe 4

Firefox 113 enthält die funktionalen Notationen color(), lab(), lch(), oklab(), oklch() und color-mix() sowie die Eigenschaft für die erzwungene Farbanpassung. Das bedeutet, dass die neuen Farbräume und -funktionen nun von allen drei großen Suchmaschinen unterstützt werden. Weitere Informationen zu diesen Farbräumen und Funktionen finden Sie im High Definition-CSS-Farbleitfaden.

Unterstützte Browser

  • 111
  • 111
  • 113
  • 16,2

Quelle

Mehr Kontrolle über die Auswahl von :nth-child()

In Firefox 113 wurde außerdem die Möglichkeit hinzugefügt, eine Auswahlliste an :nth-child() und nth-last-child() zu übergeben. Weitere Informationen sowie Beispiele finden Sie im Beitrag Mehr Kontrolle über die Auswahl von „:nth-child()“ mit der Syntax von S.

Unterstützte Browser

  • 111
  • 111
  • 113
  • 9

Compressions Streams API

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

Unterstützte Browser

  • 80
  • 80
  • 113
  • 16.4

Quelle

CSS-Verschachtelung

In Safari 16.5 wurden Probleme weitgehend behoben, aber es wird jetzt auch CSS-Verschachtelung unterstützt. Der neue Verschachtelungsselektor > dient zum Verschachteln verwandter Stilregeln auf eine Weise, die Entwicklern, die Vorprozessoren verwendet haben, vertraut ist:

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Unterstützte Browser

  • 120
  • 120
  • 117
  • 17,2

Quelle

Anzeigentitel und „text-wrap: balance“ werden ausgeglichen

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 einziges Wort steht, was ein angenehmeres und besser lesbares Ergebnis ermöglicht. Weitere Informationen finden Sie unter CSS text-wrap: Balancing.

Unterstützte Browser

  • 114
  • 114
  • 121
  • 17,4

Quelle

CHIPS: Cookies mit unabhängig partitioniertem Status

Im Rahmen der Einstellung von Drittanbieter-Cookies ermöglicht CHIPS, dass Drittanbieter-Cookies mithilfe des neuen Cookie-Attributs Partitioned nach Website der obersten Ebene partitioniert werden. CHIPS ist in Chrome 114 verfügbar.

Popover API

In Chrome 114 gibt es außerdem die Popover API. Diese vereinfacht die Erstellung temporärer UI-Elemente, die über allen anderen Web-App-UIs angezeigt werden.

Dazu gehören für Nutzer interaktive Elemente wie Aktionsmenüs, Vorschläge für Formularelemente, Inhaltsauswahl und UI für Lernende.

Mit dem neuen Pop-over-Attribut kann jedes Element automatisch auf der obersten Ebene angezeigt werden. Sie müssen sich also keine Gedanken mehr um die Positionierung, das Stapeln von Elementen, den Fokus oder die Tastaturinteraktionen machen.

Weitere Informationen finden Sie unter Einführung in die Popover API.

Unterstützte Browser

  • 114
  • 114
  • 120
  • 17

Quelle

Beta-Browser-Releases

Beta-Browser-Versionen bieten eine Vorschau auf Elemente in der nächsten stabilen Version des Browsers. Dies ist ein guter Zeitpunkt, um neue Funktionen zu testen oder die Entfernung von Inhalten zu testen, die sich auf Ihre Website auswirken könnten, bevor die Veröffentlichung weltweit verfügbar ist. Die neuen Betaversionen sind Firefox 114, Chrome 115 und Safari 16.6. Diese Releases bieten viele tolle Funktionen auf der Plattform. Weitere Einzelheiten finden Sie in den Versionshinweisen. Hier sind nur ein paar Highlights.

Chrome 115 enthält mehrere Werte für die CSS-Eigenschaft 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 verwaltet. Sobald sie in der stabilen Chrome-Version vorhanden sind, sind sie dadurch in allen Suchmaschinen verfügbar.

Außerdem gibt es in Chrome 115 die Erweiterungen ScrollTimeline und ViewTimeline der Web Animations-Spezifikation. Diese ermöglichen scrollgesteuerte Animationen über CSS und JavaScript.

Firefox 114 enthält die WebTransport API, ein modernes Update für WebSockets, das mehrere Streams, unidirektionale Streams und die Auslieferung in falscher Reihenfolge unterstützt.

Teil der Reihe zum Thema „Neu im Web“