Entdecke einige der interessanten Funktionen, die jetzt in der stabilen Version und in der Betaversion verfügbar sind. im Juli 2024.
Stabile Browserversionen
Ab Juli 2024 werden Firefox 128, Safari 17.6 und Chrome 127 ist jetzt stabil. In diesem Beitrag geht es um die neuen Funktionen der Webplattform.
Relative CSS-Farbsyntax
Firefox 128 umfasst
Relative CSS-Farbsyntax
Damit können Sie eine Farbe relativ zur ursprünglichen Farbe erstellen.
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);
}
Unterstützte Browser
- 119
- 119
- 128
- 16.4
Viele weitere Beispiele finden Sie im Blogpost. Relative CSS-Farbsyntax: Die relative Farbsyntax ist einer der Schwerpunkte beim Interop 2024. Dieses Update trägt also dazu bei, die Punktzahl für die stabile Version von Firefox zu verbessern.
Alternativer Text für die Eigenschaft content
Firefox 128 unterstützt alternativen Text für die CSS-Eigenschaft content
.
wenn sie ein Bild enthält. Der Alt-Text wird im Baum für Barrierefreiheit angezeigt.
Das bedeutet, dass alternativer Text für content
jetzt von allen Browsern unterstützt wird.
Unterstützte Browser
- 77
- 79
- 128
- 17,4
Durch ein Update in Chrome 127 wird sichergestellt, dass Chrome eine beliebige Anzahl von
statt nur eines einzelnen Strings, können Sie attr()
verwenden.
verwenden.
Das Attribut font-size-adjust
Chrome 127 enthält font-size-adjust
, auch ein Schwerpunktbereich des Interop 2024.
Diese Eigenschaft ist nützlich,
wenn Schriftart-Fallbacks auftreten,
da Sie so die Größe einer Fallback-Schriftart
an die erste Wahl anpassen können.
Mit dieser Chrome-Version wird die Eigenschaft font-size-adjust
Teil von
Baseline neu verfügbar.
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 iFrames wird automatisch übersprungen. Jetzt werden beide Übergänge ausgeführt.
Fokussierbare Scroll-Container (Tastatur)
Ab Chrome 127 sind Bildlaufleisten fokussierbar und programmatisch fokussierbar. ist standardmäßig aktiviert. Bildlaufleisten ohne fokussierbare untergeordnete Elemente sind standardmäßig per Tastatur fokussierbar.
Weitere Informationen zu dieser Änderung findest du in diesem Beitrag Fokusierbare Scroller auf der Tastatur.
Die @property
-Regel
Firefox 128 unterstützt die @property
-Regel und zugehöriges JavaScript
APIs Das bedeutet, dass Sie benutzerdefinierte CSS-Eigenschaften erstellen können, die eine Syntax,
Vererbung und einen Anfangswert.
Im folgenden Beispiel ist die benutzerdefinierte Eigenschaft so definiert, dass sie einen <color>
akzeptiert.
, um nicht zu übernehmen und den anfänglichen Wert hotpink
zu haben.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Die Regel „@property
“ ist jetzt Teil von „Baseline neu verfügbar“. 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
Größenanpassung ArrayBuffer und wachsend SharedArrayBuffer in Firefox 128 unterstützt, sodass die Größe von Puffern geändert werden kann, ohne eine und kopieren Sie Daten hinein. Diese Properties verknüpfen auch Baseline Newly Availability.
Das Schlüsselwort safe
in den Flexbox-Eigenschaften
Safari 17.6 ist meist
eine Version von Korrekturen bestehender Funktionen,
enthält aber auch das Schlüsselwort safe
für Flexbox-Ausrichtungseigenschaften.
Dadurch ist das Keyword safe
browserübergreifend interoperabel.
Unterstützte Browser
- 115
- 115
- 63
- 18
Das Keyword safe
verhindert eine ausgewählte Ausrichtung, dass Inhalte außerhalb des
sichtbaren Bereich. Der folgende CodePen zeigt, wie dies funktioniert
mit zentrierten Elementen. Wenn die center
-Ausrichtung einen Datenverlust verursacht,
Stattdessen wird start
verwendet.
Betaversionen des Browsers
Beta-Browserversionen bieten Ihnen eine Vorschau auf Dinge, die in den nächsten die stabile Version des Browsers. Jetzt ist ein guter Zeitpunkt, neue Funktionen zu testen. zu entfernen, die sich auf deine Website auswirken könnten, Neu Betas sind Firefox 129 und Chrome 128 Die Safari 18 die Beta-Phase ist noch nicht abgeschlossen. Diese Releases bieten viele tolle Funktionen auf der Plattform. Release ansehen Notizen zu allen Einzelheiten. Hier sind nur einige der Highlights:
Chrome 128 enthält die CSS-Eigenschaft ruby-align
sowie Änderungen an
Zeilenumbrüche innerhalb von Elementen möglich, die display: ruby
enthalten
Die Eigenschaft zoom
wurde ebenfalls aktualisiert, um der Spezifikation zu entsprechen. Es gibt
ein Update der AudioContext
API, um einen zugewiesenen Callback hinzuzufügen
AudiContext.onerror
, die Fehler beim Erstellen und Rendern von AudioContext meldet.
Firefox 129 enthält die @starting-style
-Regel und die transition-behavior
Property. Diese Properties werden in „Baseline Newly Availability“ aufgenommen, sobald sie verfügbar ist
Firefox 129 wurde als stabil veröffentlicht.