Neu auf der Webplattform im Mai

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

Im Mai 2024 sind Firefox 126, Safari 17.5 und Chrome 125 stabil. In diesem Beitrag werden die neuen Funktionen der Webplattform beschrieben.

CSS-Ankerpositionierung

In Chrome 125 ist die CSS-Ankerpositionierung verfügbar. So können Sie ein absolut positioniertes Element deklarativ ohne JavaScript mit einem oder mehreren anderen Elementen auf der Seite (den Ankern) verknüpfen. Die Ankerpositionierung funktioniert am besten, wenn die Anker gescrollt werden können. Ein häufiger Anwendungsfall besteht darin, ein Pop-over, z. B. eine Kurzinfo, neben dem Element zu platzieren, das es aufgerufen hat, oder ein Auswahlmenü und die zugehörige Popover-Optionsliste.

Weitere Informationen finden Sie unter Die CSS Anchor Positioning API.

Unterstützte Browser

  • 125
  • 125
  • x
  • x

Quelle

CSS-Funktionen für schrittweise Werte: round(), mod() und rem()

Chrome 125 enthält auch die abgestuften Wertefunktionen. Das bedeutet, dass diese Funktionen jetzt als neue Referenzfunktionen verfügbar sind. Die Stufenwertfunktionen round(), mod() und rem() transformieren einen bestimmten Wert nach einem anderen "Schrittwert".

Weitere Informationen finden Sie unter Die mathematischen Funktionen für abgestufte CSS-Werte sind jetzt in Baseline 2024 verfügbar.

Unterstützte Browser

  • 125
  • 125
  • 118
  • 15,4

Quelle

Die light-dark()-Funktion

Außerdem ist die CSS-Farbfunktion light-dark() in Safari 17.5 Teil von „Baseline“.

light-dark() ist eine Funktion, die zwei Argumente akzeptiert, von denen beide ein <color> sein müssen. Eine der beiden Optionen wird je nach verwendetem Farbschema ausgewählt.

  • Wenn das verwendete Farbschema light oder unbekannt ist, wird der berechnete Wert des ersten Werts zurückgegeben.
  • Wenn das verwendete Farbschema dark ist, wird der berechnete Wert der zweiten Farbe zurückgegeben.

Weitere Informationen finden Sie unter Von CSS-Farbschema abhängige Farben mit „Helldunkel()“ .

Unterstützte Browser

  • 123
  • 123
  • 120
  • 17,5

Quelle

Die Screen Wake Lock API

In Firefox 126 ist die Screen Wake Lock API verfügbar, eine weitere Funktion, die jetzt Teil der neuen Baseline Newly-Funktion ist. Mit dieser API kann verhindert werden, dass das Gerät gedimmt oder gesperrt wird.

Informationen zur Verwendung dieser Funktion finden Sie unter Mit der Screen Wake Lock API aktiv bleiben.

Unterstützte Browser

  • 84
  • 84
  • 126
  • 16.4

Quelle

Compute Pressure API

Die Compute Pressure API bietet allgemeine Status, die die CPU-Auslastung des Systems darstellen. Bei der Implementierung können die richtigen Hardwaremesswerte verwendet werden, um sicherzustellen, dass die Nutzer die gesamte ihnen zur Verfügung stehende Rechenleistung nutzen können, solange das System nicht unter einer unkontrollierbaren Belastung steht.

Diese Funktion ist in Chrome 125 verfügbar. Die Entwicklungs- und Implementierungsarbeiten dieser API wurden von Intel geleitet. Sie ermöglicht es Videokonferenzanwendungen, Funktionen und Leistung dynamisch auszugleichen.

Dokumentation zur Compute Pressure API

Unterstützte Browser

  • 125
  • 125
  • x
  • x

Quelle

Die @starting-style-Regel

Safari 17.5 enthält die Regel @starting-style. Mit dieser CSS-At-Regel können Sie einen Stil anwenden, den der Browser aufrufen kann, bevor das Element auf der Seite geöffnet wird, wie für die Animation eines Eintrags erforderlich.

Die @starting-style-Regel ist eine der Funktionen, die unter Vier neue CSS-Funktionen für reibungslose Einstiegs- und Exit-Animationen behandelt werden.

Unterstützte Browser

  • 117
  • 117
  • x
  • 17,5

Quelle

Beta-Browser-Releases

Betaversionen des Browsers liefern Ihnen eine Vorschau auf Elemente, die sich in der nächsten stabilen Version des Browsers befinden werden. Dies ist ein guter Zeitpunkt, um neue Funktionen zu testen oder zu entfernen, die sich auf deine Website auswirken könnten, bevor die Veröffentlichung weltweit verfügbar ist. Die neuen Betaversionen sind Firefox 127 und Chrome 126. Diese Releases bieten viele tolle Funktionen auf der Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier ein paar Highlights:

Chrome 126 bietet dokumentübergreifende Ansichtsübergänge für Navigationen am selben Ursprung. Bisher mussten Sie Ihre Website in eine SPA umwandeln, um die View Transitions API verwenden zu können. Das ist jetzt nicht mehr der Fall. Übergänge für Ansichten sind jetzt standardmäßig für Navigationen am selben Ursprung aktiviert. Sie können einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten mit demselben Ursprung erstellen.

Firefox 127 enthält zusätzliche JavaScript-Set-Methoden: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() und isDisjointFrom().