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

Unterstützte Browser

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

Unterstützte Browser

  • Chrome: 129.
  • Edge: Nicht unterstützt.
  • Firefox: nicht unterstützt
  • Safari: wird nicht unterstützt.

Quelle

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.

Unterstützte Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Weitere Informationen finden Sie unter Animieren zu Höhe: auto; (und andere Schlüssel zur Größenanpassung) in CSS.

Dauer in JavaScript formatieren

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

Unterstützte Browser

  • Chrome: 129.
  • Edge: 129.
  • Firefox: Nicht unterstützt.
  • Safari: 16.4.

Quelle

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 stellt Baseline Newly nicht ganz zur Verfügung, da sie in Firefox Android noch nicht unterstützt wird. Firefox Nightly wird für Android jedoch noch nicht unterstützt.

Unterstützte Browser

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

Quelle

CSS-Stilabfragen für benutzerdefinierte Eigenschaften

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.

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Nicht unterstützt.
  • Safari: 18.

Quelle

Weitere Informationen zu CSS-Suchanfragen

Übergänge in derselben Dokumentansicht

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

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Nicht unterstützt.
  • Safari: 18.

Quelle

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. Dies ist eine gute Gelegenheit, neue Funktionen oder Löschungen zu testen, die sich auf deine Website auswirken könnten, bevor diese Funktion veröffentlicht wird. Neue Betaversionen sind Firefox 131, Chrome 130 und Safari 18.1. Diese Releases bringen viele tolle Funktionen auf die Plattform. Alle Details finden Sie in den Versionshinweisen. Hier sind nur ein paar Highlights.

Firefox 131 enthält neue Hilfsprogramme für JavaScript-Iteratoren. Außerdem ist Cookies Having Independent Partitioned State (CHIPS) 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.