Neu in Chrome 123

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

light-dark()-CSS-Funktion.

Mit der Funktion light-dark() in der CSS können Sie Farben erstellen, die sich an den hellen oder dunklen Modus des Nutzers anpassen. Verwenden Sie die Funktion light-dark(), um zwei verschiedene Farbwerte innerhalb einer einzelnen CSS-Eigenschaft anzugeben.

Der Browser wählt anhand des berechneten color-scheme-Werts 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 hellgrünen 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. INP (Interaction to Next Paint) ist ein Core Web Vitals-Messwert, der die Reaktionsfähigkeit einer Website misst.

Das neue API ist eine verbesserte Version des Long Tasks API, das einen besseren Überblick über langsame Aktualisierungen der Benutzeroberfläche bietet. Mit der Long Animation Frames API können Sie die Blockierarbeit messen. Die Aufgaben werden zusammen mit der folgenden Renderingaktualisierung gemessen und Informationen wie lange laufende Skripts, Renderingzeit und ein erzwungenes Layout bzw. Stil, auch als Layout-Chrashing bezeichnet, hinzugefügt.

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

Mithilfe von Service Workern können Sie Websites offline nutzbar machen und Caching-Strategien entwickeln, die die Leistung steigern können.

Es können jedoch Leistungskosten anfallen, wenn eine Seite zum ersten Mal seit einiger 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, bevor er weiß, welche Inhalte geladen werden sollen.

Mit der Service Worker Static Routing API können Sie bei der Installation festlegen, dass Pfade immer aus dem Netzwerk bereitgestellt werden sollen. Wenn später eine kontrollierte URL geladen wird, kann der Browser Ressourcen von diesen Pfaden abrufen, bevor der Service Worker den Start abgeschlossen 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 viel mehr.

  • Du kannst benutzerdefinierte Seiten anbieten, die darauf basieren, von wo aus der Nutzer über die NavigationActivation-Benutzeroberfläche navigiert ist.

  • Chrome unterstützt jetzt Zstandard (zstd). Mit dieser Content-Encoding werden Seiten schneller geladen und es wird weniger Bandbreite in Anspruch genommen. Außerdem wird weniger Zeit, CPU und Energie für die Komprimierung auf den Servern benötigt, was zu geringeren Serverkosten führt.

  • Die notRestoredReasons API für bfcache wird in Chrome 123 eingeführt. So können Websiteinhaber vor Ort mögliche Gründe dafür ermitteln, warum bfcache nicht verwendet werden konnte. Websiteinhaber können damit den bfcache besser nutzen und so schneller im Verlauf navigieren.

  • Mit dem Wert picture-in-picture für display-mode können Sie bestimmte CSS-Regeln schreiben, die nur 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

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

Abo

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.

Hallo Adriana Jara, und sobald Chrome 124 veröffentlicht wird, informiere ich dich über die Neuheiten in Chrome.