Neu auf der Webplattform im März

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

Seit März 2023 sind Firefox 111, Chrome 111 und Safari 16.4 stabil. Sehen wir uns an, was das für die Webplattform bedeutet.

Globale HTML-Attribute

Firefox 111 unterstützt jetzt einige nützliche globale HTML-Attribute. Mit dem Attribut autocapitalize wird gesteuert, ob Text automatisch großgeschrieben werden darf, wenn der Nutzer auf einer Bildschirmtastatur tippt.

Unterstützte Browser

  • 43
  • 79
  • 111
  • x

Quelle

Das translate-Attribut gibt an, ob ein Element übersetzt werden soll, wenn eine Seite lokalisiert wird.

Unterstützte Browser

  • 19
  • 79
  • 111
  • 6

Quelle

Ursprüngliches privates Dateisystem (OPFS)

Wenn die File System Access API verwendet wird, unterstützt Firefox jetzt das Origin Private File System (OPFS). Weitere Informationen zu OPFS

View Transitions API

In Chrome 111 wurde die View Transitions API hinzugefügt. Damit wird das Erstellen von ausgefeilten Übergängen in Single-Page-Apps (SPAs) einfacher, da Ansichten Snapshots erstellt und das DOM ohne Überschneidungen zwischen den Status geändert werden können.

Weitere Informationen

Unterstützte Browser

  • 111
  • 111
  • x
  • 18

Quelle

Neue CSS-Farbräume und -Funktionen

Chrome 111 bietet außerdem eine Reihe neuer Möglichkeiten, Farben im Web zu nutzen. Chrome unterstützt jetzt neben den Funktionen color() und color-mix() auch Farbräume, die auf Farben außerhalb des RGB-Farbraums zugreifen. Weitere Informationen finden Sie in unserer CSS-Farbübersicht in High Definition und im Blogpost zu color-mix().

Unterstützte Browser

  • 111
  • 111
  • 113
  • 16,2

Quelle

Die Chrome-Version umfasst außerdem neue Entwicklertools, die dir die Arbeit mit dieser neuen Farbfunktion erleichtern.

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

In Chrome 111 wurde die Möglichkeit hinzugefügt, eine Auswahlliste an :nth-child() und nth-last-child() zu übergeben. Weitere Informationen hierzu und Beispiele finden Sie im Beitrag Mehr Kontrolle über :nth-child()-Auswahlen mit der S-Syntax.

Unterstützte Browser

  • 111
  • 111
  • 113
  • 9

Unterstützung für vorherige und nächste Folie in der Media Session API

In dieser Liste der Neuerungen in Chrome 111 finden Sie schließlich die Aktionen zum Präsentieren von Folien für die Media Session API: "previousslide" und "nextslide".

Unterstützte Browser

  • 111
  • 111
  • x
  • x

Pseudoklassenunterstützung in Safari

Safari 16.4 ist eine faszinierende Version für die Webplattform. In diesem Artikel werden jedoch nicht alle Neuerungen behandelt. Eine vollständige Liste der Funktionen finden Sie in den Versionshinweisen zu Safari 16.4.

In dieser Version werden eine Reihe zusätzlicher CSS-Pseudoklassen unterstützt: :user-invalid, :user-valid, :dir(), :modal und :fullscreen.

Neue Bereichssyntax für Medienabfragen

Mit dieser Safari-Version ist die weitaus elegantere und nützlichere Bereichssyntax für Medienabfragen in allen drei Suchmaschinen interoperabel. Beispiele für diese Syntax finden Sie in diesem Beitrag, der veröffentlicht wurde, als die Syntax in Chrome verfügbar war.

Unterstützte Browser

  • 104
  • 104
  • 102
  • 16.4

Quelle

CSS-Attribute und -Werte

Safari 16.4 unterstützt @property und ermöglicht so die Registrierung benutzerdefinierter CSS-Eigenschaften direkt in einem Stylesheet. Weitere Informationen finden Sie unter @property: CSS-Variablen Superkräfte zuweisen.

Unterstützte Browser

  • 85
  • 85
  • 128
  • 16.4

Quelle

Support für die CSS API

Wir bieten CSS-Code fortlaufend mit der Unterstützung für CSS Typed OM an. Diese API stellt CSS-Werte als typisierte JavaScript-Objekte und nicht als Strings bereit. Sie erleichtert die Arbeit mit CSS aus JavaScript und ist leistungsfähiger als vorhandene Methoden.

Unterstützte Browser

  • 66
  • 79
  • x
  • 16.4

Quelle

Mit CSSStyleSheet() werden auch konstruierbare Stylesheets unterstützt. Dies ermöglicht die gemeinsame Nutzung von Stylesheets zwischen einem Dokument und seinen Schatten-DOM-Unterstrukturen. Bei dieser Version von Safari werden konstruierbare Stylesheets jetzt in allen drei Suchmaschinen unterstützt.

Unterstützte Browser

  • 73
  • 79
  • 101
  • 16.4

Quelle

Web Push und die Badging API

Safari unterstützt jetzt Web Push zusammen mit der Badging API, was für App-Entwickler tolle Neuigkeiten ist. Insbesondere bedeutet diese Version, dass Push-Benachrichtigungen von allen größeren Suchmaschinen unterstützt werden.

Unterstützte Browser

  • 42
  • 17
  • 44
  • 16

Quelle

Karten importieren

Eine weitere Neuerung, die den interoperablen Status ermöglicht, ist die neue JavaScript-Funktion Karten importieren, die das Importieren von ES-Modulen erheblich vereinfacht.

Unterstützte Browser

  • 89
  • 89
  • 108
  • 16.4

Betaversionen des Browsers

Beta-Browserversionen bieten Ihnen eine Vorschau auf Dinge, die in der nächsten stabilen Version des Browsers verfügbar sein werden. Dies ist eine gute Gelegenheit, neue Funktionen oder Entfernungen zu testen, die sich auf deine Website auswirken könnten, bevor diese Funktion veröffentlicht wird. Neue Betaversionen sind Firefox 112, Safari 16.5 und Chrome 112. Diese Releases bieten viele tolle Funktionen auf der Plattform. In den Versionshinweisen finden Sie alle Einzelheiten. Hier sind nur ein paar Highlights.

Firefox 112 unterstützt jetzt das Attribut inert, wodurch dieses nützliche Attribut in allen Suchmaschinen verfügbar gemacht wird. Weitere Informationen finden Sie unter Einführung inert. Firefox unterstützt außerdem die Easing-Funktion linear().

Chrome 112 und Safari 16.5 unterstützen beide die CSS-Verschachtelung, eine Funktion, die von vielen Entwicklern mit Spannung erwartet wurde.

Chrome 112 unterstützt auch animation-composition. Weitere Informationen zu dieser Eigenschaft finden Sie im Artikel Festlegen, wie mehrere Animationseffekte mit der Funktion "animation-composition" zusammengesetzt werden sollen.

Wenn Sie den monitorlosen Modus von Chrome verwenden, zum Beispiel mit Puppeteer, bietet Version 112 einen völlig neuen monitorlosen Modus. Weitere Informationen dazu finden Sie im Hilfeartikel Der monitorlose Modus in Chrome wird aktualisiert.

Teil der Reihe Neues im Web