仅针对Safari的CSS hack

Question

仅针对Safari的CSS hack

csssafari

3

我正在解决一个问题，我需要创建一段CSS代码，只在Safari浏览器中应用，而不是其他的WebKit浏览器（例如Chrome，不能应用）。请问，有没有人可以提供一些想法呢？

- Jakub Lédl

好吧，我帮助我的朋友，他有点傻，他创建了一个混合布局，既有Divs + CSS又有表格。现在，我找到了一种方法，在Safari中正确地获取这些表格，但另一方面，在Chrome中它们完全错误。 - Jakub Lédl

3

Safari和Chrome使用相同的渲染引擎，即Webkit。你确定已经成功分离出了问题吗？ - ceejayoz

你可能想查看这个链接：https://dev59.com/-nNA5IYBdhLWcg3whuR_ 它是关于IE的，但其中包含了CSS if系统。 - fmsf

1

@Jakub Lédl，我可以建议您敦促您的朋友修复布局，并避免浏览器嗅探/定位？从长远来看，这几乎总是更容易的。 - David Thomas

我认为他下次会这样做。他说这个布局如果不使用表格布局就太复杂了。虽然这不是我的意见。我向他展示了Blueprint CSS 框架;-)至于这个问题，我最终决定在服务器端解决 (request.user_agent)。 - Jakub Lédl

3个回答

1

你最好使用JavaScript验证浏览器来更改特定属性。

否则，可以参考这个问题的其他答案。它允许你在每个浏览器上指定CSS属性，同样需要使用JavaScript。

- Jon W

是的，但这只适用于[safari3]（我使用4）或[safari]，适用于Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome。 - Jakub Lédl

仔细查看验证您所在浏览器的JavaScript。手动执行此操作，您应该能够准确指定所需的行为。 - Jon W

1

虽然@JonW可能是迄今为止最好的答案，但没有标记，这已经成为一个可怕的问题。 - Rob

0

以下其中一个应该可以运行：

html[xmlns*=""] body:last-child #widget { background:#f00; }

html[xmlns*=""]:root #widget  { background:#f00;  }

- mVChr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Clayton · Accepted Answer

由于网络开发已经发生变化，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; 

}

为了覆盖更多版本（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的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