Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 86

Pete LePage

Chrome 86 begint nu stabiel te worden.

Dit is wat u moet weten:

De File System Access API is nu beschikbaar in stable.
Er zijn nieuwe origin-proefversies 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 , ik werk en fotografeer vanuit huis. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 86!

Toegang tot bestandssysteem

Tegenwoordig kunt u het <input type="file"> element gebruiken om een bestand vanaf schijf te lezen. Om de wijzigingen op te slaan, voegt u download toe aan een ankertag. De bestandskiezer wordt weergegeven en vervolgens wordt het bestand opgeslagen. Er is geen manier om naar hetzelfde bestand te schrijven dat u hebt geopend. Die workflow is vervelend.

Met de File System Access API (voorheen de Native File System API), die is afgestudeerd aan de originele proefversie en nu beschikbaar is in stable, kunt u showOpenFilePicker() aanroepen, die een bestandskiezer toont en vervolgens een bestandsingang retourneert die u kunt gebruiken 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 bestandsingang gebruiken die u eerder hebt gekregen, of showSaveFilePicker() aanroepen om een nieuwe bestandsingang te verkrijgen.

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

schermafdruk van toestemmingsprompt — Prompt aan de gebruiker die toestemming vraagt om naar een bestand te schrijven.

Voordat er wordt geschreven, controleert Chrome of de gebruiker schrijfrechten heeft verleend. Als er geen schrijfrechten zijn verleend, vraagt Chrome dit eerst aan de gebruiker.

Door showDirectoryPicker() aan te roepen, wordt een map geopend, zodat u een lijst met bestanden kunt krijgen of nieuwe bestanden in die map kunt maken. Perfect voor zaken als IDE's of mediaspelers die met veel bestanden communiceren. Voordat u iets kunt schrijven, moet de gebruiker uiteraard schrijftoestemming verlenen.

Er zit nog veel meer in de API, dus lees het File System Access-artikel op web.dev.

Origin-proefversie: WebHID

Menselijke interface-apparaten, gewoonlijk HID genoemd, nemen input van, of leveren output aan... mensen. Er is een lange reeks menselijke interface-apparaten die te nieuw, te oud of te ongebruikelijk zijn om toegankelijk te zijn via de apparaatstuurprogramma's van het systeem.

De WebHID API, nu beschikbaar als origin-proefversie , lost dit op door een manier te bieden om toegang te krijgen tot deze apparaten in JavaScript. Met WebHID kunnen webgebaseerde games optimaal profiteren van gamepads, inclusief alle knoppen, joysticks, sensoren, triggers, LED's, rumble-packs 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);
});

Webgebaseerde videochat-apps kunnen de telefoonknoppen op gespecialiseerde luidsprekers gebruiken om gesprekken te starten of te beëindigen, de audio te dempen en meer.

Dergelijke krachtige API's kunnen uiteraard alleen communiceren met apparaten als de gebruiker dit expliciet toestaat.

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

Origin-proefversie: API voor vensterplaatsing op meerdere schermen

Tegenwoordig kunt u de eigenschappen van het scherm waarop het browservenster zich bevindt, verkrijgen door window.screen() aan te roepen. Maar wat als u een opstelling met meerdere monitoren heeft? Sorry, de browser vertelt u alleen over het scherm waarop deze zich momenteel bevindt.

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 start een origin-proefversie in Chrome 86. Hiermee kunt u de schermen opsommen die op uw machine zijn aangesloten en vensters op specifieke schermen plaatsen. Het kunnen plaatsen van vensters op specifieke schermen is van cruciaal belang voor zaken als presentatie-apps, apps voor financiële diensten en meer.

Voordat u de API kunt gebruiken, moet u toestemming vragen. Als u dit niet doet, zal de browser de gebruiker hierom vragen wanneer u deze 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, retourneert het aanroepen van window.getScreens() een belofte die wordt opgelost met een array van 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 requestFullScreen() of bij het plaatsen van nieuwe vensters. Tom heeft alle details in zijn artikel Meerdere beeldschermen beheren met de Multi-Screen Window Placement API op web.dev.

En meer

Met de nieuwe CSS-selector, :focus-visible , kunt u zich aanmelden voor dezelfde heuristiek die de browser gebruikt wanneer deze beslist of de standaard focusindicator 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, grootte of het type nummer of opsommingsteken voor lijsten aanpassen met het CSS ::marker Pseudo-Element.

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

En Chrome Dev Summit komt naar een scherm bij jou in de buurt, dus houd ons YouTube-kanaal in de gaten voor meer informatie!

Verder lezen

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

Wilt u op de hoogte blijven van onze video's, abonneer u dan op ons Chrome Developers YouTube-kanaal , zodat u een e-mailmelding ontvangt wanneer we een nieuwe video lanceren, of voeg onze RSS-feed toe aan uw feedreader.

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