代码之家  ›  专栏  ›  技术社区  ›  Beau Smith

打印时如何禁用ChromeVox UI?

  •  0
  • Beau Smith  · 技术社区  · 7 年前

    这个 ChromeVox extension 对于Google Chrome浏览器,当在屏幕上选择时,会在内容周围放置一个橙色轮廓。

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

    打印时如何禁用此橙色聚焦环?

    ChromeVox orange focus ring in print dialog

    0 回复  |  直到 4 年前
        1
  •  0
  •   Beau Smith    7 年前

    通过打印css媒体查询解决了这个问题!

    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团队会在他们的代码中添加类似的解决方案。我试图找到他们的开源回购协议,但失败了。哈普?