哪个更好:CSS Hack还是浏览器检测?

34
通常在浏览互联网时,我发现人们普遍使用CSS Hack来使他们的网站在所有浏览器中看起来相同。个人认为,找到所有这些Hack并测试它们非常耗费时间;每次更改您都必须在4个以上的浏览器中进行测试,以确保它没有破坏其他内容。
大约一年前,我在互联网上寻找其他主要网站正在使用的技术(雅虎,谷歌,BBC等),并发现它们大多数都在使用某种形式的浏览器检测(JS、HTML if语句、基于服务器)。我也开始使用这种方式。在我最近工作的几乎所有网站上,我都使用jQuery,因此我使用内置的浏览器检测。
您使用这两个技术的原因是什么?
15个回答

30

还有第三种选择:

尽可能减少或消除浏览器检测和CSS hack的需求。

我试图使用像jQuery插件这样的工具来自动处理浏览器差异(例如小部件等)。虽然不能解决所有问题,但可以做很多事情,并且将支持多个浏览器的工作委托给那些付出了更多努力的人,你无法或者不想承担这些努力。

之后我会遵循以下原则:

  • 只使用被广泛支持的功能,称之为最小CSS
  • 必要时使用表格进行复杂布局。你可能不喜欢这样做,但老实说,像并排布局这样的事情,表格可以在十年前的浏览器上工作,而且比使用绝对定位、浮动等组合来使div正常工作要容易得多;
  • 通过添加DOCTYPE将IE6强制进入标准模式,而不是怪异模式。我无法强调这会让你的生活变得更轻松,但奇怪的是,仍有很多人没有这样做;
  • 通过使用正确的DOCTYPE或使用嵌套块元素而不是其他box model hacks,最小化box model问题;
  • 如果必要,在相关浏览器中包含额外的CSS文件。 我倾向于在服务器上而不是客户端上使用生成的页面(毕竟大多数都是这样)。 我参与的许多项目都有IEfix.css文件。

之后,我将浏览器分为几个层次:

第一层:

  • Firefox 3;
  • IE7。

我的网站必须在这些浏览器上正常工作。

第二层:

  • Firefox 2;
  • Safari;
  • Opera;
  • Chrome。

我的网站应该在这些浏览器上运行。这可能会冒犯一些人,但是这些浏览器的市场份额太低了,它们并不像Firefox 3或IE7那样重要。

第三层:

  • IE6;
  • 其他。

除非有公司要求,否则将最小限度地努力使其适用于这些浏览器。IE6是噩梦般的一个,但是截至12月份,其市场份额为20%,并迅速下降。此外,对于阻止甚至禁止使用IE6的网站(例如金融网站)存在有效的安全问题,例如Paypal已经屏蔽了IE6,而Google告诉用户放弃IE6


3
我希望设计师更愿意修改他们的设计,这样我就不需要使用hack或检测了 :) - Darryl Hein
不幸的是,大型企业(例如我公司最重要的客户)往往有“仅限IE6”的政策。此外,使用“最小CSS”就像使用最低公共分母一样,这会因为明显的原因而降低用户体验。我更喜欢使用“回退”机制。 - Tamas Czinege
@Darryl:我相信与你的设计师合作是可能的,这样设计就不需要丑陋的hack,而且看起来仍然很好。我的意思是,这就是我们所做的,这种方法通常对我们有效。 - Tamas Czinege
@cletus,你是否考虑根据当前浏览器市场份额和趋势重新组织你的层次结构?请参见这里:http://en.wikipedia.org/wiki/Usage_share_of_web_browsers。Chrome和Safari的用户数量大幅增加,而Explorer和Firefox的用户数量正在迅速减少。 - applepie
显示剩余4条评论

11

问题在于你只有一次机会处理CSS(因为它基本上是客户端的静态内容)……你不能(轻易地)在客户端实时调整它以适应不兼容情况,所以对于那些棘手的不兼容情况(而且这种情况太多了),检测很遗憾是最好的路线。我认为这种情况很难很快改变。

使用JavaScript,你可以通过像jQuery这样的库来避免大部分痛苦,而不是识别特定的浏览器(大多数情况下),而是检查功能支持。但某些情况下你需要确切知道(例如盒模型)。


6

你是否有使用或不使用这两种方法的原因?

是的。如果禁用JavaScript,则客户端浏览器检测会出现问题,并且可能无法正确地处理未来的浏览器版本。最后一个原因也适用于CSS hack。如果用户明确尝试破坏它,则服务器端浏览器检测会中断,但仍可能是一种可行的选择。

我的建议:

确保您的代码在符合标准的浏览器中正常工作-即在其中一个或两个浏览器中开发,并在之后检查browsershots.org。很可能可以使用一个样式表在所有浏览器中实现所需的结果。

然后,就有IE了。如果只有少数问题,您可以使用CSS hack。否则,请使用条件注释。

编辑:

如果我还必须支持古老的浏览器,我通常会采用优雅降级的方式:我只会让它们显示具有基本样式表(字体大小、颜色等)的纯HTML。所有花哨的东西都将使用@import规则隐藏。


不幸的是,我开发的所有网站都需要在所有浏览器中完全正常工作,因此我通常需要使用许多CSS hack并进行许多小时的调整。 - Darryl Hein
@Darryl:添加了一些关于遗留支持的内容;根据我的经验,一旦完成这项工作,就不需要进行太多微调了... - Christoph
+1 这通常是最现实的方法。您可以使用单个样式表覆盖所有当前浏览器,这样可以走得更远。通常第一代也可以正常工作。真正的最大问题是IE6-。有时您可以在一个样式表中解决它,否则请使用条件注释。 - deceze
1
“我开发的所有网站都需要在所有浏览器中完全正常运行”——这是无稽之谈。你不会在IE 2或Netscape 4中进行测试,因为让网站在它们中像在新版浏览器中一样工作将非常耗时,并且使用它们的人数不足以使额外的努力值得。在某个时候,这也将适用于IE 6。 - Paul D. Waite

4

通常我喜欢为符合标准的浏览器(如Firefox和Safari)制作样式表,然后使用条件注释来检测Internet Explorer并提供一个额外的CSS文件,其中包含IE特定的修复和覆盖。


3
在写HTML和CSS的6年时间里,我从事的工作大部分涉及Internet Explorer,因此遇到了很多CSS问题。
正如其他答案所指出的那样,您可以使用条件注释将附加样式表提供给IE(或者向或元素添加类,如果您不喜欢多个样式表)。与CSS hack不同,条件注释是明确且受支持的。与尝试从用户代理字符串中检测IE不同,它们保证能够正常工作。
至于非IE CSS问题,我从未发现有值得进行浏览器检测的问题。

2
认真考虑以上所有内容,特别是doctype的指针。如果您必须应用CSS hack,针对特定浏览器,请知道hack几乎总是可以避免的。特别是对于干燥的静态页面。
从有限的开发经验来看……我假设您想制作一个闪烁的Web页面,而不需要混乱的Adoobi boughtware:
编写一个在这些浏览器上看起来合理的页面,这些浏览器都可以在一台机器上测试:
Op3ra 9.6,S@fari 3,Chr0me 1,1nternet Xpl0rer 6、7和8,Firefux 1.5
使用@import css规则在古老的浏览器中放弃css,并让它们吃蛋糕。
使用对象检测和浏览器嗅探的组合来查找和消除问题浏览器(所有版本低于上述目标版本)。还要捕捉你知道速度不够快的古老浏览器(你可以测试并将其与已知值进行比较的css属性),以防它们通过sniffer,还要使用条件注释来踢出1E5,给它提供一些反CSS来平息它,在ie6中保持它在jQu3ry中(如果可能的话)。
使用动态元素将jQu3ry库加载到允许的浏览器中(任何一个没有失败的仔细测试的浏览器)。即我们甚至不在我们知道它不会工作的时候导入库/让其他人进来。
使用jQu3ry来解决您支持的浏览器中的任何问题,其中大部分问题只有在页面变得动态时才会显现。使用jQu3ry来增强布局并添加接口等…
通过媒体语句扩展此功能,您可以测试针对这些设备的唯一css值,现在您将拥有更多的知识用于调整布局(即破坏那些列并缩小那些图像)。关闭动画等。
始终使用文本标签并使用一些定位技巧使它们消失,如果必须使用Mr. flashy menu guy…只是不要仅依赖于图像或JavaScript来浏览您的网站。
很容易阻止Netsc@pe 4以下的任何内容。给他们基本的Web,就像最初设计的那样。即不要为他们指定背景、颜色、字体或任何东西。浏览器的默认设置应该很好地工作。信息将是可访问的。
事实上,我认为所有“可访问”的浏览器都应该将自己标识为N$4,这样我们就可以轻松地将它们从动态演示中清除,避免损害残疾人。
遗憾的是,她是一艘好船,但即使是吓唬M$的好船也必须死亡。不要担心,因为我们现在有一个更好的 ;)

仅代表个人意见,请谨慎申请。


2

嗯,对于浏览器来说,黑客更快,但如果你正确地构建它,浏览器检测可以在CSS中提供更好的可读性。 如果您可以进行浏览器检测,并同时可以在浏览器之间共享CSS,并且仅在单独的文件或其他位置具有不同的CSS,则我将使用浏览器检测-因为这是新手可以理解的内容,而如果您不了解它们,则很难理解CSS黑客。


2

我更喜欢使用浏览器检测,并将与浏览器无关的CSS放入自己的文件中。

然而,最好的解决方案是找到默认情况下跨兼容的CSS,并直接使用它。


2

我尽量不使用它们。在很多情况下,IE存在的问题可以通过简化标记结构来避免。

如果您使用像Eric Meyer这样的合适的CSS重置,则会更加有帮助。

作为一种原则,我也正在逐渐放弃对IE6的支持,特别是考虑到IE6和IE7的最新安全问题 - 如果我们继续支持糟糕的浏览器,我们将无法改变人们的浏览习惯和浏览器偏好。


2

检测浏览器的服务器端有什么问题吗?似乎非常有效和无懈可击(除了用户更改其用户代理字符串)。您可以使用PHP选择页面的样式表,或为每个请求动态生成样式表 - 不确定其他语言是否允许您直接输出到文件并手动设置标头,但我想它们不可能不允许您识别用户代理,因此这些选项中的一个对于任何服务器端环境可能是可行的。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接