Neu in Chrome 85

Pete LePage

Chrome 85 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

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

Sichtbarkeit von Inhalten

Rendering-Prozess des Browsers

Damit der Nutzer Ihren HTML-Code sehen kann, muss der Browser eine Reihe von Schritten durchlaufen, bevor er überhaupt das erste Pixel rendern kann. Das geschieht für die gesamte Seite, auch für Inhalte, die nicht im Darstellungsbereich sichtbar sind.

Wenn Sie content-visibility: auto auf ein Element anwenden, wird dem Browser mitgeteilt, dass er das Rendern dieses Elements überspringen kann, bis es in den sichtbaren Bereich gescrollt wird. So wird das erste Rendern beschleunigt.


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

Damit content-visibility optimal wirkt, sollten Sie es auf übergeordnete Abschnitte mit komplexeren Layoutalgorithmen wie flexbox und grid oder auf Abschnitte mit untergeordneten Elementen mit eigenen eingeschlossenen Layouts anwenden.

Durch das Aufteilen von Inhalten und das Hinzufügen von content-visibility: auto; konnte die Rendering-Zeit dieser Seite von 232 ms auf nur 30 ms reduziert werden.

Hier findest du Informationen dazu, wie du die Sichtbarkeit von Inhalten nutzen kannst, um die Rendering-Leistung zu verbessern.

@property und CSS-Variablen

CSS-Variablen, die technisch als benutzerdefinierte Eigenschaften bezeichnet werden, sind großartig. Mit der Houdini CSS Properties and Values API können Sie einen Typ und einen Standard-Fallbackwert für Ihre benutzerdefinierten Eigenschaften definieren. Ich habe sie bereits im Artikel Neu in Chrome 78 behandelt, als wir die Unterstützung für die Definition in JavaScript hinzugefügt haben.

Ab Chrome 85 können Sie CSS-Eigenschaften auch direkt in Ihrem CSS definieren und festlegen. Was ich an CSS-Properties liebe, ist, dass sie der Property eine semantische Bedeutung und Fallback-Werte geben und sogar CSS-Tests ermöglichen.

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

Una hat einen tollen Beitrag @property: CSS-Variablen Superkräfte verleihen, in dem sie zeigt, wie Sie sie verwenden können.

Installierte ähnliche Apps abrufen

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

Sie können dem Nutzer beispielsweise auf einer Landingpage andere Inhalte präsentieren, wenn Ihre App bereits installiert ist. Überschneidende Funktionen in einer App zentralisieren, um Verwirrung zu vermeiden Wenn Ihre systemeigene App bereits installiert ist, sollten Sie die Installation Ihrer PWA nicht bewerben.

Als die Funktion erstmals in Chrome 80 eingeführt wurde, funktionierte sie nur für Android-Apps. Unter Android kann jetzt auch geprüft werden, ob Ihre PWA installiert ist. Unter Windows kann geprüft werden, ob Ihre Windows-UWP-App installiert ist.

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

Hier ist der Artikel dazu: Ist Ihre App installiert? getInstalledRelatedApps() gibt Ihnen Auskunft. Auf web.dev erfahren Sie, wie das funktioniert und wie Sie Ihre Apps signieren, um zu beweisen, dass sie Ihnen gehören.

App-Symbol-Verknüpfungen

App-Symbolverknüpfung unter Windows

In Chrome 84 haben wir die Unterstützung für App-Symbol-Verknüpfungen hinzugefügt. Ich habe versehentlich gesagt, dass sie überall verfügbar sind, aber sie waren nur auf Android-Geräten verfügbar. 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 finden Sie im Artikel App Icon Shortcuts auf web.dev. Ich bitte um Entschuldigung für die Verwirrung.

Origin Trial: Streaminganfragen mit fetch()

Ab Chrome 85 ist das fetch-Upload-Streaming als Origin-Trial verfügbar. Damit können Sie einen Abruf starten, bevor der Anfragetext fertig ist. Bisher konnten Sie eine Anfrage erst starten, wenn Sie den gesamten Text fertig hatten. Jetzt können Sie Inhalte senden, auch wenn Sie sie noch generieren.

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

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

Sie können sie beispielsweise verwenden, um den Server aufzuwärmen oder Audio- oder Videodaten zu streamen, während sie vom Mikrofon oder der Kamera aufgenommen werden.

Jake hat sich in Streaming requests with the fetch API auf web.dev ausführlich damit beschäftigt und das Thema auch im neuesten Video HTTP203 - Streaming requests with fetch behandelt.

Und vieles mehr

Natürlich gibt es noch viel mehr.

Promise.any gibt ein Promise zurück, das durch das erste angegebene Promise erfüllt oder abgelehnt wird.

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

Mit .replaceAll() lassen sich alle Instanzen in einem String einfacher ersetzen. Reguläre Ausdrücke sind nicht mehr erforderlich.

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

In Chrome 85 wird die Unterstützung für die Dekodierung von AVIF hinzugefügt. Dieses Bildformat wird mit AV1 codiert und von der Alliance for Open Media standardisiert. AVIF bietet im Vergleich zu JPEG und WebP erhebliche Kompressionsvorteile. Eine aktuelle Studie von Netflix ergab Einsparungen von 50% im Vergleich zu Standard-JPEG und von über 60% bei 4:4:4-Inhalten.

Die Entfernung von AppCache hat begonnen.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. 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 „Chrome Developers“. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und ich habe endlich einen Haarschnitt bekommen.

Sobald Chrome 86 veröffentlicht wird, erfährst du hier, was es Neues in Chrome gibt.