New in Chrome 86: File System Access, WebHID, new CSS features, and more!

The Native File System API is now available and stable. There are new origin trials for WebHID and the multi-screen window placement API. There’re some new stuff in CSS and plenty more. I’m Pete LePage. Let’s dive in and see what’s new for developers in Chrome 86. ♪ [music] ♪ Today, you can use the file input element to read a file from disk.

00:28 - To save changes, add download to an anchor tag and it’ll show the file picker and then save the file. But there’s no way to write back to that same file you opened. That workflow is annoying. It sucks. But with the Native File System API, you can call showOpenFilePicker which shows a file picker, then returns a file handle that you can use to read the file. To save a file to Disk , you can either use that same file handle that you got earlier, or call showSaveFilePicker to get a new file handle. Before writing, Chrome will check if the user has granted Write permission.

01:10 - If Write permission hasn’t been granted, Chrome will prompt the user first. Calling showDirectoryPicker will open the directory, allowing you to get a list of files or create new files in that directory, perfect for things like IDEs, media players, and things that interact with a lot of files. Of course, before you can write anything, the user must grant Write permission. There’s a lot more to the API, so check out the article on web.dev. There are two origin trials that I want to call out.

01:43 - Human interface devices, commonly referred to as HID, take input from or provides output to humans. There’s a long tail of human interface devices that are just too new, too old, or uncommon to be accessible by this system’s device drivers. The WebHID API, now available as an origin trial, solves this by providing a way to access these devices in JaveScript. With WebHID, web-based games can take full advantage of game pads including all the buttons, the joysticks, sensors, triggers, LEDs, Rumble Paks and more. Web-based video chat apps can use the telephony buttons on specialized speakers to start or end calls, mute the audio and more.

02:31 - Of course, powerful APIs like this can only interact with devices when the user explicitly chooses to allow it. Check the description for more details, examples, and how you can get started. Today, you can get the properties of the screen that the browser window is on by calling window.screen. But what if you have a multi-monitor setup? Sorry, the browser will only tell you about the screen that it’s currently on. The multi-screen window placement API starts an origin trial in Chrome 86.

03:07 - It allows you to enumerate the screens connected to your machine and place windows on specific screens. Being able to place windows on specific screens is critical for things like presentation apps, financial service apps, and more. Before you can use the API, you’ll need to request permission. If you don’t, the browser will prompt the user when you first try to use it. Once the user has grant permission, calling window. getScreens returns a promise that resolves with an array of screen objects. I can then use that information when calling requestFullscreen or placing new windows. Tom has all the details in an article on web.dev. The new CSS selector focus visible, lets you opt into the same heuristics that the browser uses when deciding whether to display the default focus indicator. You can customize the color, size, or type of number or bullets for lists with the CSS marker pseudo element.

04:13 - And Chrome Dev Summit will be coming to a screen near you. So stay tuned to this channel for more information. All the details, including links, docs, and specs, are in the updates post linked in the description. Check out the latest Chrome DevTools video and don’t forget to subscribe. I’m Pete Le Page and as soon as Chrome 87 is released, I’ll be right here to tell you what’s new in Chrome. ♪ [music] ♪ .