本頁面由 Cloud Translation API 翻譯而成。

Chrome 86 版的新功能

Pete LePage

Chrome 86 現已開始推出穩定版。

以下是一些注意事項：

File System Access API 現已推出穩定版。
Web HID 和 Multi-screen Window Placement API 現已推出新的原始試用版。
CSS 中有一些新功能，還有更多功能。

我是 Pete LePage，在家工作並拍攝影片，現在就讓我們一起來看看 Chrome 86 有哪些新功能吧！

檔案系統存取權

目前您可以使用 <input type="file"> 元素從磁碟讀取檔案。如要儲存變更，請將 download 新增至錨點標記，系統就會顯示檔案挑選器，然後儲存檔案。您無法寫入同一個已開啟的檔案。這項工作流程很麻煩。

您可以使用 File System Access API (原為 Native File System API)，這個 API 已完成原始測試，現在已推出穩定版，您可以呼叫 showOpenFilePicker()，這個 API 會顯示檔案挑選器，然後傳回檔案句柄，讓您用來讀取檔案。

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

如要將檔案儲存至磁碟，您可以使用先前取得的檔案句柄，或是呼叫 showSaveFilePicker() 來取得新的檔案句柄。

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

在寫入前，Chrome 會檢查使用者是否已授予寫入權限，如果尚未授予寫入權限，Chrome 會先提示使用者。

呼叫 showDirectoryPicker() 會開啟目錄，讓您取得檔案清單，或在該目錄中建立新檔案。非常適合與大量檔案互動的 IDE 或媒體播放器。當然，使用者必須先授予寫入權限，您才能寫入任何內容。

API 還有許多其他功能，請參閱 web.dev 上的「File System Access」文章。

來源試用：WebHID

人機介面裝置 (通常稱為 HID) 會接收人類的輸入內容，或提供輸出內容給人類。人機介面裝置的長尾效應，是指系統裝置驅動程式無法存取的裝置過新、過舊或過於罕見。

WebHID API 現已推出原始版本試用版，可在 JavaScript 中存取這些裝置，解決上述問題。有了 WebHID，網頁遊戲就能充分利用遊戲控制器，包括所有按鈕、搖桿、感應器、觸發器、LED、震動包等。

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

網頁版視訊聊天應用程式可使用專用喇叭上的電話按鈕，發起或結束通話、靜音等。

當然，這類功能強大的 API 只能在使用者明確選擇允許的情況下，與裝置互動。

請參閱「連線至非標準 HID 裝置」，瞭解更多詳細資訊、範例、如何開始使用，以及精彩的示範。

來源試用：多螢幕視窗版位 API

您現在可以呼叫 window.screen()，取得瀏覽器視窗所在螢幕的屬性。但如果您使用多螢幕設定，很抱歉，瀏覽器只會告訴你目前顯示的畫面。

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

多螢幕 Window Placement API 會在 Chrome 86 中啟動來源測試，讓您能夠列舉與電腦連線的螢幕，並在特定螢幕上放置視窗。對於簡報應用程式、金融服務應用程式等應用程式而言，能夠在特定螢幕上放置視窗至關重要。

您必須先要求權限，才能使用 API。如果沒有，瀏覽器會在使用者首次嘗試使用時，提示使用者啟用這項功能。

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

使用者授予權限後，呼叫 window.getScreens() 會傳回承諾，並以 Screen 物件的陣列解析。

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

之後，我可以在呼叫 requestFullScreen() 或放置新視窗時使用該資訊。Tom 在 web.dev 的「使用多螢幕 Window Placement API 管理多個顯示裝置」一文中提供所有詳細資訊。

其他

新的 CSS 選取器 :focus-visible 可讓您選擇啟用瀏覽器在決定是否顯示預設焦點指標時使用的同樣啟發式。

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

您可以使用 CSS ::marker 擬物元素，自訂清單的顏色、大小或編號/項目符號類型。

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

另外，Chrome 開發人員大會也即將登場，敬請鎖定我們的 YouTube 頻道，瞭解更多資訊！

延伸閱讀

這份文件僅涵蓋部分重點。請參閱下方連結，瞭解 Chrome 86 的其他變更。

如要隨時掌握最新影片，請訂閱我們的 Chrome 開發人員 YouTube 頻道，這樣一來，每當我們發布新影片，你就會收到電子郵件通知，或是將我們的RSS 動態消息新增至動態消息閱讀器。

我是 Pete LePage，Chrome 87 一推出，我就會在這裡告訴你 Chrome 的新功能！