Nieuw in Chroom 85

Pete LePage

Chrome 85 wordt nu uitgerold naar stabiele versies.

Dit is wat u moet weten:

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

Zichtbaarheid van de inhoud

Browserweergaveproces

Om je HTML-code om te zetten in iets dat de gebruiker kan zien, moet de browser een aantal stappen doorlopen voordat hij zelfs maar de eerste pixel kan tekenen. En dat doet hij voor de hele pagina, zelfs voor content die niet zichtbaar is in de viewport.

Wanneer content-visibility: auto op een element wordt toegepast, weet de browser dat het renderwerk voor dat element kan worden overgeslagen totdat het element in de viewport scrollt. Dit zorgt voor een snellere initiële rendering. 


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

Om het maximale uit content-visibility te halen, past u het toe op bovenliggende secties met complexere lay-outalgoritmen, zoals flexbox en grid , of op secties met onderliggende secties met hun eigen lay-outs.

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

Bekijk de zichtbaarheid van de inhoud om te zien hoe u deze kunt gebruiken 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 kun je een type en standaard fallback-waarde definiëren voor je aangepaste eigenschappen. Ik heb ze eerder behandeld in Nieuw in Chrome 78 , toen we ondersteuning toevoegden voor het definiëren ervan in JavaScript.

Vanaf Chrome 85 kun je CSS-eigenschappen ook rechtstreeks in je CSS definiëren en instellen. Wat ik zo fijn vind aan CSS-eigenschappen, is dat het de eigenschap semantische betekenis geeft, fallback-waarden en zelfs CSS-testen mogelijk maakt.

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

Una heeft een geweldig bericht op Twitter : @property : waarin hij superkrachten toekent aan CSS-variabelen en laat zien hoe je ze kunt gebruiken.

Gerelateerde apps installeren

Met de getInstalledRelatedApps() API kunt u controleren of uw app is geïnstalleerd en vervolgens de gebruikerservaring aanpassen.

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

Toen het voor het eerst in Chrome 80 werd uitgebracht, werkte het alleen voor Android-apps. Nu kan het op Android ook controleren of je PWA is geïnstalleerd. En op Windows kan het controleren of je Windows UWP-app is geïnstalleerd.

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

Bekijk mijn artikel Is uw app geïnstalleerd? getInstalledRelatedApps() vertelt het u! op web.dev om te zien hoe het werkt en hoe u uw apps kunt ondertekenen om te bewijzen dat ze van u zijn.

Snelkoppelingen naar app-pictogrammen

Snelkoppeling naar app-pictogram op Windows

In Chrome 84 hebben we ondersteuning toegevoegd voor snelkoppelingen naar app-pictogrammen. Ik zei per ongeluk dat ze overal beschikbaar waren, maar ze waren alleen beschikbaar op Android. Nu, in Chrome 85, zijn ze 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" }
    ]
  }
]

Bekijk het artikel over snelkoppelingen naar app-pictogrammen op web.dev voor alle details. Mijn excuses voor de verwarring die ik heb veroorzaakt.

Origin Trial: Streaming-verzoeken met fetch()

Vanaf Chrome 85 is fetch upload streaming beschikbaar als een proefversie. Hiermee kun je een fetch starten voordat de body van de aanvraag klaar is. Voorheen kon je pas een aanvraag starten als de volledige body klaar was. Maar nu kun je content verzenden, zelfs terwijl je deze nog aan het genereren bent.

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

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

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

Jake heeft uitgebreid onderzoek gedaan naar streamingverzoeken met de fetch-API op web.dev en heeft dit ook behandeld in de nieuwste versie van HTTP203 - Streamingverzoeken met fetchvideo .

En meer

Er is natuurlijk nog veel meer.

Promise.any retourneert een belofte die wordt vervuld door de eerste opgegeven belofte die moet worden vervuld of afgewezen.

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

Het vervangen van alle instanties in een string is eenvoudiger met .replaceAll() , geen reguliere expressies meer!

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 voegt decoderingsondersteuning toe voor AVIF , een afbeeldingsformaat dat is gecodeerd met AV1 en gestandaardiseerd door de Alliance for Open Media . AVIF biedt aanzienlijke compressievoordelen ten opzichte van JPEG en WebP. Een recent onderzoek van Netflix toont een besparing van 50% ten opzichte van standaard-JPEG en meer dan 60% op 4:4:4-content.

En het verwijderen van AppCache is begonnen .

Verder lezen

Dit zijn slechts enkele van de belangrijkste hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 85.

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en mijn haar is eindelijk geknipt !

Zodra Chrome 86 uitkomt, vertel ik u meteen wat er nieuw is in Chrome!