Nieuw in Chrome 100

Piet LePage

Dit is wat u moet weten:

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 100.

Chroom 100

Toen browsers voor het eerst versie 10 bereikten, waren er een paar problemen omdat het hoofdversienummer van één cijfer naar twee ging. Hopelijk hebben we een paar dingen geleerd die de overgang van twee cijfers naar drie zullen vergemakkelijken.

Chrome- en Firefox-logo

Chrome 100 is nu beschikbaar en Firefox 100 wordt zeer binnenkort verzonden. Deze driecijferige versienummers kunnen problemen veroorzaken op sites die op de een of andere manier afhankelijk zijn van het identificeren van de browserversie. De afgelopen maanden hebben het Firefox-team en het Chrome-team experimenten uitgevoerd waarbij de browser versienummer 100 rapporteerde, ook al was dit niet het geval.

Dit heeft geleid tot een aantal gemelde problemen, waarvan er vele al zijn opgelost. Maar we hebben nog steeds uw hulp nodig.

  • Als u een website-onderhouder bent, test dan uw website met Chrome en Firefox 100.
  • Als u een parseringsbibliotheek voor gebruikers-agenten ontwikkelt, voegt u tests toe om versies groter dan en gelijk aan 100 te parseren.

Bekijk binnenkort Chrome en Firefox om de hoofdversie 100 op web.dev te bereiken voor meer details.

100 coole webmomenten

100 Cool Web Moments-promotieafbeelding

Het was spannend om het internet te zien groeien en al het geweldige te zien dat je in de afgelopen 100 Chrome-releases hebt gebouwd. We dachten dat het leuk zou zijn om een ​​wandeling door de herinneringen te maken en #100CoolWebMoments te vieren die de afgelopen 14 jaar zijn gebeurd.

Vertel ons van welke momenten je het meest hebt genoten. Als we iets hebben gemist (en we weten zeker dat dit het geval is), tweet ons dan @Chromiumdev met #100CoolWebMoments . Genieten!

Gereduceerde tekenreeks voor User-Agent

Over de user-agent gesproken: Chrome 100 zal de laatste versie zijn die standaard een niet-gereduceerde User-Agent-reeks ondersteunt. Dit maakt deel uit van een strategie om het gebruik van de User-Agent-string te vervangen door de nieuwe User-Agent Client Hints API .

Vanaf Chrome 101 wordt de user-agent geleidelijk verminderd.

Bekijk de User Agent Reduction Origin Trial and Dates op de [Chromium blog][crblog] voor meer informatie over wat er wordt verwijderd en wanneer.

API voor vensterplaatsing op meerdere schermen

Voor sommige apps is het openen van nieuwe vensters en het plaatsen ervan op specifieke plaatsen of specifieke beeldschermen een belangrijke functie. Als ik bijvoorbeeld Dia's gebruik om te presenteren, wil ik dat de dia's op het volledige scherm op het primaire scherm verschijnen en dat mijn sprekersnotities op het andere scherm verschijnen.

De Multi-Screen Window Placement API maakt het mogelijk om de beeldschermen op te sommen die op de machine van de gebruiker zijn aangesloten, en om vensters op specifieke schermen te plaatsen.

Met window.screen.isExtended kunt u snel controleren of er meer dan één scherm op het apparaat is aangesloten.

const isExtended = window.screen.isExtended;
// returns true/false

Maar de belangrijkste functionaliteit bevindt zich in window.getScreenDetails() , dat details biedt over de aangesloten beeldschermen.

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

U kunt bijvoorbeeld het primaire scherm bepalen en vervolgens requestFullscreen() gebruiken om een ​​element op dat scherm op volledig scherm weer te geven.

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

En het biedt een manier om te luisteren naar veranderingen, bijvoorbeeld als een nieuw beeldscherm wordt aangesloten of verwijderd, de resolutie verandert, enzovoort.

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

Bekijk Tom's bijgewerkte artikel Meerdere beeldschermen beheren met de Multi-Screen Window Placement API op web.dev voor een diepere duik.

En meer!

Natuurlijk is er nog veel meer.

Er is een nieuwe forget() methode voor HID-apparaten waarmee u toestemming voor een HID-apparaat kunt intrekken die door een gebruiker is verleend.

// Request an HID device.
const [device] = await navigator.hid.requestDevice(opts);


// Then later, revoke permission to the device.
await device.forget();

En voor WebNFC kunt u met de methode makeReadOnly() NFC-tags permanent alleen-lezen maken.

const ndef = new NDEFReader();
await ndef.makeReadOnly();

Verder lezen

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

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage, en zodra Chrome 101 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!