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.

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 unterstützt die relative CSS-Farbsyntax, mit der Sie eine Farbe relativ zu einer Ausgangsfarbe erstellen können. Im folgenden CSS-Code wird die Farbe indigo mit hsl() um die Hälfte entsättigt.

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

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

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.

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

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 font-size-adjust-Attribut

Chrome 127 enthält font-size-adjust, ein weiterer Schwerpunkt von Interop 2024. Diese Eigenschaft ist nützlich, wenn ein Schriftfallback auftritt, da Sie damit die Größe einer Fallback-Schrift an die Schrift der ersten Wahl anpassen können.

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

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

Unterstützung der View Transition API in iframes

In Chrome 127 sind dann gleichzeitige Ansichtsübergänge im selben Dokument in einem Hauptframe und einem iFrame mit demselben Ursprung verfügbar.

Bisher funktionierte das Ausführen eines Ansichtsübergangs mit der Funktion „document.startViewTransition“ in einem IFrame mit demselben Ursprung nicht, wenn im Hauptframe gleichzeitig 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 Bildlaufleisten, die sich per Tastatur fokussieren lassen.

Die @property-Regel

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

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

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 der Baseline „Neu verfügbar“. Weitere Informationen finden Sie unter @property: Next-Gen-CSS-Variablen jetzt mit universeller Browserunterstützung.

Vergrößerbar ArrayBuffer und erweiterbar SharedArrayBuffer

In Firefox 128 werden jetzt die veränderbare ArrayBuffer und die erweiterbare SharedArrayBuffer unterstützt. So kann die Größe von Buffers geändert werden, ohne dass ein neuer Buffer zugewiesen und Daten in ihn kopiert werden müssen. Diese Properties werden auch in „Baseline Newly Available“ aufgenommen.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 128.
  • Safari: 16.4.

Source

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.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

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 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 129 und Chrome 128. 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.

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 Newly Available, sobald Firefox 129 für die stabile Version veröffentlicht wird.