CSS `inert` 属性：禁用元素及其子元素的交互与可访问性

各位观众老爷们，今天咱就来聊聊 CSS 里一个有点“冷门”，但关键时刻能救命的家伙——inert 属性。这玩意儿就像个“隐形结界”，能让你的网页元素瞬间“与世隔绝”，谁也别想碰它一下。

开场白：这inert属性是干啥的？

想象一下，你精心设计了一个模态框（Modal），用户点击背景区域应该关闭它。但是，如果模态框还在动画过渡期间，用户疯狂点击，可能会导致一些意想不到的 BUG，比如模态框还没完全消失，又被重新打开了。这时候，inert 属性就能派上用场了！

简单来说，inert 属性的作用就是：让元素及其所有子元素变得不可交互，且从可访问性树中移除。

不可交互： 意味着用户无法点击、聚焦、悬停、滚动这些元素。就像给它们穿上了一件“隐形盔甲”，刀枪不入。
从可访问性树中移除： 意味着屏幕阅读器等辅助技术会忽略这些元素，不会向用户播报它们的内容。这样可以避免用户听到一些不应该听到的内容，影响用户体验。

inert 的值就两种：

inert：启用“隐形结界”。
none：禁用“隐形结界”（默认值）。

案例分析：模态框 (Modal) 的救星

咱们先来撸一段 HTML 代码，模拟一个简单的模态框：

<button id="openModalBtn">打开模态框</button>

<div id="modalContainer" class="modal-container">
  <div class="modal">
    <h2>模态框标题</h2>
    <p>模态框内容</p>
    <button id="closeModalBtn">关闭模态框</button>
  </div>
  <div class="modal-overlay"></div>
</div>

再来点 CSS，让它看起来像个模态框：

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden; /* 初始状态隐藏 */
  opacity: 0;
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s; /* 淡入效果 */
}

.modal-container.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 0.25s 0s; /* 移除延迟，立即显示 */
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

最后，用 JavaScript 控制模态框的显示和隐藏：

const openModalBtn = document.getElementById('openModalBtn');
const closeModalBtn = document.getElementById('closeModalBtn');
const modalContainer = document.getElementById('modalContainer');
const modalOverlay = document.querySelector('.modal-overlay');

openModalBtn.addEventListener('click', () => {
  modalContainer.classList.add('active');
});

closeModalBtn.addEventListener('click', () => {
  modalContainer.classList.remove('active');
});

modalOverlay.addEventListener('click', () => {
  modalContainer.classList.remove('active');
});

现在，我们有了个能正常工作的模态框。但是，正如我前面提到的，如果用户在模态框关闭的动画还没结束时，狂点背景，可能会出问题。

inert 登场，解决问题！

我们可以在模态框关闭时，给模态框容器加上 inert 属性，让它“与世隔绝”，防止用户误操作：

closeModalBtn.addEventListener('click', () => {
  modalContainer.classList.remove('active');
  modalContainer.inert = true; // 模态框关闭时，加上 inert
  setTimeout(() => {
      modalContainer.inert = false; // 动画结束后，移除 inert
  }, 250); // 动画时间是0.25s，这里设置250ms
});

modalOverlay.addEventListener('click', () => {
  modalContainer.classList.remove('active');
  modalContainer.inert = true; // 模态框关闭时，加上 inert
  setTimeout(() => {
      modalContainer.inert = false; // 动画结束后，移除 inert
  }, 250); // 动画时间是0.25s，这里设置250ms
});

或者，你也可以用 CSS 来控制 inert 属性，结合 :not(.active) 选择器：

.modal-container:not(.active) {
  inert: true;
}

但是这种方法需要浏览器支持 CSS 的 inert 属性，且逻辑上不如用JS控制清晰。

现在，即使用户在模态框关闭的动画期间疯狂点击，也不会触发任何操作，因为模态框已经被 inert 属性“冻结”了！

inert 的进阶用法：禁用页面上的其他元素

除了模态框，inert 还可以用于禁用页面上的其他元素。比如，在加载数据时，可以给整个页面加上 inert 属性，防止用户在数据加载完成之前进行操作，造成数据错误。

// 数据加载开始
document.body.inert = true;

// 模拟数据加载
setTimeout(() => {
  // 数据加载完成
  document.body.inert = false;
}, 3000);

这段代码会在数据加载期间，禁用整个页面的交互，直到数据加载完成。

inert 和 disabled 的区别

很多人可能会把 inert 和 disabled 搞混，它们都是用来禁用元素的，但它们之间有很大的区别：

特性	`inert`	`disabled`
作用范围	元素及其所有子元素	只能用于表单元素 (input, button, select 等)
可访问性	从可访问性树中移除	仍然存在于可访问性树中，但状态被标记为“已禁用”
样式	默认情况下，不会改变元素的样式	通常会改变元素的样式 (比如变灰)
事件	阻止所有事件 (包括 focus, click 等)	阻止大多数事件，但 focus 事件可能会被触发
使用场景	禁用整个区域的交互，防止用户误操作，提升用户体验	禁用表单元素，防止用户提交无效数据

简单来说，inert 是一个更强大的“武器”，它可以禁用整个区域的交互，并从可访问性树中移除元素。而 disabled 只能用于表单元素，且不会从可访问性树中移除元素。

inert 的兼容性问题

虽然 inert 属性很强大，但它的兼容性并不是很好。截至目前，只有 Chrome、Edge、Firefox 和 Safari 支持 inert 属性。

浏览器	支持情况
Chrome	支持
Edge	支持
Firefox	支持
Safari	支持
IE	不支持

如果需要在不支持 inert 属性的浏览器中使用类似的功能，可以使用 polyfill 或者自己手动实现。

手动实现 inert 的方法

如果浏览器不支持 inert 属性，我们可以用 JavaScript 和 CSS 来模拟它的功能。

禁用交互： 可以通过设置元素的 pointer-events 样式为 none 来禁用交互。
```
.inert {
  pointer-events: none;
}
```

阻止焦点： 可以通过设置元素的 tabindex 属性为 -1 来阻止元素获得焦点。

function setInert(element, isInert) {
  if (isInert) {
    element.classList.add('inert');
    element.setAttribute('tabindex', '-1');
    // 递归处理子元素
    Array.from(element.children).forEach(child => setInert(child, true));
  } else {
    element.classList.remove('inert');
    element.removeAttribute('tabindex');
    // 递归处理子元素
    Array.from(element.children).forEach(child => setInert(child, false));
  }
}

隐藏可访问性： 可以通过设置元素的 aria-hidden 属性为 true 来隐藏元素的可访问性。

function setInert(element, isInert) {
  if (isInert) {
    element.classList.add('inert');
    element.setAttribute('tabindex', '-1');
    element.setAttribute('aria-hidden', 'true');
    // 递归处理子元素
    Array.from(element.children).forEach(child => setInert(child, true));
  } else {
    element.classList.remove('inert');
    element.removeAttribute('tabindex');
    element.removeAttribute('aria-hidden');
    // 递归处理子元素
    Array.from(element.children).forEach(child => setInert(child, false));
  }
}

最佳实践：如何正确使用 inert

只在必要时使用 inert： 不要滥用 inert 属性，只在需要禁用交互的场景下使用它。过度使用 inert 可能会影响用户体验，让用户感到困惑。
注意可访问性： 在使用 inert 属性时，要考虑到可访问性。确保屏幕阅读器等辅助技术能够正确地处理 inert 元素。
提供清晰的反馈： 当元素被 inert 属性禁用时，应该给用户提供清晰的反馈，告诉他们为什么不能与这些元素交互。
测试： 在使用 inert 属性后，一定要进行测试，确保它能够正常工作，并且不会影响用户体验。

总结：inert 是个好东西，但要用对地方

总而言之，inert 属性是一个非常有用的工具，它可以帮助我们禁用元素的交互，防止用户误操作，提升用户体验。但是，inert 属性的兼容性并不是很好，而且使用不当可能会影响可访问性。因此，在使用 inert 属性时，一定要谨慎，确保它能够真正地解决问题，并且不会带来新的问题。

结束语：希望大家学有所获！

今天的讲座就到这里了。希望大家通过今天的学习，能够对 inert 属性有一个更深入的了解，并且能够在实际开发中灵活运用它。记住，inert 属性是个好东西，但要用对地方！咱们下期再见！

发表回复 取消回复

发表回复取消回复