Neu in Chrome 123

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

CSS-Funktion light-dark()

Mit der light-dark()-Funktion 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 innerhalb einer einzelnen CSS-Eigenschaft angeben.

Der Browser wählt basierend auf dem berechneten color-scheme-Wert des Elements automatisch die passende Farbe aus. Zum Beispiel mit folgendem CSS-Code:

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 Hauptthreads ermitteln. Diese ist häufig die Ursache für einen schlechten INP (Interaction to Next Paint) – 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 Aktualisierungen der Benutzeroberfläche bietet. Mit der Long Animation Frames API können Sie die Blockadeleistung messen. Er misst die Aufgaben zusammen mit dem folgenden Rendering-Update und fügt Informationen wie lang andauernde Skripts, Renderingzeit und Zeit für das erzwungene Layout und den Stil, das als Layout-Thrashing bezeichnet wird.

Durch das Erfassen und Analysieren dieser Informationen 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 arbeiten, und Caching-Strategien entwickeln, die zu einer Leistungssteigerung führen können.

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, welcher Inhalt geladen werden soll.

Mit der Service Worker Static Routing API können Sie bei der Installation Pfade angeben, die immer aus dem 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 aus den URLs entfernt, von denen Sie wissen, dass sie keinen Service Worker benötigen.

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

…und vieles mehr

Natürlich gibt es noch viele weitere.

  • Über die NavigationActivation-Oberfläche kannst du benutzerdefinierte Seiten anbieten, die darauf basieren, von wo aus der Nutzer navigiert ist.

  • Chrome unterstützt jetzt Zstandard (zstd). Mit diesem Content-Encoding werden Seiten schneller geladen, die Bandbreite ist geringer und die Zeit, die CPU und die Komprimierung auf den Servern müssen weniger beansprucht werden. Dadurch sinken die Serverkosten.

  • Die notRestoredReasons API für bfcache wird in Chrome 123 eingeführt. So können Websiteinhaber Gründe 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 festlegen, die nur dann gelten, wenn die Web-App 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

Hier werden nur einige wichtige Punkte behandelt. Unter den folgenden Links finden Sie zusätzliche Änderungen in Chrome 123.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 124 veröffentlicht wird, erzähle ich dir gleich, was es bei Chrome Neues gibt.