Nieuw in Chroom 85

Piet LePage

Chrome 85 begint nu stabiel te worden.

Dit is wat u moet weten:

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

Zichtbaarheid van inhoud

Weergaveproces van browsers

Om uw HTML 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 schilderen. En het doet dit voor de hele pagina, zelfs voor inhoud die niet zichtbaar is in de viewport.

Het toepassen van content-visibility: auto op een element, vertelt de browser dat hij het weergavewerk voor dat element kan overslaan totdat het naar de viewport scrollt, wat een snellere initiële weergave oplevert.


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

Om de meeste impact uit content-visibility te halen, past u deze toe op bovenliggende secties met complexere lay-outalgoritmen, zoals flexbox en grid , of die onderliggende secties hebben met eigen lay-outs.

Door inhoud op te delen en content-visibility: auto; , ging deze pagina van een weergavetijd van 232 ms naar slechts 30 ms.

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

Vanaf Chrome 85 kunt u CSS-eigenschappen ook rechtstreeks in uw CSS definiëren en instellen. Wat ik leuk vind aan CSS-eigenschappen, is dat het de eigenschap een semantische betekenis en terugvalwaarden geeft en zelfs CSS-testen mogelijk maakt.

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

Una heeft een geweldige post @property : superkrachten geven aan CSS-variabelen die laten zien hoe je ze kunt gebruiken.

Geïnstalleerde gerelateerde apps downloaden

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

Toon bijvoorbeeld verschillende inhoud aan de gebruiker op een landingspagina als uw app al is geïnstalleerd. Centraliseer overlappende functionaliteit in één app om verwarring te voorkomen. Of, als uw systeemeigen app al is geïnstalleerd, mag u de installatie van uw PWA niet promoten.

Toen het voor het eerst werd geleverd in Chrome 80 , werkte het alleen voor Android-apps. Op Android kan het nu ook controleren of uw PWA is geïnstalleerd. En op Windows kan het controleren of uw 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() zal het je vertellen! op web.dev om te zien hoe het werkt en hoe u uw apps kunt ondertekenen om te bewijzen dat ze van u zijn.

App-pictogramsnelkoppelingen

Snelkoppeling naar app-pictogram op Windows

In Chrome 84 hebben we ondersteuning toegevoegd voor app-pictogramsnelkoppelingen. Ik zei per ongeluk dat ze overal beschikbaar waren, maar ze waren alleen beschikbaar op Android. Nu zijn ze in Chrome 85 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 App Icon Shortcuts op web.dev voor volledige details, en het spijt me voor de verwarring die ik heb veroorzaakt.

Origin-proefversie: streamingverzoeken met fetch()

Vanaf Chrome 85 is het streamen van fetch beschikbaar als origin-proefversie. Hiermee kunt u een ophaalbewerking starten voordat de aanvraagtekst gereed is. Voorheen kon je pas een verzoek starten als je het hele lichaam gereed had. Maar nu kunt u beginnen met het verzenden van inhoud, zelfs terwijl u deze nog aan het genereren bent.

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

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

Gebruik het bijvoorbeeld om de server op te warmen, of stream audio of video zoals deze wordt vastgelegd door de microfoon of camera.

Jake heeft een diepgaande blik geworpen op streamingverzoeken met de fetch-API op web.dev, en heeft dit ook besproken in de nieuwste HTTP203 - Streamingverzoeken met fetch -video.

En meer

Natuurlijk is er nog veel meer.

Promise.any retourneert een belofte die wordt vervuld door de eerst gegeven belofte die moet worden nagekomen 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 beeldformaat gecodeerd met AV1 en gestandaardiseerd door de Alliance for Open Media . AVIF biedt aanzienlijke compressiewinsten ten opzichte van JPEG en WebP, waarbij een recent onderzoek van Netflix een besparing van 50% aantoont ten opzichte van standaard JPEG en > 60% besparing op 4:4:4-inhoud.

En het verwijderen van AppCache is begonnen .

Verder lezen

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

Abonneren

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

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

Zodra Chrome 86 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!