【问题标题】:CSS hack for Safari ONLY仅适用于 Safari 的 CSS hack
【发布时间】:2010-05-18 20:09:45
【问题描述】:

我正在解决一项任务,我需要创建一段仅适用于 Safari 而非其他 WebKit 浏览器的 CSS(不得适用于 Chrome,例如)。拜托,有人可以提出一些想法吗?

【问题讨论】:

  • 好吧,我帮助我的朋友,他有点愚蠢,他创建了一个混合布局,包含 Div + CSS 和表格。现在,我找到了一种在 Safari 中正确处理这些表格的方法,但另一方面,它们在 Chrome 中完全错误。
  • Safari 和 Chrome 使用相同的渲染引擎 Webkit。你确定你已经隔离了问题吗?
  • 你可能想检查一下这个:stackoverflow.com/questions/927626/… 它适用于 IE,但如果系统在其中包含 css
  • @Jakub Lédl,我可以建议您敦促您的朋友修复布局,并避免浏览器嗅探/定位吗?从长远来看,这几乎总是更容易。
  • 我想他下次会这样做。他说这种布局太复杂了,没有表格布局是做不到的。不过,不是我的意见。我向他展示了 Blueprint CSS 框架 ;-) 至于这个问题,我最终决定在服务器端解决它(request.user_agent)。

标签: css safari


【解决方案1】:

由于网络开发的变化而更新了信息,因为这被问及 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#safarihttps://browserstrangeness.github.io/css_hacks.html#safari

【讨论】:

  • 感谢您的有用回答
  • 最欢迎 - Safari 8 支持添加和更新在编辑上方
【解决方案2】:

changing that particular propertyjavascript that verifies what browser you're on 可能是你最好的选择。

否则其他问题之一指向this。它允许您基于每个浏览器指定 CSS 属性,也可以使用 javascript。

【讨论】:

  • 是的,但这仅适用于 [safari3](我使用 4)或 [safari],适用于 Safari、NetNewsWire、OmniWeb、Shiira、Google Chrome。
  • 仔细查看验证您使用的浏览器的 javascript。手动执行此操作,您应该能够准确指定您想要的行为。
  • 虽然@JonW 到目前为止可能有最好的答案,但没有标记,这总体上变成了一个可怕的问题。
【解决方案3】:

其中一个应该可以工作:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-10-15
    • 2012-03-07
    • 1970-01-01
    • 1970-01-01
    • 2014-12-12
    • 2011-03-03
    • 1970-01-01
    相关资源
    最近更新 更多