如何在打印时禁用 ChromeVox UI？

Question

Google Chrome 浏览器的ChromeVox extension 在屏幕上被选中时会在内容周围放置一个橙色轮廓。

打印网页时也会打印此橙色轮廓。看看下面的按钮如何以橙色轮廓被选中，然后也出现在打印预览中。

如何在打印时禁用此橙色对焦环？

Answer 1

用 print css media-queries 解决了这个问题！

ChromeVox 将标记和样式注入页面的body，如下所示：

<div aria-hidden="true" class="cvox_indicator_container  ...more classes...">
...more html markup...
</div>

所以我更新了我的全局 CSS 样式表以包含以下内容：

@media print {
  .cvox_indicator_container {
    display: none;
  }
}

效果很好。

然后我开始想，即使 ChromeVox 更改了他们的 css 以具有更大的特异性，我也想确保这永远不会改变。

然后，我将 css 更新为：

@media print {
  html body div.cvox_indicator_container {
    display: none !important;
  }
}

注意：这可能有点矫枉过正，但肯定更有针对性。

理想情况下，ChomeVox 团队会在他们的代码中添加类似此解决方案的内容。我试图找到他们的开源仓库……接近但失败了。哈普？