Chrome 86’s New Frontend Features: File System Access, HTTPS Security & More

File System Access

Chrome 86 brings the previously experimental File System Access API to stable, allowing web pages to open files with

showOpenFilePicker

and write them after user permission. Example code is provided. The

showDirectoryPicker

method lets apps access whole directories, useful for IDEs and media players.

Completely Block Mixed Content Downloads

From Chrome 86, all non‑HTTPS mixed‑content downloads are blocked. Mixed content occurs when a secure page loads insecure resources, exposing users to attacks. Chrome now prevents loading such resources and automatically upgrades image requests to HTTPS, with audio/video already upgraded since M80.

Developers can inspect mixed content via the Security panel in DevTools.

ParentNode.replaceChildren

The new

replaceChildren

method replaces all child nodes of a DOM element in one call, simplifying DOM updates.

<code>parentNode.replaceChildren(newChildren);</code>

More Prominent HTTP Security Warnings

When an HTTPS page contains an insecure HTTP form, Chrome 86 displays a clear “This form is insecure” warning below the form fields, and a confirmation warning if the user proceeds.

Background Tab Power Saving

Tabs idle for over five minutes are throttled to about 1 % CPU, and auto‑refreshes are limited to once per minute.

New Experimental Features

WebHID

The WebHID API enables JavaScript access to human‑interface devices such as gamepads and sensors, after user permission.

<code>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);
});</code>

Multi‑screen Placement API

This API lets scripts enumerate all connected screens and place windows on specific displays, useful for presentations and finance apps. Permission is requested via

navigator.permissions.query

and screens are obtained with

window.getScreens()

.

<code>async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}
const screens = await window.getScreens();
console.log(screens);
</code>

:focus-visible CSS Selector

The new

:focus-visible

selector allows custom focus styles, while

:focus:not(:focus-visible)

can hide outlines for mouse interactions.

<code>button:focus-visible { outline: 4px dashed black; }
button:focus:not(:focus-visible) { outline: none; box-shadow: 1px 1px 5px rgba(1,1,0,.7); }</code>

The

::marker

pseudo‑element can style list markers, and an accessibility setting can flash a blue outline around focused elements.

Deprecated & Removed Features

WebComponents v0

Chrome 80 removed WebComponents v0 on desktop and Android; Chrome 86 removed it from WebView, including Custom Elements v0, Shadow DOM v0, and HTML Imports.

FTP Support Removal

Due to low usage and security issues, Chrome began deprecating FTP in M72 and plans to fully disable it by Chrome 88.

References

https://developers.google.com/web/updates/2020/10/nic86

https://blog.chromium.org/2020/09/chrome-86-improved-focus-highlighting.html

https://sspai.com/post/63084

https://blog.p2hp.com/archives/7490

https://web.dev/file-system-access/