由于网络开发的变化而更新了信息,因为这被问及 HTML5 已成为新标准:
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 hack。用于 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 hack 不会影响它,只有 Safari 会影响它。更多相关信息:http://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/
并看到它的工作:
<div class="safari_only">
Only Safari shows up in blue on gray here.
</div>
此页面的实时测试页面以及我从事的更多 CSS 浏览器特定的 hack:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari 或 https://browserstrangeness.github.io/css_hacks.html#safari