CSS hack 和浏览器检测哪个更好?
通常,当我浏览互联网时,我发现人们通常使用 CSS hacks 来使他们的网站在所有浏览器中看起来都相同。 就我个人而言,我发现找到所有这些黑客并测试它们是相当耗时的; 您所做的每项更改都必须在 4 个以上的浏览器中进行测试,以确保它不会破坏其他任何内容。
大约一年前,我在互联网上查找其他主要网站正在使用的内容(雅虎、谷歌、BBC 等),发现大多数网站都在进行某种形式的浏览器检测(JS、HTML if 语句、基于服务器)。 我也开始这样做了。 在我最近工作过的几乎所有网站上,我都使用 jQuery,因此我使用内置的浏览器检测。
您使用或不使用其中任何一个有什么原因吗?
Commonly when I look around the Internet, I find that people are generally using CSS hacks to make their website look the same in all browsers. Personally, I have found this to be quite time consuming to find all of these hacks and test them; each change you make you have to test in 4+ browsers to make sure it didn't break anything else.
About a year ago, I looked around the Internet for what other major sites are using (Yahoo, Google, BBC, etc) and found that most of them are doing some form of browser detection (JS, HTML if statements, server based). I have started doing this as well. On almost all of the sites I have worked on recently, I use jQuery, so I use the built in browser detection.
Is there a reason you use or don't use either of these?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(15)
还有第三个选项:
最小化或消除对浏览器检测和 CSS hack 的需要。
我尝试使用 jQuery 插件之类的东西来为您处理任何浏览器差异(对于小部件等) )。 这并不能解决所有问题,但它可以做很多事情,并将支持多个浏览器的工作委托给已经花费并且将花费比您负担得起或想要的更多精力的人。
之后,我遵循以下原则:
之后,我将浏览器分为几层:
第 1 层:
我的网站必须能够处理这些问题。
第 2 级:
我的网站应该能够处理这些问题。 这可能会冒犯一些人,但坦率地说,这些浏览器的市场份额如此之低,以至于它们根本不如 Firefox 3 或 IE7 那么重要。
第三级:
除非是公司要求,否则我们将尽力解决这些问题。 IE6 是一场噩梦,但截至 12 月,它的市场份额为 20%,并且正在迅速下降。 另外,存在有效的安全问题(例如在金融网站上),阻止甚至禁止使用 IE6,例如 Paypal 已屏蔽 IE6 和 Google 告诉用户放弃 IE6。
There is a third option:
Minimize or eliminate the need for browser detection and CSS hacks.
I try to use things like jQuery plug-ins that take care of any browser differences for you (for widgets and the like). This doesn't take care of everything but it does a lot and has delegated the effort of supporting multiple browsers to someone who has spent and will spend far more effort on it than you can afford to or want to.
After that I follow these princples:
After that, I divide browsers into tiers:
Tier 1:
My website must work on these.
Tier 2:
My website should work on these. This may offend some people but frankly the market share of these browsers is so low that they're simply not as important as Firefox 3 or IE7.
Tier 3:
Minimal effort will be made to work on these unless it is, for example, a company requirement. IE6 is the nightmare one but it's market share as of December was 20% and rapidly falling. Plus there are valid security concerns (on financial websites for example) for dissuading or even disallowing the use of IE6 such that sites like Paypal have blocked IE6 and Google tells users to drop IE6.
问题是你只能真正获得 css 的一次机会(因为它在客户端几乎是静态内容)......你不能(轻松地)调整它以适应客户端的运行 - 所以对于那些棘手的人不兼容的情况(而且有太多),遗憾的是检测是最好的途径。 我认为这种情况不会很快改变。
使用 javascript,您通常可以通过像(如您所述)jQuery 之类的库来避免大部分这种痛苦 - 并检查功能支持,而不是识别特定的浏览器(大多数时候)。 有些情况您需要准确了解(例如盒模型)。
The problem is that you only really get one shot at the css (since it is pretty much static content at the client)... you can't (easily) adapt it to suit on the fly at the client - so for those tricky incompatible cases (and there's too many of them), detection is sadly the best route. I can't see this changing very soon.
With javascript, you can often avoid much of this pain through libraries like (as you state) jQuery - and checking for functionality support rather than identifying the specific browser (most of the time). There are some cases you need to know exactly (the box model, for example).
是的。 如果 JavaScript 被停用,客户端浏览器检测就会中断,并且可能无法在未来的浏览器版本中正常工作。 最后一个原因对于 CSS hack 来说也是如此。 如果用户明确尝试破坏服务器端浏览器检测,服务器端浏览器检测就会中断,但它仍然可能是一个可行的替代方案。
我的建议是:
确保您的代码可以在符合标准的浏览器中运行 - 即在其中一两个浏览器中进行开发并检查 browsershots .org 之后。 最有可能的是,可以使用一个样式表在所有这些样式中实现所需的结果。
然后,还有IE。 如果只有几个问题,您可以使用 CSS hack。 否则,请使用条件注释。
编辑:
如果我也必须支持古老的浏览器,我通常会采取优雅降级的方式:我会让它们用基本样式表(字体大小、颜色等)显示纯 html。 .)。 所有花哨的东西都将通过
@import
规则隐藏。Yes. Client-side browser-detection breaks if JavaScript is deactivated and might not work correctly with future browser versions. The last reason is also true for CSS hacks. Server-side browser detection breaks if the user explicitly tries to break it, but it still might be a viable alternative.
What I would recommend:
Make sure that you're code works in the standars compliant browsers - ie develop in one or two of those and check browsershots.org afterwards. Most likely it will be possible to implement the desired outcome in all of them with one stylesheet.
Then, there's IE. If there are only a few issues, you could go with a CSS hack. Otherwise, use conditional comments.
Edit:
If I have to support ancient browser's as well, I generally go the way of graceful degradation: I'll just let them show the pure html with a basic stylesheet (font sizes, colors, ...). All the fancy stuff will be hidden with an
@import
rule.我通常喜欢为 Firefox 和 Safari 等符合标准的浏览器提供样式表,然后使用 条件注释用于检测 Internet Explorer 并为其提供包含特定于 IE 的修复和覆盖的附加 CSS 文件。
I generally like to have a stylesheet for standards-compliant browsers such as Firefox and Safari and then use conditional comments to detect Internet Explorer and serve it an additional CSS file containing IE-specific fixes and overrides.
在以编写 HTML 和 CSS 为生的 6 年里,我的绝大多数 CSS 问题都来自 Internet Explorer。
正如其他答案中指出的,您可以使用 条件注释 为 IE 提供额外的样式表(或者将类添加到
或
`` 元素,如果您不喜欢多个样式表) 。 与 CSS hack 不同,条件注释是明确且受支持的。 与尝试从用户代理字符串检测 IE 不同,它们保证可以工作。
至于非 IE CSS 问题,我从未找到值得浏览器检测的问题。
In 6 years of writing HTML and CSS for a living, the vast majority of my CSS issues have come from Internet Explorer.
As pointed out in other answers, you can use conditional comments to serve additional stylesheets to IE (or to add a class to the
<body>
or<html>`` element, if you don’t like multiple stylesheets). Unlike CSS hacks, conditional comments are explicit and supported. Unlike trying to detect IE from the
user-agent string`, they’re guaranteed to work.As for non-IE CSS issues, I’ve never found one that was worth browser detection.
对于浏览器来说,黑客攻击速度更快,但如果结构正确,浏览器检测可以提高 CSS 的可读性。
如果你可以进行浏览器检测,同时可以在浏览器之间共享 CSS,并且只有不同的 css 位于单独的文件或其他文件中,那么我会使用浏览器检测 - 因为这是新手可以理解的 CSS hacks如果你不了解它们就很难理解
Well hacks are quicker for the browser, but browser detection gives better readablity in your CSS if you structure it right.
If you can make browser detection and at the same time can share the CSS between the browsers, and only have the different css in seperate files or whatever, then I would use browser detection - as this is something a newbie can understand, where CSS hacks is hard to understand if you don't know them
我更喜欢使用浏览器检测并将独立于浏览器的 CSS 放入自己的文件中。
然而,最好的解决方案是找到默认情况下交叉兼容的 CSS 并使用它。
I prefer to use browser detection and put the browser-independent CSS into its own file.
The best solution, however, is to find CSS that is cross-compatible by default and just use that.
我尽量不使用任何一个。 在很多情况下,可以通过稍微简化标记的结构来避免 IE 所存在的问题。
如果您使用像 Eric Meyer 的。
原则上我也会慢慢但肯定地放弃对 IE6 的支持,特别是考虑到 IE6 和 IE7 的最新安全问题 - 如果我们继续支持蹩脚的浏览器,我们就不会改变人们的浏览习惯和浏览器偏好。
I try not to use either. In a lot of cases the issues that IE have can be avoided by simplifying the structure of your markup somewhat.
It also helps if you use a decent CSS reset like Eric Meyer's.
I am also slowly but surely dropping support for IE6 as a matter of principle, especially given the latest security issues with IE6 and IE7 - we're not going to change people's browsing habits and browser preferences if we keep supporting crappy browsers.
仔细考虑上面的所有内容,尤其是有关 doctype 的指针。 如果您必须应用 CSS hack,那么对于特定的浏览器来说,hack 几乎总是可以避免的。 特别是对于干燥的静态页面。
从开发这些东西的有限经验来看...我假设您想要制作一个流畅的网页,该网页无需混乱的 Adoobi 购买软件即可闪烁:
<强>Op3ra 9.6、S@fari 3、Chr0me 1、1nternet Xpl0rer 6、7 和 8、Firefux 1.5
使用@import css规则抛弃古代浏览器中的css,让他们吃蛋糕。
结合使用对象检测和浏览器嗅探来查找并消除有问题的浏览器(低于上述目标的所有版本)。 还要捕获您知道的速度不快的古老浏览器(您可以测试 CSS 属性并与已知值进行比较),以防它们通过嗅探器,还可以使用条件注释来踢出 1E5,为其提供一些反 CSS让其平静下来,与 ie6 类似,只是尽可能将其保留在 jQu3ry 中。
使用动态元素将 jQu3ry 库加载到允许的浏览器中(任何未通过仔细测试的浏览器)。 也就是说,当我们知道它不会工作时,我们甚至不导入该库/我们让其他人进入。
使用 jQu3ry 来解决您支持的浏览器中的任何问题,其中大多数问题只有在您的页面时才会暴露出来变得动态。 使用 jQu3ry 增强布局并添加界面等...
使用媒体声明对此进行扩展,您可以测试这些设备特有的 css 值,现在您将有更多的知识可用于调整布局(即销毁这些列并缩小这些图像)。 关闭动画等。
始终使用文本标签和一些定位技巧来保持其可访问性,如果您必须的话,让它们消失,华而不实的菜单家伙……只是不要仅依靠图像或 JavaScript 来浏览您的网站。
阻止 Netsc@pe 4 以下的任何内容都很容易。只为他们提供基本的 Web,就像最初的方式一样。 即,甚至不为它们指定背景或颜色、字体或任何内容。 浏览器的默认设置应该可以正常工作。 这些信息将是可访问的。
事实上,我建议所有“可访问”的浏览器将自己的 ID 标识为 N$4,这样我们就可以轻松地将它们从动态演示中剔除,并防止我们欺骗残疾人。
唉,她是一艘好船,但即使是一艘吓唬 M$ 的好船也必须死。 不要担心,因为我们现在有一个更好的;)
只有我的 2 美分,请谨慎申请。
Carefully consider everything above, especially pointers about doctype. If you must apply a CSS hack, for a specific browser know that hacks are almost always avoidable. Especially for a dry static page.
Speaking from limited experience developing these things... I am assuming you want to make a slick Web page that flashes without the messy Adoobi boughtware:
Op3ra 9.6, S@fari 3, Chr0me 1, 1nternet Xpl0rer 6, 7 & 8, Firefux 1.5
Use the @import css rule to ditch the css in ancient browsers and let them eat cake.
Use a combination of object detection and browser sniffing to find and eliminate problem browsers (all versions below the targetted above). Also catch the ancient browsers you know aren't up to speed (css property you can test and compare to known value) just in case they make it past the sniffer, also use conditional comments to kick out 1E5 feeding it some anti-css to calm it down on its way, similar for ie6 except keep it in the jQu3ry if at all possible.
Use a dynamic element to load the jQu3ry libray into the allowed browsers (any which has not failed your careful tests). I.e. we don't even import the library when we know it is not going to work / we let everyone else in.
Use jQu3ry to address any problems in your supported browsers, most of which will only come to light when your pages become dynamic. Use jQu3ry to enhance the layout and add in your interface etc...
Expand on this with media statements and you could test for a css value unique to those devices, now you will have more knowledge to use in adjusting the layout (i.e. destroy those columns and shrink those images). Turn off animations and so on.
Keep it accessible by always using text labels and some positioning tricks to make them disappear if you must Mr. flashy menu guy... just don't rely on images or Javascript alone to browse your sites.
Its easy enough to block anything below Netsc@pe 4. Giving them just the basic Web, the way it was meant to be originally. I.e. don't even specify a background or color, or font or anything for them. The browser's defaults should work fine. The information will be accessible.
In fact, I move that all "accessible" browsers ID themselves as N$4 so we can easily nuke them out of the dynamic presentation and keep ourselves from screwing over the handicapped.
Alas she was a good ship but even a good ship for scaring the ever-lying out of M$ must die. Do not fear for we have an even better one now ;)
Just my 2 cents, apply with caution.
检测浏览器服务器端有什么问题? 看起来非常有效且万无一失(除了用户更改其用户代理字符串)。 您可以使用 PHP 为页面选择样式表或为每个请求动态生成它 - 不确定其他语言是否允许您直接输出到文件并允许您手动设置标题,但我无法想象它们不允许您识别用户代理,因此这些选项之一可能适用于任何服务器端环境。
Whats wrong with detecting the browser server side? Seems very effective and foolproof (save for the user altering their user-agent string). You can use PHP to either choose the stylesheet for a page or dynamically generate it for each request - not sure if other languages let you output directly to the file and let you set the headers manually, but I can't imagine them not letting you identify the user-agent, so one of these options is probably viable for any server-side environment.
黑客总是会增加您的工作量,并且应该
首先优化工作量,您添加黑客,然后开始担心它们在不同浏览器和不同机器上的表现。
相反,您可以依赖供应商特定的 css 扩展
http://reference.sitepoint.com/css/vendorspecific
hacks will always add to your work efforts and work efforts should be optimized
first you add the hacks and then start worrying about how they behave on different browsers and different machine.
instead you can rely on vendor specific css extensions
http://reference.sitepoint.com/css/vendorspecific
[我的方法][1]使用PHP类来检测操作系统、浏览器和浏览器版本。
[1]:我使用 PHP 类来检测操作系统、浏览器和浏览器版本的方法 http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/
[My approach][1] using a PHP class to detect os, browser and browser version.
[1]: My approach using a PHP class to detect os, browser and browser version http://reinholdweber.com/css/css-hacks-browser-version-detection-a-new-approach/
您不必在每个浏览器上测试“正确的”CSS hack。
这个想法是,您编写符合标准的代码,然后添加特定的黑客攻击来针对一个且唯一一个出错的浏览器(或渲染引擎)。 例如,编写“* html #myelement”仅针对 IE6 的异常:其他浏览器不会受到该黑客攻击的影响,因此无需对其进行详尽的测试。 只有当某个新的不起眼的浏览器出现并犯了与 IE6 完全相同的错误时,它才会出错,这是极不可能的,不是你的错,而且你可以期望很快得到修复。
有些东西自称为 CSS hack,但使用了无效的构造,例如“_propertyname”hack。 这可能会在不同的浏览器中出现问题,因为当您使用无效代码时,每个浏览器可能会以不同的方式解释它。 不要使用这些。
说实话,无论如何,这已经不再是以前的问题了,主要是因为 IE5 已经死了。 如果您使用标准模式文档类型并写入标准,则它主要适用于当前的浏览器。 唯一真正存在问题的情况是 IE6,您可以使用“* html”来定位它; 您不太可能需要更多的 CSS hack 方式。 值得庆幸的是,盒子模型黑客的时代已经结束了。
You shouldn't have to test 'proper' CSS hacks on every browser.
The idea is that you write standards-compliant code, and then add specific hacks to target one and only one browser (or rendering engine) that makes a mistake. For example, writing "* html #myelement" to target an exception for IE6 only: no other browser will ever be affected by that hack so there's no need to test it exhaustively. It could only go wrong if some new obscure browser came along and made exactly the same mistake as IE6, which is extremely unlikely, not your fault, and something you could expect to get fixed quickly.
There are some things that call themselves CSS hacks but which use invalid constructs, such as the "_propertyname" hack. This can break across browsers because when you use invalid code every browser might interpret it differently. Don't use these.
To be honest, it is in any case not the issue it once was, primarily because IE5 is dead. If you use a Standards Mode doctype and write to the standards, it will mostly work in the current round of browsers. The only real remaining problem case is IE6, which you can target with "* html"; it is unlikely you will need much more in the way of CSS hacks than that. The days of the Box Model Hack are, thankfully, over.
听听你的代码! 肯特·贝克这样说。 咏春拳里说:要像水一样弯曲! 或者其他的东西。
看,这是一个让 IE5 理解 html5 的 CSS Hack: http://blog.whatwg.org /styling-ie-noscript。
使用 JS 也是如此: http://blog.whatwg.org/supporting -ie 中的新元素。
将 5 页的 hack 解释与 5 行易于理解的代码进行比较。 所以,使用JS。
事物有其优点和缺点。 你对问题的理解和实际代码的优雅会引领你的道路。
Listen to your code! Kent Beck says it. And in Wing-Tsun they say: be like the water that bends! Or something.
Look, here's a CSS Hack to get IE5 to understand html5: http://blog.whatwg.org/styling-ie-noscript.
And here's the same using JS: http://blog.whatwg.org/supporting-new-elements-in-ie.
Compare 5 pages of hack explanation with 5 lines of well-understandable code. So, use JS.
Things have their benefits and their downsides. And your understanding of the matter and the elegance of the actual code lead the way.
CSS hacks 不是一条出路,因为浏览器一直在更新,新的更新可能会破坏你的 hacks,而使用 Javascript 浏览器检测,你可以准确地确认浏览器的功能。 然而,另一种选择是使用最少的 CSS 以确保在所有情况下一切正常。 JQuery 和其他用于 UI 的 javascript 库具有针对浏览器功能的内置检测,因此您应该检查它们。
CSS hacks are not the way to go because browsers are updated all the time, and new updates may break your hacks, while with Javascript browser detection, you can accurately confirm the capabilities of the browser. However, another option is to use minimal CSS as to make sure that everything is working in all situations. JQuery and other javascript libraries that are for the UI have built-in detection as to the capabilities of browsers, so you should check those out.