我正在解决一个问题,我需要创建一段CSS代码,只在Safari浏览器中应用,而不是其他的WebKit浏览器(例如Chrome,不能应用)。请问,有没有人可以提供一些想法呢?
由于网络开发已经发生变化,HTML5已成为新的标准,因此更新了相关信息:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
这些适用于Safari 2-3,但不适用于之后的版本。它们还需要更详细的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>
在HTML5中,有其他方法可以仅针对Safari而不是Chrome/Opera进行目标定位:
以下方法适用于 Safari 10.1:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
/* 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的Hack可以。更多信息请参见此处: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浏览器特定技巧的实时测试页面:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari 或 https://browserstrangeness.github.io/css_hacks.html#safari
你最好使用JavaScript验证浏览器来更改特定属性。
否则,可以参考这个问题的其他答案。它允许你在每个浏览器上指定CSS属性,同样需要使用JavaScript。
以下其中一个应该可以运行:
html[xmlns*=""] body:last-child #widget { background:#f00; }
html[xmlns*=""]:root #widget { background:#f00; }
request.user_agent
)。 - Jakub Lédl