我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
顺便说一下，对于那些只需要在移动设备上使用Safari的人来说，只需在这个黑客中添加一个媒体查询:
@media screen and (max-width: 767px) {
_::-webkit-full-page-media, _:future, :root .safari_only {
padding: 10px; //or any property you need
}
}
别忘了把.safari_only类添加到你想要的目标元素中，例如:
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
其他回答
有一种方法可以从Chrome中过滤Safari 5+:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}
}
注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面)，那么这是可行的:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
更新蒙特利和SAFARI 15(2022年初更新)*
请请—如果你遇到了麻烦，并且真的想通过发表评论来获得帮助或帮助他人，请发布你的浏览器和设备(MacBook/IPad/等…浏览器和操作系统版本号!)
声称这些工作都没有是不准确的(实际上甚至是不可能的)。其中许多并不是真正的“黑客”，而是苹果内置在Safari版本中的代码。还需要更多的信息。我很高兴你能来这里，也很希望你能如愿以偿。
如果你在你的网站上有问题，请通过下面的链接检查测试网站——如果黑客在那里工作，但不是在你的网站上，黑客不是问题——你的网站发生了其他事情，通常只是下面提到的CSS冲突，或者可能什么都没有工作，但你可能没有意识到你实际上没有使用Safari。记住，这些信息是为了帮助人们解决短期问题(希望如此)。
测试地点:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
和镜子!
https://browserstrangeness.github.io/css_hacks.html#safari
NOTE: Filters and compilers (such as the SASS engine) expect standard 'cross-browser' code -- NOT CSS hacks like these which means they will rewrite, destroy or remove the hacks since that is not what hacks do. Much of this is non-standard code that has been painstakingly crafted to target single browser versions only and cannot work if they are altered. If you wish to use it with those, you must load your chosen CSS hack AFTER any filter or compiler. This may seem like a given but there has been a lot of confusion among people who do not realize that they are undoing a hack by running it through such software which was not designed for this purpose.
正如许多人注意到的那样，Safari从6.1版开始就发生了变化。
Please note: if you are using Chrome [and now also Firefox] on iOS (at least in iOS versions 6.1 and newer) and you wonder why none of the hacks seem to be separating Chrome from Safari, it is because the iOS version of Chrome is using the Safari engine. It uses Safari hacks not the Chrome ones. More about that here: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox for iOS was released in Fall 2015. It also responds to the Safari Hacks, but none of the Firefox ones, same as 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+设计的:
double media查询在这里很重要，不要删除它。
/* 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创建的。
NOTES: like above, the double media query is NOT an accident -- it rules out many older browsers that cannot handle media query nesting. -- The missing space after one of the 'and's is important as well. This is after all, a hack... and the only one that works for 6.1 and all newer Safari versions at this time. Also be aware as listed in the comments below, the hack is non-standard css and must be applied AFTER a filter. Filters such as SASS engines will rewrite/undo or completely remove it outright.
如上所述，请检查我的测试页面以查看它的工作状态(未经修改!)
下面是代码:
/* 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技巧:
一个简单的支持功能查询hack 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+, < 13.1 */
@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。
/* 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+黑客的修改版本:
/* 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黑客的原因是 主要是指将它与谷歌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;
}
}
一个@支持功能查询工作良好的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组合hacks:
/* 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网络浏览器提供了许多技巧。
注意:如果某些东西对你不起作用，首先检查测试页面，但要提供示例代码和你试图帮助任何人。
如此:
@media not all and (min-resolution:.001dpcm) {
@media {
/* your code for Safari Desktop & Mobile */
body {
background-color: red;
color: blue;
}
/* end */
}
}
适用于iOS 16和macOS Ventura:
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
