快速了解 Inert 屬性，你明白了嗎？
介紹一個(gè)全新的、和用戶行為息息相關(guān)的屬性：inert。
HTMLElement.inert - Web APIs | MDN (mozilla.org)[1]。
有了這個(gè)屬性，可以更加輕易地控制很多交互行為，花幾分鐘了解一下吧！
一、inert 是什么？
inert是 HTMLElement 的一個(gè)布爾屬性，意為"惰性"，簡(jiǎn)單來(lái)說(shuō)，可以禁用一切交互，包括鼠標(biāo)點(diǎn)擊、選中、拖拽、鍵盤操作等等，舉個(gè)例子：
<div inert>
<p>`inert`是 HTMLElement 的一個(gè)布爾屬性，意為"惰性"，簡(jiǎn)單來(lái)說(shuō)，可以禁用一切交互</p>
<a href="/link">link</a>
<button>button1</button>
<button>button2</button>
</div>
下面是實(shí)際效果：
可以看到，添加了inert屬性后，整個(gè)元素?zé)o法進(jìn)行任何交互，就好像整個(gè) DOM 都被凍結(jié)了一樣，所以理解成“凍結(jié)”，可能會(huì)更好一些
你也可以查看線上demo：html inert (codepen.io)[2]或者h(yuǎn)tml inert (runjs.work)[3]。
另外，inert是一個(gè)布爾類型的屬性，就是和平時(shí)見(jiàn)到的disabled、hidden等一致，只要有這個(gè)屬性，就表示為true，不存在才是false。
<!--以下都為true-->
<div inert>...</div>
<div inert="true">...</div>
<div inert="false">...</div>
<!--以下才是false-->
<div>...</div>
這個(gè)需要注意一下：
二、inert 的實(shí)際應(yīng)用
一個(gè)新的屬性，總會(huì)聯(lián)想到一些實(shí)際應(yīng)用場(chǎng)景，下面介紹兩個(gè)案例：
1. a鏈接的禁用
在過(guò)去，要禁用一個(gè)a鏈接可能會(huì)這樣：
a{
pointer-events: none;
}
但是，這樣只是阻止了鼠標(biāo)點(diǎn)擊行為，鍵盤還是可以focus到的，為了阻止鍵盤事件，還需要添加tabindex=-1。
<a tabindex="-1" href="/xxx"></a>
這樣鍵盤就不會(huì)聚焦到a鏈接上了。
除此之外，還有一種更為暴力的方案，直接去除a的href屬性。
a.href = ''
這樣去除之后，a就僅僅是一個(gè)普通的標(biāo)簽了，也不會(huì)被聚焦到了。不過(guò)這個(gè)方案需要在某處保留a原有的href屬性，以便后續(xù)還原。
如果用inert屬性，直接就可以實(shí)現(xiàn)全方位的禁用了。
<a inert href="/xxx"></a>
還可以通過(guò)[inert]屬性自定義樣式。
a[inert]{
opacity: .5
}
這樣在視覺(jué)上可以更好地區(qū)分哪些部分是禁用的。
當(dāng)然，不僅僅是a鏈接，其他任何元素都可以用這種方式來(lái)禁用。
2. 彈窗中的焦點(diǎn)
很多彈窗內(nèi)部也會(huì)有交互，比較常見(jiàn)的確認(rèn)、取消按鈕。
如果需要兼顧到鍵盤訪問(wèn)，肯定是希望在彈窗打開后，焦點(diǎn)只能在彈窗內(nèi)部切換，而不能移動(dòng)到外部，比如像這樣，焦點(diǎn)仍然可以跑到外面去。
現(xiàn)在有了inert，就可以很方便的處理這個(gè)問(wèn)題了，只需要在外面的元素上添加inert。
<div inert>
<button id="btn">打開彈窗</button>
<a href="/link">link</a>
</div>
<dialog>
...
</dialog>
效果如下：
其實(shí)，如果是用原生的彈窗，通過(guò)showModal打開后，已經(jīng)天然支持局部焦點(diǎn)特性了。
dialog.showModal()
這樣可以省去大量的焦點(diǎn)控制控制，還有什么理由不去使用原生呢？
三、兼容性和總結(jié)
這類比較偏體驗(yàn)的屬性其實(shí)是不太需要關(guān)注兼容的，大部分地方其實(shí)都用不上，如果你悄悄在某個(gè)地方用了也無(wú)妨，瀏覽器能支持更好，不支持也不影響主要功能。下面是兼容性情況：
全兼容！除了版本要求有點(diǎn)高以外。
沒(méi)關(guān)系，還有polyfill可以用，如下：
WICG/inert: Polyfill for the inert attribute and property. (github.com)[4]
看了一下大致原理，和以前的處理基本一致，pinter-events和tabindex=-1的結(jié)合，阻止鼠標(biāo)和鍵盤行為。
總之即使非常新，也可以提前使用起來(lái)了，下面總結(jié)一下主要知識(shí)點(diǎn)：
- inert是一個(gè) HTMLElement 屬性，可以禁用一切用戶交互，非常徹底，就像“凍結(jié)”了一樣。
- inert?是一個(gè)布爾屬性，只要存在該屬性就是true，否則為false。
- inert?可以很方便的禁用a鏈接，也包括其他任意元素。
- inert可以很方便的控制焦點(diǎn)的作用范圍，讓彈窗內(nèi)的焦點(diǎn)不會(huì)跳到外部。
- 原生dialog.showModal已經(jīng)天然具備局部焦點(diǎn)的特性，大家可以多多使用。
參考資料
[1] HTMLElement.inert - Web APIs | MDN (mozilla.org): https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
[2] html inert (codepen.io): https://codepen.io/xboxyan/pen/oNdQBNp
[3] html inert (runjs.work): https://runjs.work/projects/39d0efb5b0a442ed
[4] WICG/inert: Polyfill for the inert attribute and property. (github.com): https://github.com/WICG/inert
