Safari 或 Opera 有专用的 CSS hack 吗?

Avatar of Chris Coyier
Chris Coyier 发布

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

此问题由 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。如果您想为它创建特定页面,它应该是一种选项,而不是要求