Neu auf der Webplattform im August

Hier finden Sie einige der interessanten Funktionen, die im August 2024 in stabilen und Betaversionen von Webbrowsern eingeführt wurden.

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

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

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 129.
  • Safari: not supported.

Source

responseStatus

Browser Support

  • Chrome: 109.
  • Edge: 109.
  • Firefox: 129.
  • Safari: not supported.

Source

toJSON()-Methoden für die Standortbestimmung

In Firefox 129 sind das GeolocationCoordinates.toJSON() und GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

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.