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