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