Neu in Chrome 129

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage. Sehen wir uns an, was es in Chrome 129 Neues für Entwickler 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 erledigen werde, kann etwas 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 häufig in Ihren JavaScript-Code ein, um dem Browser etwas Zeit zum Atmen zu geben und INP-Probleme 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. Die Keywords für die intrinsische Größenänderung wie auto, min-content oder fit-content können nicht verwendet werden.

Mit der CSS-Eigenschaft interpolate-size stehen neue Animationen zur Verfügung, die bei der Verwendung von intrinsischen 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 für genau eines 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);
  }
}

Ausführliche 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"

Der Web-GPU-Canvas kann jetzt den gesamten Bereich des Displays für HDR-Bilder nutzen.

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

Vollständige Versionshinweise lesen

Weitere Informationen

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

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, 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.