Neu in Chrome 123

Adriana Jara

Dazu sollten Sie Folgendes wissen:

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

light-dark()-CSS-Funktion.

Mit der light-dark()-Funktion in CSS können Sie Farben erstellen, die sich an die Einstellung des Nutzers 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 Limetten-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, 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 blockierende Arbeit 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

Mithilfe von Dienst-Workern können Sie Websites offline verfügbar machen und Caching-Strategien erstellen, die die Leistung steigern.

Es kann jedoch zu Leistungseinbußen kommen, wenn eine Seite zum ersten Mal seit einiger Zeit geladen wird und der steuernde Service Worker gerade 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 eine kontrollierte URL später geladen wird, kann der Browser mit dem Abrufen von Ressourcen aus diesen Pfaden beginnen, bevor der Dienst-Worker vollständig gestartet wurde. 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 aus der Nutzer über die NavigationActivation-Benutzeroberfläche weitergeleitet wurde.

  • Chrome unterstützt jetzt Zstandard (zstd). Mit diesem Content-Encoding werden Seiten schneller geladen, es wird weniger Bandbreite verbraucht und die Komprimierung auf Servern benötigt weniger Zeit, CPU und Energie. Das führt zu geringeren Serverkosten.

  • Die notRestoredReasons API für bfcache wird ab 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 so die Nutzung des bfcache verbessern, was eine schnellere Navigation durch den Verlauf ermöglicht.

  • 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 wichtige 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.