此问题由 Marcin Lachowski 提出。
过去,曾经有一个使用井号 (#) 的 Safari hack。Safari 不喜欢这个符号,因此您可以声明如下内容
p { color: red; }
p { color: black;# }
其他所有浏览器都会读取第二行以替换第一行,文本将显示为黑色。Safari 不喜欢井号,并将保留第一个声明,文本将显示为红色。这是使用 hack 弊端的一个完美示例,因为它不再起作用了(Safari 3 及更高版本)。
现在,出现了一个针对较新版 Safari 以及 Opera 8/9 的新 hack。
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari-Opera specific declarations here */
}
最初发布在 此处。
所以答案是?是的,存在针对 Safari 和 Opera 的浏览器特定 hack。但您确实需要问问自己:您是否应该使用此类 hack?我的通用建议是否。此类 hack 不仅会在将来给您带来麻烦,而且您正在寻找此类 hack 的事实可能预示着您在处理设计时存在一些更深层次的问题。这并不是说不存在可能的情况下,此类 hack 是您唯一的出路,但在执行此操作之前,仔细检查一下您当前的方法,看看是否有其他方法可以解决它,而无需使用 hack。
这是一个提及其他一些事项的好机会。
- Internet Explorer 有许多“CSS hack”。它们永远都不必要。它们与其他 hack 一样容易受到未来破坏的影响,并且所有 Internet Explorer 浏览器都提供了一种完全有效且面向未来的方法来处理向其发送浏览器特定的 CSS。它们被称为“条件样式表”,请参阅 如何创建仅限 IE 的样式表。在某些日子里,您会希望 Opera 和 Safari 也具有这些功能,但现实情况是这些功能对“Web 标准”存在问题。理想情况下,我们不希望向不同的浏览器提供不同的文件。这是一条漫长而曲折的道路。
- Web 上有多种方法可以进行浏览器检测。其中大多数都与读取浏览器“用户代理”字符串有关。这存在很多问题,有关很好的入门介绍,请阅读有关用户代理字符串的简要 历史。首先,它是可伪造的。其次,它通常使用 JavaScript 等技术,而您无法确定这些技术是否在每个用户的机器上都已启用。这些技术可用于向非常特定的浏览器提供样式表,但显然这可能存在问题。如果您要执行此操作,最好使用服务器端技术(如 PHP)而不是客户端技术(如 JavaScript)。如果这吸引了您,请查看 Conditional CSS。
- 在某些情况下,提供浏览器特定的文件是可以的,那就是当您在一个受控的环境中工作时,您完全了解所有详细信息。例如,iPhone。您完全知道它将提供什么用户代理字符串,您完全知道屏幕尺寸,您完全知道 JavaScript 功能。因此,虽然创建特定于 iPhone 的页面可能是一个好主意,并且您可以确信您的 JavaScript 浏览器嗅探将起作用,但仍然需要考虑一些因素。iPhone 不希望仅仅因为它是一款 iPhone 就提供不同的页面,这就像浏览器种族主义。它希望获得与其他所有人相同的 Web。如果您想为它创建特定页面,它应该是一种选项,而不是要求。
看起来您的 hack 针对的是 Webkit 渲染引擎。 Chrome 也使用 Webkit,所以如果我没有弄错的话,此 hack 不是特定于 Safari 的,实际上也适用于 Chrome。
很高兴知道这一点。我从未做过或需要 Safari hack。只是针对 ie6(有时是 ie7)的一些小事,例如 png 修复等
这在 Opera 中不起作用。您在发布之前是否会测试内容?为什么要费心呢?
@Dean Edwards
这是 测试页面 和 屏幕截图。
您在发表评论之前是否会测试内容?为什么要费心呢?
一周内不要再发表粗鲁的评论了。
尊敬的先生,
我需要一个仅支持 Windows 版 Chrome 和 Safari,而不支持 Mac 版 Chrome 和 Safari 的 css hack。
我使用了以下 hack,但它也捕获了 Mac 版 Chrome 和 Safari。
@media screen and (-webkit-min-device-pixel-ratio:0) {
}
如果有什么解决方案,请告诉我。
谢谢,
Himanshu
这在 Opera 中不起作用,而且也不可能起作用。
@media screen and (-webkit-min-device-pixel-ratio:0)
这也会影响所有基于 webkit 的浏览器,无论版本如何,这可能会产生非常糟糕的副作用。
对我有用。
我在 Safari 和 Chrome(这两个基于 web-kit 的浏览器)中都看到了红色文本。
我在 Opera 9.5 中看到黑色文本,在 Safari WinXP 中看到红色文本。
Opera 是否在 Windows 中以不同的方式呈现它?
@Yves Van Goethem:它不应该在 Opera 中“起作用”。您只应该在 Opera 中看到黑色文本,因此从本质上讲,它确实“起作用”。我想不出使用它有任何“不良副作用”。您指的是哪些?
@Gavin Tronset:Opera 在 Windows 中不会以不同的方式呈现它。仍然是黑色文本。它只影响基于 web-kit 的浏览器。
我不明白这篇文章有什么令人困惑的地方。CSS 属性针对的是 web-kit 渲染引擎,因此任何使用 web-kit 的浏览器(目前为 Chrome 和 Safari)都将受到影响。它不应该对任何其他浏览器产生影响。
女士们,先生们,
所有评论以及这篇文章都是 Chris 已经多次告诉我们的内容的完美示例。以防万一有人错过了,请允许我重申一下
清清嗓子以增强戏剧效果
HACK 很糟糕。
除了渐进增强等指南外,我们还有这个很棒的小技巧,虽然有时让人沮丧,但从长远来看确实是最棒的。它形式良好,更容易维护,并且代码更简洁,更容易理解 99.5% 的时间。好消息:如果您在编码前进行思考并提前计划(我非常不擅长这一点……),您也可以完全避免 99.5% 的时间。
好吧,hack 很糟糕。不过,有时它们是必要的。我们公司的网站在 IE 6 中表现得很奇怪——整个页脚消失了!我不得不使用 Holly Hack 来确保所有主要 div(包括页脚)都将 HasLayout 设置为 true。
真的,我想不出在这种情况下我还有什么方法可以避免使用 hack。当然,这可能反映了我缺乏专业知识。有什么替代建议吗?
我再次发言。我刚刚注册。
我只是想说,Chris,您的网站很棒。它看起来和使用起来都很有趣,并且充满了非常有价值的实用信息。我可以看出您倾注了很多心血。谢谢!
尽管“hack 很糟糕”,但我最近花了一些时间记录了我认为用于针对各种浏览器的“最佳” hack(http://pantsland.com/2008/10/05/documenting-the-hacks-css-browser-targeting/)。我认为有时它们很有用,但反对它们的最大的论点是即将发布的浏览器版本的不可预测性。
实际上,我不介意使用“* html”和下划线之类的 hack 来定位某些版本的 IE。条件注释很好,但它们有一些缺点。
它们为用户添加了额外的 HTTP 请求,而 IE 仍然拥有最大的市场份额,因此您为许多用户添加了额外的 HTTP 请求。在页面加载的此状态下,请求很重要,因为它们会阻止页面的渲染。
此外,它还可以将你的 hack 隐藏在主要的 CSS 之外。这听起来可能没什么大不了的,但我见过一些人为此抓狂,因为他们将 `#nav { width: 300px; }` 改为 `#nav { width: 400px; }`,却不明白为什么不起作用。结果发现,有一个条件注释的 CSS 文件覆盖了它。而 `#nav { width: 300px; _width: 302px; }`(并添加一些注释来解释正在发生的事情)则更容易维护。
Jake。
“是否有任何专门针对 Safari 或 Opera 的 CSS hack?”
John – 在我上面链接的文章中,我展示了一种解决方法来创建特定于 Opera 的样式
我不会使用任何这些 hack。Opera 更新的频率令人惊叹 - 你永远不知道你的 hack 是否仍然有效。Webkit 几乎也是如此。如果你从一开始就正确编码,并且不想构建一个“颠倒的爱菲尔铁塔”,那么你根本不需要为这些浏览器使用任何 hack。
哦 - 一个好话题 - 其他主要浏览器(如 Safari、Opera 等)的基于条件注释的样式表怎么样?这将非常方便。
Brad,
无论文章内容是什么,标题在语法上都不通顺。
哇,那真是一个语法错误,我在这方面很糟糕。即使在你提到“ARE”之后,我也没有注意到。我认为现在太晚了,因为永久链接已经存在了。
John - 不要介意我,看来我没有注意。
Chris - 在 WP 中,你可以更改文章标题而不更改永久链接,这对你来说可能更好。
我似乎无法定位 Opera,尽管 `@media…` hack 对 Safari 有效。
正如你提到的,对 Opera 和 Safari 使用 hack 就如同在心脏没有问题的情况下服用心脏药物。
当你退而求其次,对其中一个浏览器使用 hack 时,问题肯定(99.999532%?!)在于你的 (X)HTML/CSS 标记。
Sam:即使考虑为所有现有的浏览器都使用 CC 也是完全没有意义的,并且暴露了对网站创建方式的了解不足:独立于任何浏览器或设备。即使 IE 的 CC 确实非常方便,因为所有 bug 修复都是针对这些浏览器完成的,它们仍然是专有的胡说八道。
尽管如此:**Hack 是不好的!**几乎所有 hack 都会使你的样式表无效。这是一次美好的“寻宝”之旅,但现在结束了。
一个迟到的评论。考虑一下 **table** 元素。在最新版本的 Opera 和 Safari 中,cellspace 和 cellpadding 解析不佳或根本无法解析。100% 纯净的 CSS 代码并没有使它们做出反应。那么,当没有任何合法的方法起作用时,该怎么办呢?你想将这些浏览器包含在你的测试过程中,因为它们加起来的用户量占 4%,因此非常有价值。当浏览器不按照规则运行时,开发人员别无选择。因此,一个 hack 使你的网站在这些有问题的浏览器中工作,并使你的样式表无效。这会使 bot 拒绝你的网站,但用户会很高兴!要务实并承担风险。浏览器就像政客,你不能相信他们!
Chris,感谢你的 hack!
Hack 并不都是坏的。IE6 不会改变(永远),但它还会存在很长时间。下划线 hack 在我看来是完全可以接受的。使用额外的 CC 样式表并非总是可行的。我们每天要提供数百万个页面,每个 http 请求都会造成损耗。“Hack 是不好的”是一种教条,虽然用意良好,但仍然是清教徒式的教条。当然,在使用 hack 之前,你需要精通 CSS,并且它们永远不应该成为糟糕设计的拐杖。
这在 Opera 中不起作用。