Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 86

Pete LePage

Chrome 86 wordt nu uitgerold naar stabiele versie.

Dit is wat u moet weten:

De File System Access API is nu beschikbaar in stable.
Er zijn nieuwe oorsprongsproeven voor Web HID en de Multi-screen Window Placement API .
Er zijn een aantal nieuwe dingen in CSS, en nog veel meer .

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

Toegang tot bestandssysteem

Tegenwoordig kun je met het <input type="file"> element een bestand van schijf lezen. Om wijzigingen op te slaan, voeg je download toe aan een ankertag. De bestandskiezer wordt dan weergegeven en het bestand wordt opgeslagen. Je kunt niet naar hetzelfde bestand schrijven dat je hebt geopend. Die workflow is irritant.

Met de File System Access API (voorheen de Native File System API), die de oorspronkelijke proefperiode heeft afgerond en nu beschikbaar is in stable, kunt u showOpenFilePicker() aanroepen. Daarmee wordt een bestandskiezer weergegeven en wordt vervolgens een bestands-handle geretourneerd die u kunt gebruiken om het bestand te lezen.

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

Om een bestand op schijf op te slaan, kunt u de bestands-handle gebruiken die u eerder hebt opgehaald, of showSaveFilePicker() aanroepen om een nieuwe bestands-handle te krijgen.

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

schermafbeelding van toestemmingsprompt — Vraagt de gebruiker om toestemming om naar een bestand te schrijven.

Voordat er geschreven wordt, controleert Chrome of de gebruiker schrijfrechten heeft verleend. Als dit niet het geval is, vraagt Chrome de gebruiker eerst om toestemming.

Door showDirectoryPicker() aan te roepen, wordt een directory geopend, zodat je een lijst met bestanden kunt opvragen of nieuwe bestanden in die directory kunt aanmaken. Ideaal voor IDE's of mediaspelers die met veel bestanden werken. Voordat je iets kunt schrijven, moet de gebruiker natuurlijk schrijfrechten verlenen.

Er is nog veel meer te ontdekken met de API, lees daarom het artikel over File System Access op web.dev.

Oorsprongproef: WebHID

Human interface-apparaten, algemeen bekend als HID, ontvangen invoer van, of leveren uitvoer aan... mensen. Er is een lange lijst van human interface-apparaten die te nieuw, te oud of te ongebruikelijk zijn om toegankelijk te zijn voor de apparaatstuurprogramma's van de systemen.

De WebHID API, nu beschikbaar als proefversie , lost dit probleem op door toegang tot deze apparaten in JavaScript te bieden. Met WebHID kunnen webgebaseerde games optimaal gebruikmaken van gamepads, inclusief alle knoppen, joysticks, sensoren, triggers, led's, trilmodules en meer.

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

Op internet gebaseerde apps voor videochat kunnen de telefoonknoppen op speciale luidsprekers gebruiken om gesprekken te beginnen of te beëindigen, het geluid te dempen en meer.

Natuurlijk kunnen zulke krachtige API's alleen met apparaten communiceren als de gebruiker daar expliciet toestemming voor geeft.

Bekijk Verbinding maken met ongebruikelijke HID-apparaten voor meer informatie, voorbeelden, hoe u aan de slag kunt en een leuke demo.

Origin Trial: API voor plaatsing van vensters op meerdere schermen

Tegenwoordig kun je de eigenschappen van het scherm waarop het browservenster zich bevindt, opvragen door window.screen() aan te roepen. Maar wat als je meerdere monitoren hebt? Helaas, de browser vertelt je alleen over het scherm waarop het momenteel staat.

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

De Multi-Screen Window Placement API is een proefversie in Chrome 86. Hiermee kunt u de schermen die op uw computer zijn aangesloten, opsommen en vensters op specifieke schermen plaatsen. Het kunnen plaatsen van vensters op specifieke schermen is cruciaal voor zaken als presentatie-apps, apps voor financiële dienstverlening en meer.

Voordat u de API kunt gebruiken, moet u toestemming vragen. Als u dit niet doet, vraagt de browser de gebruiker hierom wanneer u de API voor het eerst probeert te gebruiken.

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

Zodra de gebruiker toestemming heeft verleend, wordt door het aanroepen van window.getScreens() een promise geretourneerd die wordt omgezet in een reeks Screen objecten.

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

Ik kan die informatie vervolgens gebruiken bij het aanroepen van requestFullScreen() of bij het plaatsen van nieuwe vensters. Tom heeft alle details in zijn artikel 'Managing multiple displays with the Multi-Screen Window Placement API' op web.dev.

En meer

Met de nieuwe CSS-selector, :focus-visible , kunt u gebruikmaken van dezelfde heuristiek die de browser gebruikt om te bepalen of de standaardfocusindicator moet worden weergegeven.

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

U kunt de kleur, de grootte en het type van het nummer of opsommingsteken voor lijsten aanpassen met het CSS ::marker Pseudo-element.

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

En de Chrome Dev Summit komt naar een scherm bij jou in de buurt, dus blijf op de hoogte via ons YouTube-kanaal voor meer informatie!

Verder lezen

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

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons YouTube-kanaal voor Chrome-ontwikkelaars . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren. U kunt ook onze RSS-feed toevoegen aan uw feedreader.

Ik ben Pete LePage en zodra Chrome 87 uitkomt, vertel ik u wat er nieuw is in Chrome!

Nieuw in Chroom 86 Stay organized with collections Save and categorize content based on your preferences.