Entdecken Sie einige der interessanten Funktionen, die im Mai 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
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.
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.
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
lightoder unbekannt ist, wird der berechnete Wert des ersten Werts zurückgegeben. - Wenn das verwendete Farbschema
darkist, wird der berechnete Wert der zweiten Farbe zurückgegeben.
Weitere Informationen finden Sie unter Von CSS-Farbschema abhängige Farben mit „Helldunkel()“ .
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.
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
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.
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().