Neu auf der Webplattform seit Juli

Entdecke einige der interessanten Funktionen, die jetzt in der stabilen Version und in der Betaversion verfügbar sind. im Juli 2024.

Rachel Andrew

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.

Unterstützte Browser

  • 127
  • 127
  • 3
  • 16.4

Quelle

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.

Unterstützte Browser

  • 85
  • 85
  • 128
  • 16.4

Quelle

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.

Unterstützte Browser

  • 111
  • 111
  • 128
  • 16.4

Quelle

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.