Nieuw in Chrome 100

Pete LePage

Dit is wat u moet weten:

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

Chroom 100

Toen browsers versie 10 voor het eerst bereikten, waren er enkele problemen, aangezien het hoofdversienummer van één cijfer naar twee cijfers 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 binnenkort verwacht. Deze driecijferige versienummers kunnen problemen veroorzaken op websites die op de een of andere manier afhankelijk zijn van de identificatie 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 dat 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.

  • Bent u websitebeheerder? Test uw website dan met Chrome en Firefox 100.
  • Als u een User-Agent-parsingbibliotheek ontwikkelt, voegt u tests toe om versies groter dan of gelijk aan 100 te parseren.

Kijk op web.dev voor meer informatie over Chrome en Firefox, die binnenkort versie 100 bereiken .

100 coole webmomenten

Promotie-afbeelding 100 Cool Web Moments

Het was geweldig om het web te zien groeien en al die fantastische dingen te zien die jullie de afgelopen 100 Chrome-releases hebben gebouwd. We dachten dat het leuk zou zijn om even terug in de tijd te gaan en de #100CoolWebMoments te vieren die de afgelopen 14 jaar zijn ontstaan.

Vertel ons welke momenten je het meest hebt bewonderd. Als we iets gemist hebben (en we weten zeker dat we dat hebben), tweet ons dan @Chromiumdev met #100CoolWebMoments . Geniet ervan!

Verminderde User-Agent-string

Over de user-agent gesproken: Chrome 100 is de laatste versie die standaard een ongereduceerde User-Agent-string 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 gebruikersagent geleidelijk teruggebracht.

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

API voor plaatsing van vensters op meerdere schermen

Voor sommige apps is het openen van nieuwe vensters en het plaatsen ervan op specifieke plaatsen of schermen een belangrijke functie. Wanneer ik bijvoorbeeld Presentaties gebruik om te presenteren, wil ik dat de dia's schermvullend worden weergegeven op het primaire scherm en mijn sprekersnotities op het andere scherm.

Met de Multi-Screen Window Placement API kunt u de beeldschermen opsommen die op de computer van de gebruiker zijn aangesloten en vensters op specifieke schermen 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

De belangrijkste functionaliteit zit echter in window.getScreenDetails() , dat details verschaft over de gekoppelde 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 in het volledige 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 er een nieuw beeldscherm wordt aangesloten of verwijderd, als 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 Toms bijgewerkte artikel Managing multiple displays with the Multi-Screen Window Placement API op web.dev voor meer informatie.

En nog veel meer!

Er is natuurlijk nog veel meer.

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

// 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 makeReadOnly() methode NFC-tags permanent alleen-lezen maken.

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

Verder lezen

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

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 101 uitkomt, vertel ik je alles over de nieuwe functies in Chrome!