Neu in Chrome 129

Pete LePage

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns nun an, was es bei Chrome 129 für Entwickler Neues gibt.

Lange Aufgaben mit scheduler.yield() aufteilen

Lange Aufgaben verzögern die Reaktion des Browsers auf Nutzereingaben, was den Eindruck erweckt, dass eine Website langsam ist, und sich auf wichtige Leistungsmesswerte wie den INP auswirkt. Mit scheduler.yield() können Sie lange Aufgaben in kleinere Teile aufteilen und so die Reaktionsfähigkeit verbessern, indem Sie explizit an den Hauptthread zurückgeben.

Sie können dem Browser Folgendes mitteilen:

„Hallo! Die Arbeit, die ich jetzt mache, kann eine Weile dauern. Wenn Sie einen Frame malen, auf Nutzereingaben reagieren oder andere wichtige Aufgaben haben, ist das in Ordnung, ich kann warten.“

Eine Darstellung, wie die Aufteilung einer Aufgabe die Nutzerinteraktion erleichtern kann. Oben blockiert eine lange Aufgabe die Ausführung eines Ereignis-Handlers, bis die Aufgabe abgeschlossen ist. Unten wird durch die in kleinere Teile aufgeteilte Aufgabe ermöglicht, dass der Ereignishandler früher ausgeführt wird als sonst.

Fügen Sie die folgende Zeile regelmäßig in Ihren JavaScript-Code ein, um im Browser etwas Zeit zu lassen und Probleme mit INP zu vermeiden.

await scheduler.yield();

Außerdem kann die Fortsetzung Ihres Codes priorisiert werden, damit Sie durch das Yielding nicht ins Hintertreffen geraten. Wir empfehlen, scheduler.yield() in Funktionen zwischen größeren Arbeitsteilen großzügig zu verwenden.

Weitere Informationen finden Sie unter Lange Aufgaben optimieren.

Animationen mit inhärenten Größen

CSS-Animationen sind ziemlich cool, erfordern aber in der Regel explizite Größen. Sie können die Keywords für die intrinsische Größenänderung wie auto, min-content oder fit-content nicht verwenden.

Mit der CSS-Eigenschaft interpolate-size stehen neue Animationen zur Verfügung, die mithilfe von internen Größen-Keywords nicht möglich waren.

Ohne interpolate-size haben die Schaltflächen im folgenden Video keinen Übergang.

Nachdem ich interpolate-size: allow-keywords hinzugefügt habe, erhalten die Schaltflächen im Video einen schönen Übergangsanimationseffekt.

Wenn Sie interpolate-size: allow-keywords für das root-Element angeben, wird das neue Verhalten für die gesamte Seite festgelegt. Wir empfehlen dies, wenn die Kompatibilität kein Problem darstellt.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Für eine genauere Steuerung unterstützt die CSS-Funktion calc-size() ähnlich wie calc() auch Vorgänge auf genau einem der unterstützten Keywords für die intrinsische Größenanpassung. Bei Layoutberechnungen wird das Keyword size auf die ursprüngliche Größe von calc-size-basis ausgewertet.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Weitere Informationen finden Sie unter „Animate to height: auto;“ (und andere Keywords zur benutzerdefinierten Größenanpassung) in CSS.

Änderungen an der Positionierung von CSS-Ankern

Die CSS-Ankernutzung wurde in Chrome 125 eingeführt. Nach einigen weiteren Diskussionen innerhalb der CSS-Arbeitsgruppe wurden jedoch einige Änderungen an der Spezifikation und Implementierung vorgenommen. Wenn Sie bereits die CSS-Ankerposition verwenden, müssen Sie Ihren Code so schnell wie möglich aktualisieren.

Zuerst wurde inset-area in position-area umbenannt. Diese Variante wurde bevorzugt, da die Formulierung position- daran erinnert, dass diese Eigenschaft auf das positionierte Element und nicht auf das Ankerelement angewendet wird.

Zweitens wird position-try-options in position-try-fallbacks umbenannt. So können Sie sich daran erinnern, dass es sich dabei nur um Fallbacks für die primäre Position handelt, die durch die Basisstile bestimmt wird.

Schließlich wird die funktionale Syntax von inset-area() aus position-try entfernt. Verwenden Sie daher position-try-fallbacks: top anstelle von position-try-fallbacks: inset-area(top).

…und vieles mehr

Natürlich gibt es noch viel mehr.

Es gibt eine neue Intl-Methode zum Formatieren von Zeiträumen mit Unterstützung für mehrere Sprachen.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Web GPU Canvas kann jetzt den gesamten Bildschirm für HDR-Bilder nutzen.

Außerdem gibt es einige Einstellungen und Entfernungen, die sich auf einige Entwickler auswirken können.

Vollständige Versionshinweise

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 129.

Abonnieren

Wenn du auf dem Laufenden bleiben möchtest, abonniere den YouTube-Kanal für Chrome-Entwickler. Du wirst dann per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Ich bin Pete LePage und übernehme heute die Vertretung von Adriana. Sobald Chrome 130 veröffentlicht wird, informieren wir Sie hier über die Neuigkeiten in Chrome.