Hier finden Sie einige der interessanten Funktionen, die im Juli 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.
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 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
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
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.
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.
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.
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
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.