css - 是否有仅适用于 safari 而不是 chrome 的 css hack？

Question

我试图为 safari 而不是 chrome 找到一个 css hack，我知道这些都是 webkit 浏览器，但我在 chrome 和 safari 中的 div 对齐方式有问题，每个都显示不同。

我一直在尝试使用它，但它也会影响 chrome，

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

有谁知道另一种只适用于 safari 的吗？

Answer 1

CATALINA 和 SAFARI 13 更新(2020 年初更新)*

请--如果您遇到问题，并且真的想通过发表评论来获得帮助或帮助他人，请发布您的浏览器和设备(MacBook/IPad/等...带有浏览器和操作系统版本号!)
声称没有这些工作是不准确的 (实际上甚至不可能。)其中许多并不是真正的“黑客”，而是 Apple 内置于 Safari 版本中的代码。需要更多信息。我喜欢你来到这里的事实，并且真的希望事情为你解决。
如果您在从这里获取一些东西在您的网站上工作时遇到问题， 请务必通过以下链接查看测试站点 -- 如果黑客在那里工作，但不在您的网站上，则不是黑客问题-您的网站发生了其他事情，通常只是如下所述的 CSS 冲突，或者可能没有任何工作，但您可能不知道您实际上根本没有使用 Safari。请记住，此信息旨在帮助解决(希望)短期问题的人们。
测试地点:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
和镜子!
https://browserstrangeness.github.io/css_hacks.html#safari
注意:过滤器和编译器(例如 SASS 引擎)需要标准的“跨浏览器”代码——而不是像这样的 CSS hack 这意味着他们将重写、销毁或删除黑客，因为这不是黑客所做的。其中大部分是非标准代码，经过精心设计，仅针对单个浏览器版本，如果更改则无法运行。如果你想和那些一起使用它， 您必须在任何过滤器或编译器之后加载您选择的 CSS hack .这似乎是理所当然的，但在那些没有意识到他们正在通过此类并非为此目的而设计的软件运行黑客行为来撤消黑客行为的人之间存在很多困惑。
Safari 自 6.1 版以来发生了变化，正如许多人所注意到的。
请注意:如果您在 iOS 上使用 Chrome [现在还有 Firefox](至少在 iOS 6.1 和更新版本中)并且您想知道为什么没有任何黑客似乎将 Chrome 与 Safari 分开，那是因为 Chrome 的 iOS 版本正在使用 Safari 引擎。它使用 Safari 黑客而不是 Chrome 黑客。更多关于这里的信息:https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS 于 2015 年秋季发布。它也响应了 Safari Hacks，但没有一个 Firefox Hacks，与 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 hacks。 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 月下旬更新)
我通过结合多个其他 hack 进行了数月的测试和实验，创建了这个 hack。
注意:像上面一样，双重媒体查询不是偶然的——它排除了许多无法处理媒体查询嵌套的旧浏览器。 -- 'and' 之后的空格也很重要。毕竟，这是一种 hack ……并且是目前唯一适用于 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 黑客:
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 Root 于 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 hacks的原因是
主要是指将其与 Google 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+ 以及我们在下面用于 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 组合黑客进行调整:

/* 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 浏览器的许多技巧。
注意:如果某些内容对您不起作用，请先检查测试页面，但请提供示例代码以及您正在尝试的黑客攻击，以便任何人帮助您。