Chrome 102：新增兩個(gè) HTML 屬性、兩個(gè) JS API !

作者：ConadLi 2022-06-17 09:46:51

Chrome 在上周發(fā)布了 102 版本，我們一起來(lái)看看都有哪些新東西把！

Chrome? 在上周發(fā)布了 102 版本，我們一起來(lái)看看都有哪些新東西吧！

inert 屬性

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

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

這個(gè)屬性的在切圖的時(shí)候還是挺有用的。例如，我們想開發(fā)一個(gè)模態(tài)框，你希望在模態(tài)框可見時(shí)將焦點(diǎn)聚焦在模態(tài)框內(nèi)。或者，對(duì)于用戶并不總是可見的抽屜，添加 inert 可確保當(dāng)抽屜不在屏幕上時(shí)，鍵盤用戶不會(huì)意外與其進(jìn)行交互。

<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>

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

你可能覺得屬性用處不是特別大，不就是禁用了一些元素么？但是它實(shí)際上最大的用途還是在于網(wǎng)頁(yè)的可訪問性。比如一個(gè)有視力障礙的人來(lái)訪問我們的網(wǎng)站，雖然他看不到我們網(wǎng)頁(yè)上的內(nèi)容，但是他可能會(huì)用到一些輔助技術(shù)來(lái)進(jìn)行感知。

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

但是對(duì)于上面提到的有視力障礙的人，他不是依靠視覺來(lái)感知網(wǎng)頁(yè)內(nèi)容，而是借助了一些其他的輔助技術(shù)，這就有可能會(huì)和我們隱藏掉的內(nèi)容進(jìn)行一些意外的交互。

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

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

Navigation API

在很多 Web? 開發(fā)的場(chǎng)景下，我們需要在沒有網(wǎng)頁(yè)中的導(dǎo)航的情況下去更新頁(yè)面的 URL?，特別是在 SPA 應(yīng)用里面，我們?cè)谇袚Q了導(dǎo)航之后，不希望刷新網(wǎng)頁(yè)，只更新頁(yè)面中的內(nèi)容。之前我們一般都是用 History API 去實(shí)現(xiàn)的。

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

但是用過的都知道，這玩意實(shí)在是太難用了，而且還很笨重，也容易出現(xiàn)問題。Navigation API 提供了一種更友好的方式來(lái)幫助我們操作網(wǎng)頁(yè)的導(dǎo)航。

要使用 Navigation API?，我們需要在全局對(duì)象上添加一個(gè) navigate 監(jiān)聽器。

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

這個(gè)事件采用了集中處理的機(jī)制：它會(huì)被所有類型的導(dǎo)航觸發(fā)，無(wú)論是用戶執(zhí)行了一個(gè)動(dòng)作（例如點(diǎn)擊鏈接、提交表單或返回和前進(jìn)）還是以代碼的方式觸發(fā)導(dǎo)航。在大多數(shù)情況下，它會(huì)讓你的代碼覆蓋瀏覽器對(duì)該操作的默認(rèn)行為。對(duì)于 SPA，這可能意味著讓用戶保持在同一頁(yè)面上并加載或更改網(wǎng)站的內(nèi)容。

目前只有 Edge、Chrome 對(duì)它提供了支持。

File Handling API

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

想要讓你的 PWA? 支持文件處理功能，你需要更新一下 web app manifest?，添加一個(gè) file_handlers? 數(shù)組，其中包含有關(guān)你的 PWA? 可以處理的文件類型的詳細(xì)信息。你需要指定要打開的 URL、MIME 類型、文件類型的圖標(biāo)和啟動(dòng)類型。啟動(dòng)類型定義是否應(yīng)在單個(gè)客戶端或多個(gè)客戶端中打開多個(gè)文件。

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

然后，想要在 PWA? 啟動(dòng)時(shí)訪問這些文件，你需要為 launchQueue 對(duì)象指定一個(gè)使用者。啟動(dòng)被排隊(duì)，直到它們被消費(fèi)者處理。

// 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

網(wǎng)頁(yè)里面可能會(huì)有很多被隱藏掉的內(nèi)容，如果一些折疊組件、tab? 標(biāo)簽頁(yè)等等，如果你既要折疊網(wǎng)頁(yè)上的某些內(nèi)容，但是又希望我們?cè)诰W(wǎng)頁(yè)上搜索時(shí)能搜索的到那么，就可以用到 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);
  }
});