仅适用于 Safari 的 CSS hack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2860745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS hack for Safari ONLY
提问by Jakub Lédl
I'm solving one task and I need to create a piece of CSS what would apply only in Safari, NOT the other WebKit browser (mustn't apply in Chrome, f.e.). Please, could anyone toss in some ideas?
我正在解决一项任务，我需要创建一段仅适用于 Safari 的 CSS，而不适用于其他 WebKit 浏览器（不得适用于 Chrome，fe）。拜托，有人可以提出一些想法吗？
回答by Jeff Clayton
Updated info due to changes in web development since this was asked and HTML5 has become the new standard:
由于网络开发的变化而更新信息，因为这个被问及 HTML5 已成为新标准：
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
These worked great for Safari 2-3 but not newer safari versions which came later. They also required a more descriptive doctype/html spec. Here is the previous standard:
这些适用于 Safari 2-3，但不适用于后来推出的较新的 safari 版本。他们还需要更具描述性的 doctype/html 规范。这是以前的标准：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML5 removes this however with the plain and rather basic:
然而，HTML5 使用简单且相当基本的方式删除了这一点：
<!DOCTYPE html>
<html>
Other ways to target only Safari, and not Chrome/Opera, and works in HTML5:
其他仅针对 Safari 而不是 Chrome/Opera 并且适用于 HTML5 的方法：
This one still works properly with Safari 10.1:
这个在 Safari 10.1 中仍然可以正常工作：
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
To cover more versions, 6.1 and up, at this time you have to use the next pair of css hacks. The one for 6.1-10.0 to go with one that handles 10.1 and up.
要涵盖更多版本，6.1 及更高版本，此时您必须使用下一对 css hack。6.1-10.0 与处理 10.1 及更高版本的一种。
So then -- here is one I worked out for Safari 10.1+:
那么 - 这是我为 Safari 10.1+ 制定的一个：
The double media query is important here, don't remove it.
双媒体查询在这里很重要，不要删除它。
/* Safari 10.1+ (which is the latest version of Safari at this time) */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Try this one if SCSS or other tool set has trouble with the nested media query:
如果 SCSS 或其他工具集在嵌套媒体查询方面遇到问题，请尝试以下方法：
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
This next one works for 6.1-10.0 but not 10.1 (Late March 2017 update)
下一个适用于 6.1-10.0 但不适用于 10.1（2017 年 3 月下旬更新）
<style type="text/css">
/* 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 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;
);}
}
</style>
These combination css hacks are actually new as of this posting, I hope people find it handy. Meaning that I crafted these myself with many hours of testing and preparation so while you may have seen parts of them that look familiar out there, this was not copied from any site in this form but modified personally by myself to achieve this result. At the time of this posting Safari is in version 8 and Chrome is in version 37.
这些组合 css hack 在这篇文章中实际上是新的，我希望人们觉得它很方便。这意味着我经过数小时的测试和准备自己制作了这些，因此虽然您可能已经看到其中看起来很熟悉的部分，但这不是从任何站点以这种形式复制的，而是由我个人修改以实现此结果。在发布这篇文章时，Safari 是第 8 版，Chrome 是第 37 版。
Please be aware that if you are using an iOS device, (tested on iOS 7 & 8 platforms) Chrome renders as Safari since it uses the built-in Safari engine. It is not 'Chrome' at all from what I can see, but Safari with a different look. Chrome hacks do not affect it, only the Safari ones. More about that here: http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
请注意，如果您使用的是 iOS 设备，（在 iOS 7 和 8 平台上测试）Chrome 呈现为 Safari，因为它使用内置的 Safari 引擎。从我所见，它根本不是“Chrome”，而是外观不同的 Safari。Chrome 黑客不影响它，只有 Safari 的。更多关于这里：http: //allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plate-apple/
And to see it work:
并看到它的工作：
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
Live test page for this and many more CSS browser-specific hacks I have worked on:
这个的实时测试页面以及我参与过的更多特定于 CSS 浏览器的 hacks：
https://browserstrangeness.bitbucket.io/css_hacks.html#safariOR https://browserstrangeness.github.io/css_hacks.html#safari
https://browserstrangeness.bitbucket.io/css_hacks.html#safari或https://browserstrangeness.github.io/css_hacks.html#safari
回答by Jon W
You might be best off changing that particular propertywith javascript that verifies what browser you're on.
您最好使用验证您使用的浏览器的 javascript更改该特定属性。
Otherwise one of the other questions pointed to this. It lets you specify CSS properties on a per-browser basis, also using javascript.
否则，其他问题之一也指向了这一点。它允许您在每个浏览器的基础上指定 CSS 属性，也可以使用 javascript。
回答by mVChr
One of these should work:
其中之一应该有效：
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
