是否只有safari没有Chrome的css黑客？

Question

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  #safari { display: block; } 
} 

有谁知道另一个将适用于safari的吗？

Answer 1

• 为CATALINA&SAFARI 13更新（2020年初更新）*

请--如果你遇到了麻烦，真的想通过发表评论来获得帮助或帮助他人，请发布你的浏览器和设备（MacBook/iPad/等），同时提供浏览器和操作系统的版本号！）

声称这些工作中没有一项是不准确的（实际上甚至是不可能的）其中很多并不是真正的“黑客”，而是苹果在Safari版本中内置的代码。需要更多的信息。我很高兴你来到这里，我真的希望一切都能顺利进行。

如果您的站点在这里有问题，请通过下面的链接检查测试站点--如果有黑客在那里工作，但不在您的站点上，黑客不是问题--您的站点发生了其他事情，通常只是下面提到的CSS冲突，或者可能没有工作，但您可能没有意识到您实际上根本没有使用Safari。请记住，这里的信息是为了帮助人们解决（希望）短期问题。

测试地点：

https://browserstrangeness.bitbucket.io/css_hacks.html#Safari

还有镜子！

https://browserstrangeness.github.io/css_hacks.html#Safari

注意：过滤器和编译器（如SASS引擎）期望的是标准的“跨浏览器”代码--而不是像这样的CSS黑客，这意味着他们将重写、破坏或删除黑客，因为这不是黑客所做的。其中大部分是非标准代码，这些代码经过精心设计，只针对单个浏览器版本，如果它们被修改，就无法工作。如果您希望使用它与那些，您必须加载您选择的CSS黑客后，任何过滤器或编译器。这可能看起来像是一个既定的，但在人们当中有很多混乱，他们没有意识到他们是通过这样的软件运行黑客，而这并不是为这个目的设计的。

正如许多人注意到的那样，Safari从6.1版本开始就发生了变化。

请注意：如果你在iOS（至少在iOS版本6.1和更新版本）上使用Chrome（现在也使用火狐），并且你想知道为什么没有黑客将Chrome和Safari分开，那是因为iOS版本的Chrome使用的是Safari引擎。它使用的是Safari黑客，而不是Chrome黑客。更多信息请访问:https://allthingsd.com/20120628/Googles-Chrome for iOS more-like-a-a-chrome-plated苹果/火狐for iOS于2015年秋季发布。它也响应Safari的攻击，但不是火狐的攻击，和iOS Chrome一样。

另外：如果你已经尝试了一个或多个黑客攻击，但有困难，请发布示例代码（最好是一个测试页面）--你正在尝试的黑客攻击，以及什么浏览器（确切的版本！）您正在使用的以及您正在使用的设备。如果没有这些额外的信息，我或这里的任何人都不可能帮助你。

它通常是一个简单的修复或一个缺失的分号。对于CSS，如果不只是CSS错误，那么通常是代码在样式表中列出顺序的问题。请在测试现场测试这里的黑客。如果它在那里工作，这意味着黑客真的在为您的设置工作，但它是其他东西需要解决。这里的人真的很乐意帮忙，或者至少给你指明正确的方向。

这里有一些新版本的Safari可以使用的黑客。

您应该先试试这一个，因为它涵盖了当前的Safari版本，并且仅限于纯Safari：

这一条仍然适用于Safari 13（2020年初）：

/* Safari 7.1+ */

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

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

}

为了复盖更多版本，6.1及以上版本，此时您必须使用下一对css hack。用于6.1-10.0的一个与用于10.1及以上版本的一个一起使用。

/* Safari 10.1+ */

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

    .safari_only { 

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

    }
}}

如果SCSS或其他工具集在嵌套媒体查询中遇到问题,请尝试以下操作：

/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .safari_only { 

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

    }
}}

下一个版本适用于6.1-10.0，但不适用于10.1（2017年3月底更新）

这个黑客是我经过几个月的测试和实验，结合了多个其他的黑客。

代码如下：

/* 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 CSS，请继续阅读下面的内容。

/* Safari 11+ */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {

    .safari_only { 

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

    }
}}

一个适用于Safari 11.0：

/* Safari 11.0 (not 11.1) */

html >> * .safari_only {

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

}

/* Safari 10.0 (not 10.1) */

_::-webkit-:host:not(:root:root), .safari_only {

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

}

/* Safari 10.1 */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {

    .safari_only { 

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

    }
}}

/* Safari 10.0 (not 10.1) but not on iOS */

_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {

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

}

Safari 9.0及更高版本的一个简单支持功能查询黑：

@supports (-webkit-hyphens:none)
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

Safari 9.0及更高版本的简单下划线攻击：

_:not(a,b), .safari_only {

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

}

另一个适用于Safari 9.0及更高版本：

/* Safari 9+ */

_:default:not(:root:root), .safari_only {

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

}

/* Safari 9+ */

@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {

    .safari_only { 

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

    }
}

/* Safari 9.0-10.0 (not 10.1) */

_::-webkit-:not(:root:root), .safari_only {

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

}

/* Safari 9 */

@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

现在仅针对iOS设备。正如上面提到的，由于iOS上的Chrome植根于Safari，所以它当然也与Safari一样。

/* Safari 9.0 (iOS Only) */

@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{

  .safari_only {
    color:#0000FF; 
    background-color:#CCCCCC; 
  }

}

一个适用于Safari 9.0+但不适用iOS设备：

/* Safari 9+ (non-iOS) */

_:default:not(:root:root), .safari_only {

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

}

一个用于Safari 9.0-10.0但不用于iOS设备：

/* Safari 9.0-10.0 (not 10.1) (non-iOS) */

_:-webkit-full-screen:not(:root:root), .safari_only {

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

}

/* Safari 6.1-7.0 */

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

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

    );}
}

/* Safari 6.1-10.0 (not 10.1) (non-iOS) */

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

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

    }
}}

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

通常（就像这个问题），人们询问Safari hacks的原因主要是将其与谷歌Chrome（同样不是iOS！）这可能是重要的替代张贴：如何目标Chrome和Safari以及分开，所以我在这里提供给您，以备需要。

这里是基本的，再次检查我的测试页面为Chrome的许多特定版本，但这些涵盖了Chrome的一般。Chrome是第45版,Dev和Canary版本目前已升至第47版.

我在browserhacks上放的旧媒体查询组合仍然只适用于Chrome 29+：

/* Chrome 29+ */

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
    .chrome_only {

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

    }
}

@supports功能查询也适用于Chrome 29+...一个修改版本的一个我们使用的Chrome28+下面。Safari9、即将到来的Firefox浏览器和Microsoft Edge浏览器不是用这一个来选的：

/* Chrome 29+ */

@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
    .chrome_only {

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

    }
}

此前，Chrome 28和更新版本很容易成为目标。这是我在看到它包含在其他CSS代码块中（最初不打算作为CSS hack）并意识到它的作用后发送给browserhacks的，因此我提取了相关部分以供参考：

[注意：]下面这个旧的方法现在可以在没有上面更新的情况下使用Safari 9和Microsoft Edge浏览器。Firefox和Microsoft Edge的新版本在编程中增加了对多个WebKit-CSS代码的支持，Edge和Safari9都增加了对@Supports特性检测的支持。Chrome和Firefox之前包含了@支持。

/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */

@supports (-webkit-appearance:none) 
{
    .chrome_and_safari {

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

    }
}

Chrome版本22-28的块（如果需要支持旧版本）也可以针对我上面发布的Safari组合攻击：

/* Chrome 22-28 */

@media screen and(-webkit-min-device-pixel-ratio:0)
{
    .chrome_only {-chrome-:only(;

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

    );}
}

NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;

与上面的Safari CSS格式化攻击一样，这些攻击可以按如下方式使用：

<div class="chrome_only">This text will be Blue in Chrome</div>

所以大家不用在这篇帖子里搜索了，这里又是我的直播测试页面：

https://browserstrangeness.github.io/css_hacks.html#Safari

测试页面还有很多其他的内容，特别是基于版本的内容，以进一步帮助您区分Chrome和Safari，还有许多针对Firefox、Microsoft Edge和Internet Explorer web浏览器的黑客。

注意：如果某些东西对您不起作用，请首先检查测试页面，但请提供示例代码和您正在尝试的黑客，以便任何人帮助您。