Dazu sollten Sie Folgendes wissen:
- Passen Sie Ihr Farbschema mit der neuen
light-dark()
-Funktion an. - Mit der Long Animation Frames API kannst du die Reaktionszeit auf deiner Website analysieren.
- Vermeiden Sie mit der Service Worker Static Routing API Leistungseinbußen beim Start von Service Workern.
- Und es gibt viele weitere.
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 dieserContent-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ürdisplay-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.
- Neu in den Chrome-Entwicklertools (123)
- Einstellung und Entfernung von Chrome 123
- Updates auf ChromeStatus.com für Chrome 123
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
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.