Hier finden Sie einige der interessanten Funktionen, die im August 2024 in stabilen und Betaversionen von Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im August 2024 wurden Firefox 129 und Chrome 128 als stabile Versionen veröffentlicht. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.
Aktualisierungen bei der Ruby-Formatierung
Das HTML-Element <ruby>
ist ein leistungsstarkes Tool zur Verbesserung der Textdarstellung, insbesondere für ostasiatische Sprachen. Mit diesem Element können Sie phonetische Anmerkungen oder andere ergänzende Informationen über oder neben dem Basistext anzeigen. Ab Chrome 128 können Sie Ruby-Anmerkungen zeilenbrüchen und mit der CSS-Eigenschaft ruby-align
formatieren.
Weitere Informationen finden Sie unter <ruby>
- und ruby-align
-Eigenschaft für zeilenabreißbare Elemente.
PointerEvent.deviceProperties
für Zeichnen mit mehreren Eingabestiften
Diese Änderung, die in Chrome 128 eingeführt wird, bietet eine sichere und zuverlässige Möglichkeit, einzelne Stifte (Cursor), die mit dem Display interagieren, zu identifizieren, um für jedes Gerät, das mit dem Digitizer interagiert, bestimmte Farben oder Stiftformen festzulegen. Sie erweitert die PointerEvent
-Schnittstelle um ein neues Attribut, deviceProperties
. Es enthält das Attribut uniqueId
, das eine eindeutige Kennung darstellt, die für die gesamte Sitzung gültig ist und sich auf ein einzelnes Dokument bezieht. Damit können Sie einzelne Stifte, die mit der Seite interagieren, zuverlässig identifizieren.
Promise.try
Außerdem können Sie in Chrome 128 mit Promise.try
Fehler mit Promises einfacher verarbeiten. Es gibt ein Muster, bei dem Sie eine Funktion f
haben. Diese Funktion kann asynchron sein und ein Versprechen zurückgeben oder auch nicht. Wenn Sie die Promise-Semantik verwenden möchten, um in beiden Fällen Fehler zu behandeln, müssen Sie die Funktion in ein Promise einschließen. Normalerweise wird dies mit new Promise(resolve => resolve(f()))
erreicht.
Promise.try
ist eine einfachere Möglichkeit, dasselbe zu erreichen. Sie können damit eine Promise-Kette starten, die alle Fehler in .catch
-Handlern abfängt, anstatt sowohl synchrone als auch asynchrone Ausnahmeflüsse verarbeiten zu müssen.
Einblendungseffekte animieren
Firefox 129 enthält zwei CSS-Funktionen, die zum Animieren von Eingabeeffekten verwendet werden. Diese Funktionen sind jetzt als Baseline Newly Available verfügbar.
Mit der @starting-style
-Regel werden die ursprünglichen Stile eines Elements definiert, bevor es auf der Seite gerendert wird. Dies ist für Elemente erforderlich, die von „display: none“ aus animiert werden, da sie einen Status benötigen, von dem aus sie animiert werden.
Für Einblendungseffekte ist außerdem die Animation diskreter Properties erforderlich, bei denen keine Interpolation zwischen Werten möglich ist.
Das ist jetzt mit transition-behavior: allow-discrete
oder dem Wert allow-discrete
in der Kurzschreibweise für Übergänge möglich.
Diese Funktion wird jetzt auch in Firefox 129 unterstützt.
Weitere Informationen finden Sie unter Jetzt in Baseline: Einblendeffekte animieren.
Ergänzungen zu PerformanceResourceTiming
In Firefox 129 wurden die Properties contentType
und responseStatus
der PerformanceResourceTiming
-Benutzeroberfläche hinzugefügt.
Sie geben den Inhaltstyp der abgerufenen Ressource bzw. den HTTP-Statuscode der Antwort zurück, der beim Abrufen der Ressource zurückgegeben wurde.
contentType
responseStatus
toJSON()
-Methoden für die Standortbestimmung
In Firefox 129 sind das GeolocationCoordinates.toJSON()
und GeolocationPosition.toJSON()
.
WebDriver BiDi
Firefox 129 unterstützt jetzt WebDriver BiDi. Das bedeutet, dass Sie Puppeteer für Automatisierungen entweder mit Chrome oder Firefox verwenden können. Weitere Informationen finden Sie unter WebDriver BiDi production-ready in Firefox, Chrome and Puppeteer (WebDriver BiDi für die Produktion in Firefox, Chrome und Puppeteer bereit) und Announcing Official Puppeteer Support for Firefox (Offizielle Puppeteer-Unterstützung für Firefox angekündigt).
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. Neue Betaversionen sind Firefox 130 und Chrome 129. Die Betaversion von Safari 18 ist noch verfügbar. Diese Releases bringen viele tolle Funktionen auf die Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.
Firefox 130 unterstützt das Attribut „name“ des <details>
-Elements, das <details>
-Elemente gruppiert. Dabei kann jeweils nur ein Element innerhalb einer Gruppe geöffnet sein. So können Sie ein exklusives Akkordeon erstellen, ohne JavaScript zu verwenden.
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()
ist eine CSS-Funktion, die der Funktion calc()
ähnelt. Sie unterstützt jedoch auch Operationen auf genau einem unterstützten Größen-Keyword. Derzeit werden die Keywords auto
, min-content
, max-content
und fit-content
unterstützt.
In Chrome 129 gibt es auch Intl.DurationFormat
, mit dem sich Zeiträume formatieren lassen, z. B. „1 Stunde 40 Minuten 30 Sekunden“, und das mehrere Sprachen unterstützt.