Nieuw in Chrome 85

Pete LePage

Chrome 85 wordt nu uitgerold naar de stabiele versie.

U moet het volgende weten:

Ik ben Pete LePage. Ik werk en film vanuit huis. Laten we eens kijken wat er nieuw is voor ontwikkelaars in Chrome 85.

Zichtbaarheid van content

Weergaveproces van browsers

Als je HTML wilt omzetten in iets wat de gebruiker kan zien, moet de browser een aantal stappen doorlopen voordat deze de eerste pixel kan tekenen. En dat doet de browser voor de hele pagina, zelfs voor content die niet zichtbaar is in de viewport.

Als je content-visibility: auto toepast op een element, weet de browser dat de weergave van dat element kan worden overgeslagen totdat het in het viewport wordt gescrold. Zo wordt de eerste weergave sneller uitgevoerd.


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

Als u content-visibility optimaal wilt benutten, past u het toe op bovenliggende gedeelten met complexere indelingsalgoritmen, zoals flexbox en grid, of die onderliggende items hebben met een eigen ingesloten indeling.

Door content op te delen en content-visibility: auto; toe te voegen, is de weergavetijd van deze pagina gedaald van 232 ms naar slechts 30 ms.

Ga naar Contentzichtbaarheid voor meer informatie over hoe je deze functie gebruikt om de weergaveprestaties te verbeteren.

@property en CSS-variabelen

Css-variabelen, technisch gezien aangepaste eigenschappen genoemd, zijn geweldig. Met de Houdini CSS Properties and Values API kunt u een type en standaard terugvalwaarde definiëren voor uw aangepaste eigenschappen. Ik heb ze eerder behandeld in Nieuw in Chrome 78, toen we ondersteuning toevoegden om ze in JavaScript te definiëren.

Vanaf Chrome 85 kun je ook CSS-eigenschappen rechtstreeks in je CSS definiëren en instellen. Wat ik zo leuk vind aan CSS-property's, is dat ze de property semantische betekenis en terugvalwaarden geven en zelfs CSS-tests mogelijk maken.

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

Una heeft een geweldig bericht @property: CSS-variabelen superkrachten geven waarin ze uitlegt hoe je ze kunt gebruiken.

Gerelateerde geïnstalleerde apps ophalen

Met de getInstalledRelatedApps() API kun je je app laten checken of jouw app is geïnstalleerd en daarna de gebruikerservaring aanpassen.

Toon bijvoorbeeld andere content aan de gebruiker op een landingspagina als je app al is geïnstalleerd. Centraliseer overlappende functionaliteit in één app om verwarring te voorkomen. Of, als je systeemeigen app al is geïnstalleerd, promoot je de installatie van je PWA niet.

Toen de functie voor het eerst werd gelanceerd in Chrome 80, werkte deze alleen voor Android-apps. Op Android kan de app nu ook checken of je PWA is geïnstalleerd. En op Windows kan de app checken of je Windows UWP-app is geïnstalleerd.

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

Check mijn artikel Is je app geïnstalleerd? getInstalledRelatedApps() vertelt je er alles over! op web.dev om te zien hoe het werkt en hoe je je apps ondertekent om te bewijzen dat ze van jou zijn.

Snelkoppelingen voor app-iconen

Snelkoppeling voor app-icoon in Windows

In Chrome 84 hebben we ondersteuning voor snelkoppelingen voor app-iconen toegevoegd. Ik zei per ongeluk dat ze overal beschikbaar waren, maar ze waren alleen beschikbaar op Android. In Chrome 85 zijn ze nu beschikbaar op Android en Windows, en in zowel Chrome als Edge.


"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" }
    ]
  }
]

Ga naar het artikel Snelkoppelingen voor app-iconen op web.dev voor alle details. Sorry voor de verwarring.

Origin-proefperiode: streamingverzoeken met fetch()

Vanaf Chrome 85 is fetchuploadstreaming beschikbaar als oorsprongstest. Hiermee kun je een ophaalactie starten voordat de verzoekbody klaar is. Eerder kon je pas een verzoek starten als je de hele tekst klaar had. Nu kun je content al sturen terwijl je deze nog aan het maken bent.

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

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

Gebruik het bijvoorbeeld om de server op te warmen of om audio of video te streamen terwijl deze wordt vastgelegd door de microfoon of camera.

Jake gaat dieper in op Streaming requests with the fetch API op web.dev en heeft het ook behandeld in de nieuwste video HTTP203 - Streaming requests with fetch.

En nog veel meer

Natuurlijk zijn er nog veel meer.

Promise.any retourneert een belofte die wordt nagekomen door de eerste gegeven belofte die wordt nagekomen of afgewezen.

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

Alle instanties in een tekenreeks vervangen is makkelijker met .replaceAll(). Je hebt geen reguliere expressies meer nodig.

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 is ondersteuning toegevoegd voor de decodering van AVIF, een afbeeldingsindeling die is gecodeerd met AV1 en gestandaardiseerd door de Alliance for Open Media. Avif biedt aanzienlijke compressievoordelen ten opzichte van jpeg en webp. Een recent Netflix-onderzoek toont aan dat er 50% wordt bespaard ten opzichte van standaard jpeg en meer dan 60% op 4:4:4-content.

En de verwijdering van AppCache is gestart.

Aanvullende informatie

Dit zijn maar enkele van de belangrijkste punten. Check de links hieronder voor aanvullende wijzigingen in Chrome 85.

Abonneren

Als je op de hoogte wilt blijven van onze video's, abonneer je dan op ons YouTube-kanaal voor Chrome-ontwikkelaars. Je krijgt dan een e-mailmelding als we een nieuwe video lanceren.

Ik ben Pete LePage en ik heb eindelijk mijn haar laten knippen.

Zodra Chrome 86 is uitgebracht, ben ik er om je te vertellen wat er nieuw is in Chrome.