Hier finden Sie einige der interessanten Funktionen, die im Mai 2024 in stabilen und Beta-Webbrowsern eingeführt wurden.
Stabile Browserversionen
Im Mai 2024 wurden Firefox 126, Safari 17.5 und Chrome 125 als stabil eingestuft. In diesem Beitrag geht es um die neuen Funktionen, die der Webplattform hinzugefügt wurden.
CSS-Ankern
Chrome 125 unterstützt die CSS-Ankerpositionierung. So können Sie ein absolut positioniertes Element deklarativ und ohne JavaScript an ein oder mehrere andere Elemente auf der Seite (die Anker) binden. Die Positionierung von Ankern funktioniert effizient, wenn die Anker scrollbar sind. Ein häufiger Anwendungsfall ist die Platzierung eines Pop-ups wie einer Kurzinfo neben dem Element, das es aufgerufen hat, oder eines Auswahlmenüs und der Liste der Pop-up-Optionen.
Weitere Informationen finden Sie unter Die CSS Anchor Positioning API.
CSS-Funktionen für abgestufte Werte: round()
, mod()
und rem()
mod()
und rem()
Chrome 125 enthält auch die Funktionen für abgestufte Werte. Das bedeutet, dass diese Funktionen jetzt als „Neu verfügbar“ gekennzeichnet sind. Die Funktionen für abgestufte Werte, round()
, mod()
und rem()
, wandeln einen bestimmten Wert in einen anderen „Abstufungswert“ um.
Weitere Informationen finden Sie unter Die mathematischen Funktionen für abgestufte Werte in CSS sind jetzt in Baseline 2024.
Die light-dark()
-Funktion
Die CSS-Farbfunktion light-dark()
, die in Safari 17.5 enthalten ist, wurde ebenfalls in die Kategorie „Neu verfügbar“ aufgenommen.
light-dark()
ist eine Funktion, die zwei Argumente akzeptiert, die beide <color>
sein müssen. Je nach verwendetem Farbschema wird eine der beiden Optionen 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 CSS-Farben, die vom Farbschema abhängen, mit light-dark() .
Screen Wake Lock API
In Firefox 126 ist die Screen Wake Lock API verfügbar. Diese Funktion ist jetzt Teil der Baseline Newly Available. Mit dieser API können Sie verhindern, dass das Gerät den Bildschirm dimmt und sperrt.
Weitere Informationen zur Verwendung dieser Funktion finden Sie unter Display an mit der Screen Wake Lock API.
Die Compute Pressure API
Die Compute Pressure API bietet allgemeine Status, die die CPU-Auslastung des Systems darstellen. So können bei der Implementierung die richtigen zugrunde liegenden Hardwaremesswerte verwendet werden, damit Nutzer die gesamte verfügbare Rechenleistung nutzen können, solange das System nicht übermäßig belastet wird.
Diese Funktion ist in Chrome 125 verfügbar. Intel hat die Design- und Implementierungsarbeiten für diese API geleitet, mit der Apps für Videokonferenzen Funktionen und Leistung dynamisch ausbalancieren können.
Dokumentation zur Compute Pressure API
Die @starting-style
-Regel
Safari 17.5 enthält die @starting-style
-Regel. Mit dieser CSS-At-Rule können Sie einen Stil anwenden, den der Browser abrufen kann, bevor das Element auf der Seite geöffnet wird, wie es für Eingabeanimationen erforderlich ist.
Die @starting-style
-Regel ist eine der Funktionen, die im Artikel Vier neue CSS-Funktionen für flüssige Ein- und Ausblendungsanimationen behandelt werden.
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 127 und Chrome 126. Diese Releases bringen viele tolle Funktionen auf die Plattform. Weitere Informationen finden Sie in den Versionshinweisen. Hier sind nur einige Highlights.
Chrome 126 enthält ansichtenübergreifende Übergänge für Navigationen mit demselben 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. Ansichtsübergänge sind jetzt standardmäßig für Navigationen innerhalb desselben Ursprungs aktiviert. Sie können einen Ansichtsübergang zwischen zwei verschiedenen Dokumenten mit derselben Quelle erstellen.
Firefox 127 enthält zusätzliche JavaScript-Set-Methoden: intersection()
, union()
, difference()
, symmetricDifference()
, isSubsetOf()
, isSupersetOf()
und isDisjointFrom()
.