Neu auf der Webplattform im September

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

Im September 2024 wurden Firefox 130, Safari 18 und Chrome 129 als stabil eingestuft. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.

Exklusive Akkordeons mit dem name-Attribut für <details>

Firefox 130 unterstützt das Attribut name des Elements <details>. Hier werden <details>-Elemente gruppiert, wobei jeweils nur ein Element innerhalb einer Gruppe geöffnet sein kann. So können Sie ein exklusives Akkordeon erstellen, ohne JavaScript zu verwenden.

Browser Support

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

„Zu „Automatisch“ animieren“ und mehr

In Chrome 129 werden die CSS-Eigenschaft interpolate-size und die Funktion calc-size() hinzugefügt.

Mit der CSS-Eigenschaft interpolate-size können auf einer Seite Animationen und Übergänge für CSS-interne Größen-Keywords wie auto, min-content und fit-content aktiviert werden, sofern diese Keywords animiert werden können.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

Die CSS-Funktion calc-size() ähnelt der Funktion calc(), unterstützt aber auch Operationen auf genau einem unterstützten Größen-Keyword. Unterstützte Größen-Keywords sind auto, min-content, max-content und fit-content.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

Weitere Informationen finden Sie unter „animate to height: auto;“ (und andere Keywords zur benutzerdefinierten Größenanpassung) in CSS animieren.

Dauern in JavaScript formatieren

In Chrome 129 gibt es außerdem Intl.DurationFormat, eine Methode zum Formatieren von Zeiträumen, z. B. „1 Stunde 40 Minuten 30 Sekunden“, die mehrere Sprachen unterstützt.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

Die Web Codecs API wird jetzt in Firefox 130 auf dem Computer unterstützt. Webentwickler erhalten damit Low-Level-Zugriff auf die einzelnen Frames eines Videostreams und Audio-Chunks. Zu den neuen Oberflächen gehören: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame und VideoColorSpace. Diese API macht Baseline Newly nicht wirklich verfügbar, da sie noch nicht in Firefox für Android unterstützt wird. Es gibt jedoch Unterstützung für Firefox Nightly für Android.

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

CSS-Styleabfragen für benutzerdefinierte Properties

Safari 18 unterstützt mehrere neue Funktionen, darunter CSS-Stilabfragen. Mit Stilabfragen können Sie wiederverwendbare Stile erstellen und als Gruppe anwenden. Das ist beispielsweise der Fall, wenn Sie eine wiederverwendbare Komponente mit mehreren Varianten haben.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Weitere Informationen zu CSS-Suchanfragen

Übergänge zwischen denselben Dokumentansichten

Safari 18 unterstützt auch Übergänge zwischen Ansichten desselben Dokuments für SPAs, sodass Sie visuelle Übergänge zwischen verschiedenen Status einer App erstellen können.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Weitere Informationen zu Übergängen zwischen Ansichten desselben Dokuments

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. Die neuen Betaversionen sind Firefox 131, Chrome 130 und Safari 18.1. Diese Releases bringen viele tolle Funktionen auf die Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.

Firefox 131 enthält neue JavaScript-Iterator-Hilfsfunktionen und Cookies Having Independent Partitioned State (CHIPS) ist jetzt aktiviert.

Chrome 130 unterstützt box-decoration-break: clone sowohl für die Inline-Fragmentierung (Zeilenlayout) als auch für die Blockfragmentierung (Fragmente, die für das Drucken und für mehrere Spalten erstellt wurden). Außerdem gibt es eine bessere Fehlermeldung in IndexedDB und ein neues connected-Attribut für die Web Serial SerialPort-Schnittstelle.

Safari 18.1 enthält Fehlerkorrekturen für vorhandene Funktionen.