Neu auf der Webplattform seit Juli

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

Rachel Andrew

Stabile Browserversionen

Im Juli 2024 wurden Firefox 128, Safari 17.6 und Chrome 127 stabil. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.

CSS-Syntax für relative Farben

Firefox 128 enthält eine relative CSS-Farbsyntax, mit der Sie eine Farbe erstellen können, die sich auf eine Ursprungsfarbe bezieht. Mit dem folgenden CSS wird die Farbe indigo mithilfe von hsl() um die Hälfte entsättigt.

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Viele weitere Beispiele finden Sie im Blogpost CSS-Syntax für relative Farben. Die relative Farbsyntax ist eines der Schwerpunktthemen für Interop 2024. Dieses Update trägt dazu bei, die Bewertung für den stabilen Firefox zu verbessern.

Alternativtext für die Property content

Firefox 128 unterstützt alternativen Text für die CSS-Eigenschaft content, wenn sie ein Bild enthält. Der Alt-Text ist im Baum für Barrierefreiheit sichtbar. Das bedeutet, dass alternativer Text jetzt von allen Browsern für content unterstützt wird.

Durch ein Update in Chrome 127 wird sichergestellt, dass Chrome eine beliebige Anzahl von Elementen anstelle eines einzelnen Strings akzeptiert. So kann beispielsweise die Funktion attr() verwendet werden.

Das Attribut font-size-adjust

Chrome 127 enthält font-size-adjust, ein weiterer Schwerpunkt von Interop 2024. Diese Eigenschaft ist in Situationen nützlich, in denen ein Schriftart-Fallback auftreten kann, da Sie so die Größe einer Fallback-Schriftart an die erste Wahl anpassen können.

Mit dieser Chrome-Version wird das Attribut font-size-adjust Teil von Baseline Newly available.

Unterstützung der View Transition API in iframes

Ab Chrome 127 sind gleichzeitige Übergänge bei der Ansicht des gleichen Dokuments in einem Hauptframe und in einem iFrame mit demselben Ursprung möglich.

Bisher funktionierte das Ausführen eines Ansichtsübergangs mit „document.startViewTransition“ in einem iFrame mit demselben Ursprung nicht, wenn gleichzeitig im Hauptframe ein Übergang ausgeführt wurde. Der Übergang des iframe wird automatisch übersprungen. Jetzt werden beide Übergänge ausgeführt.

Per Tastatur fokussierbare Scroll-Container

Ab Chrome 127 sind Scroller standardmäßig per Klick fokussierbar und programmatisch fokussierbar. Scroller ohne untergeordnete fokussierbare Elemente können standardmäßig mit der Tastatur fokussiert werden.

Weitere Informationen zu dieser Änderung finden Sie im Beitrag Fokusfähige Scroller.

Die @property-Regel

Firefox 128 unterstützt die Regel @property und zugehörige JavaScript APIs. Sie können also benutzerdefinierte CSS-Properties erstellen, die eine Syntax, eine Vererbung und einen Anfangswert definieren.

Im folgenden Beispiel ist die benutzerdefinierte Property so definiert, dass nur ein <color>-Wert zulässig ist, dass sie nicht übernommen wird und dass sie den Anfangswert hotpink hat.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Die Regel @property ist jetzt Teil von „Baseline Newly available“. Weitere Informationen finden Sie unter @property: CSS-Variablen der nächsten Generation jetzt mit Unterstützung für universelle Browser.

ArrayBuffer mit anpassbarer Größe und erweiterbar SharedArrayBuffer

Resizer ArrayBuffer und SharedArrayBuffer werden jetzt in Firefox 128 unterstützt. Dadurch kann die Größe von Zwischenspeichern geändert werden, ohne dass ein neuer Zwischenspeicher zugewiesen und Daten in diesen kopiert werden muss. Diese Attribute verknüpfen auch Baseline Newly Availability.

Das Keyword safe in Flexbox-Eigenschaften

Safari 17.6 enthält hauptsächlich Fehlerkorrekturen für vorhandene Funktionen, aber auch das Keyword safe für Flexbox-Ausrichtungseigenschaften. Dadurch ist das Keyword safe plattformübergreifend kompatibel.

Mit dem Keyword safe wird verhindert, dass Inhalte aufgrund einer ausgewählten Ausrichtung außerhalb des sichtbaren Bereichs angezeigt werden. Im folgenden CodePen wird gezeigt, wie sich das bei mittig ausgerichteten Elementen verhält. Wenn die Ausrichtung auf center zu Datenverlusten führt, wird stattdessen start verwendet.

Betaversionen des Browsers

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 129 und Chrome 128. Die Betaversion von Safari 18 ist noch verfügbar. Diese Releases bringen viele tolle Funktionen auf die Plattform. Einzelheiten finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.

Chrome 128 enthält die CSS-Property ruby-align. Außerdem wurden Änderungen vorgenommen, um Zeilenumbrüche in Elementen mit display: ruby zu ermöglichen. Die Property zoom wurde ebenfalls an die Spezifikation angepasst. Die AudioContext API wurde aktualisiert. Es wurde ein AudiContext.onerror zugewiesener Rückruf hinzugefügt, der Fehler beim Erstellen und Rendern von AudioContext meldet.

Firefox 129 enthält die Regel @starting-style und das Attribut transition-behavior. Diese Properties werden Teil der Baseline „Neu verfügbar“ sein, sobald Firefox 129 für die stabile Version veröffentlicht wird.