如何在打印样式表中仅针对基于 webkit 的浏览器？答案

【问题标题】：How to target only webkit-based browsers in a print stylesheet?如何在打印样式表中仅针对基于 webkit 的浏览器？
【发布时间】：2011-07-27 15:09:47
【问题描述】：

我在使用基于 webkit 的浏览器中的打印样式表时遇到了一些布局问题，我想知道是否有 CSS 选择器，或者其他方式来进行 CSS hack 以仅针对 webkit/媒体打印？

经典的 webkit-min-device-pixel-ratio 媒体查询选择器不适用于打印。

那么与此 CSS Hack 等效的打印是什么？（将媒体更改为打印，不起作用）：

@media screen and (-webkit-min-device-pixel-ratio:0) {

}

【问题讨论】：

完全不推荐这样的技巧。您不能修复打印样式表以在所有浏览器中工作吗？究竟是什么破了？也许我们可以提供帮助。
这没有错。一个很好的使用示例可能是“使用 Safari 的人喜欢易用性，而 UI 用户想要一个简单易懂和熟悉的 UI，而 Firefox 用户想要更高级的东西，因为他们的技术能力高于平均水平。”这可以让您的网站迎合更多人群的子受众。
当人们仅仅因为我碰巧使用了一些浏览器而试图向我提供不同的内容时，我总是很生气。我想这只是我。
@Rodin 我知道不建议这样做，并且通常希望避免使用 CSS hack，但在这种情况下它是必需的。这个问题是一个单独的问题......

标签： css printing webkit

【解决方案1】：

您只能使用 javascript 为 WebKit 浏览器加载 CSS 文件。

<head>
    <link rel="stylesheet" id="hacks"/>
    <script>
        if(navigator.userAgent.indexOf("WebKit") != -1) {
            document.getElementById("hacks").href="hacks.css";
        }
    </script>
</head>

【讨论】：

另外，它看起来不像是 hack

【解决方案2】：

您可以包含一个仅用于 webkit 浏览器的样式表，如下所示：

@media print and (-webkit-min-device-pixel-ratio:0) {
    .black {
        color:black;
    }
}

其他浏览器也有类似的功能。

【讨论】：

这是旧版本的 Opera 所采用的。
@Knu Opera？！但是，上面写着-webkit-... Opera 做到了吗？你知道哪个版本吗？
@Knu 好吧，那么我想可以安全地假设全球受此影响的用户数量将远低于 1%。
这似乎不再起作用了。在 Chromium v71.0.3578.98 上失败了

【解决方案3】：

改用webkit-any-link：

@media print 
  {
  * > /**/ #foo, x:-webkit-any-link { padding-top: 200px; }
  }

* > /**/ 选择器用于过滤 IE7，如果不支持可以将其移除：

@media print 
  {
  #foo, x:-webkit-any-link { padding-top: 200px; }
  }

参考文献

【讨论】：