Chrome? 在上周發布了 102 版本，我們一起來看看都有哪些新東西吧！

inert 屬性

inert? 屬性是一個全局的 HTML 屬性，它可以告訴瀏覽器忽略元素的用戶輸入事件，包括焦點事件和來自輔助技術的其他事件。主要是下面兩種用例：

• 元素是DOM 樹的一部分，但在屏幕外或隱藏；
• 元素是DOM 樹的一部分，但應該是非交互的。

這個屬性的在切圖的時候還是挺有用的。例如，我們想開發一個模態框，你希望在模態框可見時將焦點聚焦在模態框內。或者，對于用戶并不總是可見的抽屜，添加 inert 可確保當抽屜不在屏幕上時，鍵盤用戶不會意外與其進行交互。

<div>
  <label for="button1">ConardLi</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">codemmhy</label>
  <button id="button2">I am inert</button>
</div>

我么在第二個 <div>? 上聲明了 inert? 屬性，因此其中包含的所有內容，包括 <button> <label>，都無法獲得焦點或被單擊。

你可能覺得屬性用處不是特別大，不就是禁用了一些元素么？但是它實際上最大的用途還是在于網頁的可訪問性。比如一個有視力障礙的人來訪問我們的網站，雖然他看不到我們網頁上的內容，但是他可能會用到一些輔助技術來進行感知。

在我們正常使用的情況下，我們可能通過一些 disable? 屬性或者其他的 CSS 樣式來隱藏掉網頁內的某些內容，或者讓它們不可交互，對于我們正常的用戶肯定是沒問題的。

但是對于上面提到的有視力障礙的人，他不是依靠視覺來感知網頁內容，而是借助了一些其他的輔助技術，這就有可能會和我們隱藏掉的內容進行一些意外的交互。

inert 可以讓我們能夠從選項卡順序和可訪問性樹中直接刪除元素，這就會避免上面的問題！

inert? 在 Chrome 102? 中提供支持，并且在 Firefox? 和 Safari 中也都是可用的。

Navigation API

在很多 Web? 開發的場景下，我們需要在沒有網頁中的導航的情況下去更新頁面的 URL?，特別是在 SPA 應用里面，我們在切換了導航之后，不希望刷新網頁，只更新頁面中的內容。之前我們一般都是用 History API 去實現的。

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://blog.conardli.top/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://www.conardli.top/':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

但是用過的都知道，這玩意實在是太難用了，而且還很笨重，也容易出現問題。Navigation API 提供了一種更友好的方式來幫助我們操作網頁的導航。

要使用 Navigation API?，我們需要在全局對象上添加一個 navigate 監聽器。

navigation.addEventListener('navigate', (navigateEvent) => {
  switch (navigateEvent.destination.url) {
    case 'https://blog.conardli.top/':
      navigateEvent.transitionWhile(loadIndexPage());
      break;
    case 'https://www.conardli.top/':
      navigateEvent.transitionWhile(loadCatsPage());
      break;
  }
});

這個事件采用了集中處理的機制：它會被所有類型的導航觸發，無論是用戶執行了一個動作（例如點擊鏈接、提交表單或返回和前進）還是以代碼的方式觸發導航。在大多數情況下，它會讓你的代碼覆蓋瀏覽器對該操作的默認行為。對于 SPA，這可能意味著讓用戶保持在同一頁面上并加載或更改網站的內容。

目前只有 Edge、Chrome 對它提供了支持。

File Handling API

File Handling API? 可以讓已安裝的 PWA? 向操作系統注冊文件處理程序。注冊后，用戶就可以單擊文件然后使用已安裝的 PWA? 打開它了。這非常適合與文件交互的 PWA? 程序，例如圖像編輯器、IDE、文本編輯器等。

想要讓你的 PWA? 支持文件處理功能，你需要更新一下 web app manifest?，添加一個 file_handlers? 數組，其中包含有關你的 PWA? 可以處理的文件類型的詳細信息。你需要指定要打開的 URL、MIME 類型、文件類型的圖標和啟動類型。啟動類型定義是否應在單個客戶端或多個客戶端中打開多個文件。

"file_handlers": [
  {
    "action": "/open-csv",
    "accept": {"text/csv": [".csv"]},
    "icons": [
      {
        "src": "csv-icon.png",
        "sizes": "256x256",
        "type": "image/png"
      }
    ],
    "launch_type": "single-client"
  }
]

然后，想要在 PWA? 啟動時訪問這些文件，你需要為 launchQueue 對象指定一個使用者。啟動被排隊，直到它們被消費者處理。

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

hidden=until-found

網頁里面可能會有很多被隱藏掉的內容，如果一些折疊組件、tab? 標簽頁等等，如果你既要折疊網頁上的某些內容，但是又希望我們在網頁上搜索時能搜索的到那么，就可以用到 hidden=until-found 屬性了。

// Access from Window.launchQueue.
launchQueue.setConsumer((launchParams) => {
  if (!launchParams.files.length) {
    // Nothing to do when the queue is empty.
    return;
  }
  for (const fileHandle of launchParams.files) {
    // Handle the file.
    openFile(fileHandle);
  }
});

更多更新可以查看：https://chromestatus.com/features#milestone%3D102

以上就是 Chrome 102? 在 Web 這方便的一些更新了，你覺得哪個最有用呢？