我正在解决一项任务，我需要创建一段仅适用于 Safari 的 CSS，而不适用于其他 WebKit 浏览器（不得适用于 Chrome，fe）。拜托，有人可以提出一些想法吗？
自从被问及 HTML5 已成为新标准以来，由于 Web 开发的变化而更新了信息：
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
这些适用于 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 使用简单且相当基本的方式删除了这一点：
<!DOCTYPE html>
<html>
其他仅针对 Safari 而不是 Chrome/Opera 并且适用于 HTML5 的方法：
这个仍然适用于 Safari 10.1：
/* 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+ (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;
}
}}
如果 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 月下旬更新）
<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>
这些组合 css hack 在这篇文章中实际上是新的，我希望人们觉得它很方便。这意味着我自己制作了许多小时的测试和准备，所以虽然您可能已经看到其中看起来很熟悉的部分，但这并不是从任何站点以这种形式复制的，而是我自己亲自修改以实现这一结果。在发布这篇文章时，Safari 是第 8 版，Chrome 是第 37 版。
请注意，如果您使用的是 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/
并看到它的工作：
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
这个的实时测试页面以及我参与过的更多特定于 CSS 浏览器的 hacks：
https://browserstrangeness.bitbucket.io/css_hacks.html#safari或https://browserstrangeness.github.io/css_hacks.html#safari
| 归档时间： |
|
| 查看次数： |
33808 次 |
| 最近记录： |