What is better: CSS hacks or browser detection?
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
-
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 theuser-agent string`, they’re guaranteed to work.As for non-IE CSS issues, I’ve never found one that was worth browser detection.
讨论(0) -
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).
讨论(0) -
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.
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.
讨论(0) -
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
讨论(0) -
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.
讨论(0) -
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
讨论(0)
加载中...
- 热议问题