Neu in Chrome 85

Chrome 85 wird als stabile Version eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage, arbeite von zu Hause aus. Sehen wir uns einmal an, was es für Entwickler bei Chrome 85 Neues gibt.

Sichtbarkeit von Inhalten

Rendering-Prozess des Browsers

Um Ihren HTML-Code in etwas umzuwandeln, das der Nutzer sehen kann, muss der Browser eine Reihe von Schritten durchlaufen, bevor das erste Pixel gezeichnet werden kann. Dies gilt für die gesamte Seite, selbst für Inhalte, die im Darstellungsbereich nicht sichtbar sind.

Wenn Sie content-visibility: auto auf ein Element anwenden, wird dem Browser mitgeteilt, dass das Rendering für dieses Element übersprungen werden kann, bis es in den Darstellungsbereich scrollt. Dadurch ist das anfängliche Rendering schneller.


.my-class {
  content-visibility: auto;
}

Um content-visibility optimal zu nutzen, wenden Sie ihn auf übergeordnete Abschnitte mit komplexeren Layoutalgorithmen wie flexbox und grid oder auf untergeordnete Abschnitte mit eigenen enthaltenen Layouts an.

Durch das Aufteilen von Inhalten und das Hinzufügen von content-visibility: auto; stieg die Renderingzeit dieser Seite von 232 ms auf nur 30 ms.

Unter Sichtbarkeit von Inhalten erfahren Sie, wie Sie damit die Rendering-Leistung verbessern können.

@property- und CSS-Variablen

CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, sind sehr hilfreich. Mit der Houdini CSS Properties and Values API können Sie einen Typ und einen Standard-Fallback-Wert für Ihre benutzerdefinierten Properties definieren. Ich habe sie bereits unter Neu in Chrome 78 behandelt, als wir die Unterstützung für ihre Definition in JavaScript hinzugefügt haben.

Ab Chrome 85 können Sie CSS-Eigenschaften auch direkt in Ihrem CSS definieren und festlegen. Ich liebe an CSS-Eigenschaften, dass sie der Eigenschaft eine semantische Bedeutung und Fallback-Werte verleiht und sogar CSS-Tests ermöglicht.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Una hat einen tollen Beitrag @property: Giving superpowers to CSS variables (CSS-Variablen besondere Superkräfte geben) und zeigt, wie Sie sie verwenden können.

Installierte ähnliche Apps herunterladen

Mit der getInstalledRelatedApps() API können Sie prüfen, ob Ihre App installiert ist, und die App dann entsprechend anpassen.

Wenn Ihre App bereits installiert ist, können Sie dem Nutzer beispielsweise auf einer Landingpage unterschiedliche Inhalte präsentieren. Zentralisieren Sie sich überschneidende Funktionen in einer Anwendung, um Verwirrung zu vermeiden. Wenn Ihre native App bereits installiert ist, bewerben Sie die Installation der PWA nicht.

Bei der ersten Auslieferung in Chrome 80 funktionierte es nur für Android-Apps. Auf Android-Geräten lässt sich jetzt auch prüfen, ob deine PWA installiert ist. Und unter Windows kann geprüft werden, ob Ihre Windows UWP-Anwendung installiert ist.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

Weitere Informationen finden Sie unter Ist Ihre App installiert? getInstalledRelatedApps() informiert Sie.

App-Symbol-Verknüpfungen

App-Symbolverknüpfung unter Windows

In Chrome 84 werden Verknüpfungen für App-Symbole unterstützt. Ich habe versehentlich angegeben, dass sie überall verfügbar sind, aber nur unter Android. In Chrome 85 sind sie jetzt für Android und Windows sowie in Chrome und Edge verfügbar.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

Weitere Informationen findest du im Artikel zu Verknüpfungen für App-Symbole auf web.dev. Ich bedauere die Verwirrung, die ich dadurch verursacht habe.

Ursprungstest: Streaminganfragen mit fetch()

Ab Chrome 85 ist das Upload-Streaming von fetch als Ursprungstest verfügbar. Damit können Sie einen Abruf starten, bevor der Anfragetext bereit ist. Früher konnte eine Anfrage erst gestartet werden, wenn der gesamte Text einsatzbereit war. Aber jetzt können Sie mit dem Senden von Inhalten beginnen, auch wenn diese noch erstellt wurden.

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

Sie können es beispielsweise verwenden, um den Server aufzuwärmen oder Audio- oder Videoinhalte zu streamen, die vom Mikrofon oder der Kamera aufgenommen werden.

Jake hat ausführliche Informationen zu Streaminganfragen mit der Abruf API auf web.dev und im aktuellen Video HTTP203 – Streaminganfragen mit Abruf erläutert.

Und noch mehr

Natürlich gibt es noch viel mehr.

Promise.any gibt ein Versprechen zurück, das durch das erste gegebene Versprechen erfüllt oder abgelehnt werden soll.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

Mit .replaceAll() ist es einfacher, alle Instanzen in einem String zu ersetzen. Es gibt keine regulären Ausdrücke mehr.

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

Chrome 85 unterstützt jetzt auch AVIF, ein mit AV1 codiertes und von der Alliance for Open Media standardisiertes Bildformat. AVIF bietet im Vergleich zu JPEG und WebP deutliche Einsparungen bei der Komprimierung. Eine aktuelle Netflix-Studie belegt Einsparungen von 50% gegenüber Standard-JPEG und mehr als 60% Einsparungen bei 4:4:4-Inhalten.

Wir haben damit begonnen, den AppCache zu entfernen.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 85.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und ich habe endlich die Haare schneiden lassen!

Sobald Chrome 86 veröffentlicht wird, informiere ich Sie über die Neuerungen in Chrome.