Neu auf der Webplattform im Juni

Hier finden Sie einige interessante Funktionen, die im Juni 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.

Stabile Browserversionen

Im Juni 2024 wurden Firefox 127 und Chrome 126 als stabil eingestuft. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.

JavaScript-Set-Methoden

Mengen sind eine wichtige Datenstruktur in jeder Programmiersprache. Jetzt können Sie die integrierten Methoden von JavaScript verwenden, um Set-Operationen auszuführen. Die folgenden Methoden zum Festlegen von Einstellungen sind ab Firefox 127 verfügbar und wurden in die Baseline Newly Available aufgenommen:

Unterstützte Browser

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17.

Quelle

Weitere Informationen finden Sie unter Die JavaScript-Set-Methoden sind jetzt Teil der Baseline.

Async Clipboard API

Die Zwischenablage-API wird ab Firefox 127 vollständig unterstützt. Firefox unterstützt jetzt die ClipboardItem-Schnittstelle sowie die Methoden read() und write() der Zwischenablage-Schnittstelle. Weitere Informationen zur Clipboard API finden Sie unter Zugriff auf die Zwischenablage entsperren.

Unterstützte Browser

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Quelle

Farbinterpolation in CSS-Verläufen

CSS-Gradienten sind so angegeben, dass sie ein <color-interpolation-method> akzeptieren. Diese Funktion wird jetzt in Firefox unterstützt, sodass sie in allen gängigen Engines interoperabel ist. Sie können jetzt beispielsweise eine linear-gradient() mit dem hsl-Farbsystem und einer längeren Interpolation angeben.

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Unterstützte Browser

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

Ansichtsübergänge zwischen Dokumenten

Bisher mussten Sie Ihre Website in eine SPA umwandeln, um die View Transitions API verwenden zu können. Das ist jetzt nicht mehr der Fall. Ab Chrome 126 sind Ansichtsübergänge jetzt standardmäßig für Navigationen mit demselben Ursprung aktiviert. Sie können einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten mit derselben Quelle erstellen.

Damit ein Dokumentenübergang möglich ist, müssen beide Seiten die Funktion aktivieren. Verwenden Sie dazu die At-rule @view-transition und legen Sie den Navigationsdeskriptor auf auto fest.

@view-transition {
  navigation: auto;
}

Unterstützte Browser

  • Chrome: 126.
  • Edge: 126.
  • Firefox: Nicht unterstützt.
  • Safari Technology Preview: unterstützt

Weitere Informationen finden Sie in der Dokumentation zu Übergängen zwischen Dokumentansichten.

Die Gamepad API-Erweiterung trigger-rumble

In Chrome 126 wird die GamepadHapticActuator-Benutzeroberfläche erweitert, um die trigger-rumble-Funktion für kompatible Gamepads im Web verfügbar zu machen. Mit dieser Erweiterung können Webanwendungen, die die Gamepad API nutzen, auch die Trigger von Gamepad-Geräten mit dieser Funktion zum Vibrieren bringen.

Betaversionen von Browsern

Betaversionen von Browsern geben Ihnen einen Einblick in die 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 128, Chrome 127, Safari 18 und Safari 17.6. Diese Releases bringen viele tolle Funktionen auf die Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.

In Safari 17.6 wurden Fehlerkorrekturen für vorhandene Funktionen veröffentlicht. Safari 18 bietet eine Reihe spannender neuer Funktionen, darunter Style Container-Abfragen, die View Transition API für Single-Page-Apps und die Unterstützung des Schlüsselworts safe in Flexbox-Eigenschaften.

Chrome 127 enthält das CSS-Attribut font-size-adjust, die Möglichkeit, Alt-Text für generierte Inhalte als beliebige Anzahl von Elementen anzugeben, und die Möglichkeit, einzelne Kapitelinformationen in MediaMetaData hinzuzufügen.

Firefox 128 unterstützt CSS-Eigenschaften und ‑Werte. Daher ist diese Funktion jetzt als Baseline Newly Available (Neu in der Baseline) gekennzeichnet. Verwenden Sie @property, um eine type zu definieren und einen Fallbackwert für benutzerdefinierte CSS-Properties festzulegen.