Neu in Chrome 129

Pete LePage

Dazu sollten Sie Folgendes wissen:

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

Lange Aufgaben mit scheduler.yield() aufteilen

Lange Aufgaben verzögern die Reaktion des Browsers auf Nutzereingaben. Dadurch entsteht der Eindruck, dass eine Website langsam ist. Außerdem werden wichtige Leistungsmesswerte wie INP beeinträchtigt. Mit scheduler.yield() können Sie lange Aufgaben in kleinere Teile aufteilen und so die Reaktionsfähigkeit verbessern, indem Sie den Hauptthread explizit wieder freigeben.

Damit können Sie dem Browser Folgendes mitteilen:

„HEY! Die Aufgabe, die ich jetzt ausführen werde, kann eine Weile dauern. Wenn du einen Frame rendern, auf Nutzereingaben reagieren oder andere wichtige Aufgaben erledigen musst, ist das in Ordnung. Ich kann warten.“

Eine Darstellung, wie das Aufteilen einer Aufgabe die Nutzerinteraktion erleichtern kann. Oben blockiert eine lange Aufgabe die Ausführung eines Ereignis-Handlers, bis die Aufgabe abgeschlossen ist. Unten ermöglicht die aufgeteilte Aufgabe, dass der Event-Handler 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 zu geben und INP-Probleme zu vermeiden.

await scheduler.yield();

Wichtig ist, dass die Ausführung Ihres Codes priorisiert wird, sodass Sie durch das Yielding keine Leistungseinbußen haben. Wir empfehlen, scheduler.yield() in Funktionen zwischen größeren Arbeitsabschnitten großzügig zu verwenden.

Weitere Informationen finden Sie unter Lange Aufgaben optimieren.

Animationen mit intrinsischen Größen

CSS-Animationen sind zwar sehr praktisch, erfordern aber in der Regel explizite Größen. Sie konnten die intrinsischen Größen-Keywords wie auto, min-content oder fit-content nicht verwenden.

Die CSS-Eigenschaft interpolate-size ermöglicht eine Reihe neuer Animationen, die mit den Größen-Keywords intrinsic nicht möglich waren.

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

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

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 immer dann zu tun, 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öße. Bei Layoutberechnungen wird das Keyword size auf die ursprüngliche Größe von calc-size-basis festgelegt.

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

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

Weitere Informationen

Änderungen an der CSS-Ankerpositionierung

Die CSS-Ankerpositionierung wurde in Chrome 125 eingeführt. Nach einigen zusätzlichen Diskussionen in der CSS-Arbeitsgruppe gibt es jedoch einige Änderungen an der Spezifikation und Implementierung. 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 Formulierung wurde bevorzugt, weil sie daran erinnert, dass dieses Attribut auf das positionierte Element angewendet wird, nicht auf das Anker-Element.position-

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

Schließlich wird die funktionale Syntax 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, die mehrere Sprachen unterstützt.

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"

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

Außerdem gibt es einige Einstellungen, die eingestellt oder entfernt werden und sich auf einige Entwickler auswirken können.

Vollständige Versionshinweise lesen

Weitere Informationen

Hier werden nur einige wichtige Highlights behandelt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 129.

Abonnieren

Wenn Sie immer auf dem neuesten Stand bleiben möchten, abonnieren Sie den YouTube-Kanal Chrome Developers. Sie erhalten dann eine E‑Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und vertrete Adriana. Sobald Chrome 130 veröffentlicht wird, erfahrt ihr hier, was es Neues in Chrome gibt.