如何使用 CSS Hacks 只设置 Safari 的样式？

仅针对 Safari 的 CSS 黑客

为什么要为 Safari 单独设置样式？

CSS 黑客通常用于针对特定目标用于样式目的的浏览器。在这种情况下，我们的目标是仅将样式应用于 Safari，不包括 Chrome 等其他浏览器。

当前黑客的无效性

正如原始帖子中提到的， @media screen 和 (-webkit-min-device-pixel-ratio:0) 黑客攻击已经影响了 Safari 和Chrome。

Safari 的更新解决方案

但是，这里有一些新的 CSS hack，专门针对Safari：

/* Safari 7.1+ */

_::-webkit-full-page-media, _:future, :root .safari_only {

  color:#0000FF; 
  background-color:#CCCCCC; 

}

/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {

    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

/ Safari 6.1-10.0 (not 10.1) */

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) 
{ @media {
    .safari_only { 

        color:#0000FF; 
        background-color:#CCCCCC; 

    }
}}

用法

要将这些样式专门应用于 Safari 中的元素，请使用 safari_only 类，例如this:

<div class="safari_only">This text will be blue in Safari</div>

注意：

在实现这些 hack 时使用自定义类名至关重要，以避免出现意想不到的后果。此外，请注意，这些 hack 可能并非在所有情况下都有效，特别是当网站使用 CSS 过滤器或编译器时，因为它们可能会改变或删除 hack。

以上是如何使用 CSS Hacks 只设置 Safari 的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！