inert 属性在旧版 Safari、Firefox、Edge 中静默失效，检测需用 'inert' in HTMLElement.prototype；动态控制必须用 .inert = true/false；降级需同步处理焦点、鼠标、辅助技术三类行为，并避免依赖 polyfill 单独兜底。
inert 属性不支持时浏览器直接忽略，降级必须手动做
原生 inert 在 Safari 17.4 及更早、Firefox 106 及更早、旧版 Edge 中完全不识别——不是报错，而是静默失效。这意味着你写了 <main inert>，老浏览器照样能点、能 Tab、能读屏。检测不能靠 typeof HTMLDivElement.prototype.inert === 'boolean'，而要用：'inert' in HTMLElement.prototype。返回 false 就必须立刻走降级逻辑，没有中间态。
JS 动态控制必须用 .inert = true/false，setAttribute 完全无效
很多人写 el.setAttribute('inert', '') 或 el.toggleAttribute('inert')，这些在所有浏览器里都不起作用。浏览器只响应 HTMLElement.inert 这个 DOM 属性的布尔赋值：mainContent.inert = isModalOpen。设为 true 会立即退出焦点、阻止事件冒泡、从可访问性树中移除子树；设为 false 才真正恢复。错误写法会导致：模态框打开后背景仍可点击、Tab 键卡在隐藏按钮上、屏幕阅读器重复播报被“冻结”的内容。
降级方案要覆盖三类行为：焦点、鼠标、辅助技术
仅靠 pointer-events: none + tabindex="-1" 是不够的。真实降级需同步处理：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 对目标容器设
aria-hidden="true"并显式设置tabIndex = -1 - 递归遍历所有可聚焦子元素（不只是
button和input，还要包括a[href]、[tabindex]、details、summary），逐个设tabIndex = -1 - 加 CSS：
pointer-events: none+user-select: none（防长按选中文本） - 监听
focusin事件，一旦焦点落入禁用区域，立刻focus()到模态框第一个可聚焦元素
别用 querySelectorAll('button, input, select...') 硬编码 selector——它漏掉自定义 role="button" 或 Shadow DOM 内部元素。推荐用 focusable-selector 库或手写完整匹配正则。
立即学习“前端免费学习笔记（深入）”；
polyfill 不是银弹，尤其对辅助技术语义支持残缺
@webcomponents/inert 或 wicg-inert polyfill 能模拟鼠标/键盘禁用，但无法修改可访问性树——屏幕阅读器仍可能读出被 inert 的内容，违反 WCAG A 级要求。它也不处理虚拟键盘弹出时的焦点重排、不接管动态插入的新节点（如 React 组件挂载后新增的 div[inert]），必须手动调用 inert.apply(el)。在 Safari 16.3 及更早版本中，polyfill 甚至无法阻止 document.elementFromPoint() 返回 null，导致拖拽 drop 区域识别失败。所以生产环境不能依赖 polyfill 单独兜底，必须搭配上述 JS + CSS + 事件拦截组合策略。
