Neu auf der Webplattform im September

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

Stabile Browserversionen

Im September 2024 wurden Firefox 130, Safari 18 und Chrome 129 als stabil eingestuft. Dieses beschäftigt sich mit den 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>. Diese Gruppe <details>-Elemente, bei denen jeweils nur ein Element innerhalb einer Gruppe offen sein kann . So kannst du ein exklusives Akkordeon ohne JavaScript erstellen.

Unterstützte Browser

  • Chrome: 120. <ph type="x-smartling-placeholder">
  • Edge: 120.
  • Firefox: 130
  • Safari: 17.2 <ph type="x-smartling-placeholder">

Animationen für „Automatisch“ 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. <ph type="x-smartling-placeholder">
  • Edge: Nicht unterstützt.
  • Firefox: nicht unterstützt
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Die CSS-Funktion calc-size() ist eine CSS-Funktion, die calc() ähnelt, unterstützt auch Operationen für genau ein unterstütztes Größen-Keyword. Unterstützte Keywords zur Größenanpassung sind auto, min-content, max-content und fit-content.

Unterstützte Browser

  • Chrome: 129. <ph type="x-smartling-placeholder">
  • Edge: 129. <ph type="x-smartling-placeholder">
  • Firefox: Nicht unterstützt. <ph type="x-smartling-placeholder">
  • Safari: Nicht unterstützt.

Quelle

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 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. <ph type="x-smartling-placeholder">
  • Firefox: Nicht unterstützt.
  • Safari: 16.4. <ph type="x-smartling-placeholder">

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

Unterstützte Browser

  • Chrome: 94. <ph type="x-smartling-placeholder">
  • Edge: 94. <ph type="x-smartling-placeholder">
  • 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. Dies ist beispielsweise der Fall, wenn Sie eine wiederverwendbare Komponente mit mehreren Varianten haben.

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • 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 bei der Dokumentansicht für SPAs, können Sie visuelle Übergänge zwischen verschiedenen Zuständen einer App erstellen.

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: 18.

Quelle

Weitere Informationen zu Übergängen zwischen Ansichten desselben Dokuments

Betaversionen von Browsern

Beta-Browserversionen bieten Ihnen eine Vorschau auf die Dinge, die in den nächsten die stabile Version des Browsers. 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). Es gibt auch bessere Fehlerberichte in IndexedDB, und ein neues connected-Attribut für die Web-Serial-SerialPort-Schnittstelle.

Safari 18.1 ist eine Version von Fehlerkorrekturen für bestehende Funktionen.