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

Chrome 86 版的新功能

Pete LePage

Twitter GitHub Glitch Mastodon 首頁

Chrome 86 版現已推出穩定版。

以下是一些注意事項：

File System Access API 現已推出穩定版。
Web HID 和多螢幕視窗刊登位置 API 都有新的來源試用。
我們在 CSS 中推出了一些新功能，還有許多其他功能。

我是 Pete LePage，負責在家工作和拍攝。接下來，讓我們深入探索 Chrome 第 86 版為開發人員提供的新功能！

檔案系統存取

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

透過 File System Access API (原為 Native File System API) 的來源試用版本結束，現在該 API 目前處於穩定狀態，您可以呼叫 showOpenFilePicker() 來顯示檔案選擇器，然後傳回檔案控制代碼，用於讀取檔案。

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 上的檔案系統存取文章。

來源試用：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
// }

Multi-Screen 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 的「使用多螢幕刊登位置 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 Developers YouTube 頻道。每當我們推出新影片，或是在動態消息閱讀器中加入 RSS 動態消息，您就會收到電子郵件通知。

我是 Pete LePage，當 Chrome 87 推出後，我會馬上說明 Chrome 的新功能！