- 针对CATALINA和SAFARI 13的更新（2020年初更新）*
注意：过滤器和编译器（例如SASS引擎）期望使用标准的“跨浏览器”代码-而不是像此类的CSS hack，这意味着它们将重写，销毁或删除这些hack，因为这不是hack所做的。其中大部分是非标准代码，这些代码经过精心设计，仅针对单个浏览器版本，如果更改了它们，将无法正常工作。如果您希望将它们与之配合使用，则必须在任何过滤器或编译器之后加载所选的CSS hack。这似乎是一个定理，但人们之间有很多困惑，他们没有意识到他们是通过不是为此目的而设计的软件来运行黑客来消除黑客的。
许多人已经注意到，自6.1版以来，Safari发生了变化。
请注意：如果您在iOS上使用Chrome [以及现在也在使用Firefox]（至少在iOS 6.1和更高版本中），并且您想知道为什么没有一个黑客似乎将Chrome与Safari分开，这是因为iOS的Chrome版本正在使用Safari引擎。它使用的是Safari hack，而不是Chrome hack。有关此内容的更多信息，请访问：https : //allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ iOS版Firefox于2015年秋季发布。它也响应Safari Hacks，但没有Firefox Hacks，与iOS Chrome相同。
还：如果您尝试了一个或多个hack，但无法使其正常工作，请发布示例代码（更好的是一个测试页）-您正在尝试的hack，以及您使用的浏览器（确切的版本！）正在使用的设备以及正在使用的设备。没有这些附加信息，我或这里的任何其他人都将无法为您提供帮助。
通常，这是一个简单的解决方法或缺少分号。使用CSS通常是样式表中列出的代码或代码顺序的问题，而不仅仅是CSS错误。请在测试站点的此处进行测试。如果能够在此处正常运行，则说明该hack确实适用于您的设置，但这是需要解决的其他问题。这里的人确实很乐于帮助您，或者至少可以为您指明正确的方向。
测试地点：
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
和镜子！
https://browserstrangeness.github.io/css_hacks.html#safari
在这里，您可以使用一些hacks来使用最新版本的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+设计的：
双重媒体查询在这里很重要，请不要删除它。
/* 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月下旬更新）
我通过结合其他多种黑客，经过数月的测试和实验，创建了这种黑客。
注意：像上面一样，双重媒体查询也不是偶然的-它排除了许多无法处理媒体查询嵌套的较旧的浏览器。-“ and”后的空格也很重要。毕竟，这是一种黑客行为，并且是目前唯一适用于6.1和所有较新Safari版本的黑客行为。另外请注意，如以下注释中所列，该hack是非标准的css，必须在过滤器之后应用。诸如SASS引擎之类的过滤器将完全重写/撤消或完全将其删除。
如上所述，请检查我的测试页以确保它按原样运行（未经修改！）
这是代码：
/* 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的版本：
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
略作修改的版本适用于10.1（仅）：
/* 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（非iOS设备）：
/* 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 CSS hacks：
一个简单的支持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的版本：
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9现在包括功能检测，因此我们现在可以使用它...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
现在仅定位到iOS设备。如上所述，由于iOS上的Chrome根植于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;
}
以下是将6.1-7.0和7.1+分开的黑客，这些还需要将多个黑客结合在一起才能获得正确的结果：
/* 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;
);}
}
由于我已经指出了阻止iOS设备的方法，因此以下是针对非iOS设备的Safari 6.1+ hack的修改版本：
/* 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骇客的原因主要是为了将其与Google Chrome分开（再次不是iOS！）。发布替代方法可能很重要：如何也将Safari和Safari分别定位到Chrome如果需要，我在这里为您提供。
这里是基础知识，请再次在我的测试页上查看许多特定版本的Chrome，但这些通常涵盖了Chrome。Chrome的版本为45，Dev和Canary的版本目前为47。
我放在浏览器上的旧媒体查询组合仍然仅适用于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 +。...下面是我们用于Chrome 28+的版本的修改版本。Safari 9，即将到来的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和Safari 9均增加了对@supports功能检测的支持。Chrome和Firefox以前包含@supports。
/* 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组合hack进行修改：
/* 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.bitbucket.io/css_hacks.html#safari
[或镜子]
https://browserstrangeness.github.io/css_hacks.html#safari
测试页面还包含许多其他页面，特别是基于版本的页面，以进一步帮助您区分Chrome和Safari，以及针对Firefox，Microsoft Edge和Internet Explorer Web浏览器的许多技巧。
注意：如果某些操作不适合您，请首先检查测试页，但提供示例代码和您正在尝试的WHICH骇客，任何人都可以为您提供帮助。