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 in Chrome 85 für Entwickler Neues gibt.

Sichtbarkeit von Inhalten

Der Rendering-Prozess von Browsern

Damit der Browser Ihre HTML-Dateien in etwas umwandeln kann, das Nutzer sehen können, muss er eine Reihe von Schritten ausführen, bevor er überhaupt das erste Pixel zeichnen kann. Das gilt für die gesamte Seite, auch für Inhalte, die im Darstellungsbereich nicht sichtbar sind.

Wenn Sie content-visibility: auto auf ein Element anwenden, wird dem Browser mitgeteilt, dass er die Rendering-Arbeit für dieses Element überspringen kann, bis es in den Viewport gescrollt wird. Dadurch wird das erste Rendern beschleunigt.


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

Wenn Sie content-visibility optimal nutzen möchten, wenden Sie es auf übergeordnete Abschnitte mit komplexeren Layoutalgorithmen wie flexbox und grid an oder auf Abschnitte mit untergeordneten Elementen mit eigenen Layouts.

Durch das Aufteilen der Inhalte und das Hinzufügen von content-visibility: auto; konnte die Renderingzeit dieser Seite von 232 ms auf nur 30 ms gesenkt werden.

Sehen Sie sich die Inhaltssichtbarkeit an, um zu erfahren, wie Sie damit die Renderingleistung verbessern können.

@property und CSS-Variablen

CSS-Variablen, technisch als benutzerdefinierte Properties bezeichnet, sind großartig. 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 im Artikel Neu in Chrome 78 erwähnt, 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 mir an CSS-Eigenschaften gefällt, ist, dass sie der Property eine semantische Bedeutung, Fallback-Werte und sogar CSS-Tests ermöglichen.

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

Una hat einen tollen Artikel verfasst, @propertyin dem sie zeigt, wie Sie CSS-Variablen Superkräfte verleihen.

Ähnliche installierte Apps abrufen

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

Sie können Nutzern beispielsweise auf einer Landingpage unterschiedliche Inhalte anzeigen, wenn Ihre App bereits installiert ist. Zentralisieren Sie sich überschneidende Funktionen in einer App, um Verwirrung zu vermeiden. Wenn Ihre native App bereits installiert ist, werben Sie nicht für die Installation Ihrer PWA.

Als die Funktion in Chrome 80 eingeführt wurde, funktionierte sie nur für Android-Apps. Auf Android-Geräten kann jetzt auch geprüft werden, ob Ihre PWA installiert ist. Außerdem kann unter Windows geprüft werden, ob Ihre UWP-App installiert ist.

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

Sehen Sie sich meinen Artikel an: Ist Ihre App installiert? getInstalledRelatedApps() wird es Ihnen sagen! Auf web.dev erfahren Sie, wie es funktioniert und wie Sie Ihre Apps signieren, um zu beweisen, dass sie Ihnen gehören.

App-Symbol-Verknüpfungen

Tastenkürzel für App-Symbole unter Windows

In Chrome 84 wurde die Unterstützung für Verknüpfungen mit App-Symbolen hinzugefügt. Ich habe versehentlich gesagt, dass sie überall verfügbar sind, aber sie sind nur auf Android-Geräten verfügbar. In Chrome 85 sind sie jetzt auf 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" }
    ]
  }
]

Ausführliche Informationen finden Sie im Artikel App-Symbolverknüpfungen auf web.dev. Ich entschuldige mich für die Verwirrung.

Origin Trial: Streaminganfragen mit fetch()

Ab Chrome 85 ist fetch-Upload-Streaming als Testversion verfügbar. So können Sie einen Abruf starten, bevor der Anfragetext bereit ist. Bisher konntest du eine Anfrage nur starten, wenn der gesamte Text fertig war. Jetzt kannst du Inhalte senden, während du sie noch erstellst.

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

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

Sie können sie beispielsweise verwenden, um den Server zu warmlaufen oder Audio- oder Videoinhalte zu streamen, sobald sie vom Mikrofon oder der Kamera erfasst werden.

Jake hat auf web.dev einen ausführlichen Artikel zu Streaminganfragen mit der Fetch API veröffentlicht und das Thema auch im aktuellen Video HTTP203 – Streaminganfragen mit Fetch behandelt.

Und vieles mehr

Natürlich gibt es noch viel mehr.

Promise.any gibt ein Versprechen zurück, das vom ersten angegebenen Versprechen erfüllt oder abgelehnt wird.

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. 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 Dekodierung von AVIF unterstützt, einem Bildformat, das mit AV1 codiert und von der Alliance for Open Media standardisiert wurde. AVIF bietet im Vergleich zu JPEG und WebP erhebliche Komprimierungsvorteile. Eine aktuelle Netflix-Studie zeigt eine Einsparung von 50% im Vergleich zu Standard-JPEG und über 60% bei 4:4:4-Inhalten.

Außerdem hat die Entfernung von AppCache begonnen.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Ä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 erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

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

Sobald Chrome 86 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.