Neu in Chrome 123

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Ich bin Adriana Jara. Sehen wir uns nun an, was es bei Chrome 123 für Entwickler Neues gibt.

light-dark()-CSS-Funktion.

Mit der Funktion light-dark() in CSS können Sie Farben erstellen, die sich an die Nutzerpräferenzen für den hellen oder dunklen Modus anpassen. Mit der Funktion light-dark() können Sie zwei verschiedene Farbwerte in einer einzelnen CSS-Eigenschaft angeben.

Der Browser wählt automatisch die passende Farbe anhand des berechneten color-scheme-Werts des Elements aus. Beispiel:

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • Wenn der Nutzer ein helles Design ausgewählt hat, hat das Element einen limefarbenen Hintergrund.
  • Wenn der Nutzer ein dunkles Design ausgewählt hat, hat das Element einen grünen Hintergrund.

Long Animation Frames API.

Mit der Long Animation Frames API können Sie die Ursachen für eine Überlastung des Haupt-Threads ermitteln, die häufig zu einem schlechten INP (Interaction to Next Paint) führt. Dies ist ein Core Web Vital, mit dem die Reaktionsfähigkeit einer Website gemessen wird.

Die neue API ist eine erweiterte Version der Long Tasks API, die ein besseres Verständnis für langsame Updates der Benutzeroberfläche bietet. Mit der Long Animation Frames API können Sie die Blockadeleistung messen. Die Aufgaben werden zusammen mit der folgenden Rendering-Aktualisierung gemessen und es werden Informationen wie lang laufende Scripts, die Renderingzeit und die Zeit für das erzwungene Layout und den erzwungenen Stil hinzugefügt, was als Layout-Trashing bezeichnet wird.

Wenn Sie diese Informationen erfassen und analysieren, können Sie Leistungsengpässe erkennen und beheben. Mit dem folgenden Code können Sie lange Frames erfassen.

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service Worker Static Routing API

Mit Service Workern können Sie Websites dazu bringen, offline zu funktionieren, und Caching-Strategien entwickeln, um die Leistung zu steigern.

Allerdings können Leistungskosten entstehen, wenn eine Seite zum ersten Mal nach einer gewissen Zeit geladen wird und der steuernde Service Worker in diesem Moment nicht ausgeführt wird. Da alle Abrufe über den Service Worker erfolgen müssen, muss der Browser warten, bis der Service Worker gestartet und ausgeführt wird, um zu wissen, welche Inhalte geladen werden sollen.

Mit der Service Worker Static Routing API können Sie bei der Installation angeben, dass Pfade immer über das Netzwerk bereitgestellt werden sollen. Wenn später eine kontrollierte URL geladen wird, kann der Browser mit dem Abrufen von Ressourcen aus diesen Pfaden beginnen, bevor der Service Worker den Start beendet hat. Dadurch wird der Service Worker von den URLs entfernt, für die er nicht benötigt wird.

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

…und vieles mehr

Natürlich gibt es noch viel mehr.

  • Du kannst personalisierte Seiten anbieten, die darauf basieren, von welcher Seite der Nutzer über die NavigationActivation-Benutzeroberfläche weitergeleitet wurde.

  • Chrome unterstützt jetzt Zstandard (zstd). Diese Content-Encoding hilft dabei, Seiten schneller zu laden und weniger Bandbreite in Anspruch zu nehmen. Außerdem werden durch die Komprimierung auf den Servern weniger Zeit, CPU und Energie benötigt. Dadurch sinken die Serverkosten.

  • Die notRestoredReasons API für bfcache wird in Chrome 123 eingeführt. So können Websiteinhaber in diesem Feld Gründe dafür angeben, warum der bfcache nicht verwendet werden konnte. Websiteinhaber können diese Funktion nutzen, um den bfcache besser zu nutzen und den Verlauf schneller aufzurufen.

  • Mit dem Wert picture-in-picture für display-mode können Sie bestimmte CSS-Regeln schreiben, die nur angewendet werden, wenn die Webanwendung im Bild-im-Bild-Modus angezeigt wird. Beispiel:

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

Weitere Informationen

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

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 Adriana Jara und sobald Chrome 124 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.