如何在打印时禁用ChromeVox UI？

Question

在Chrome屏幕上选择时，Google Chrome浏览器的ChromeVox extension会在内容周围显示橙色轮廓。

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

How do I disable this orange focus ring when printing?

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团队会在其代码中添加类似此解决方案的内容。我试图找到他们的开源回购......接近但失败了。 HALP？