Neu auf der Webplattform im Mai

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

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.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS-Funktionen für abgestufte Werte: round(), 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.

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

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() .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

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.

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

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

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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().