alternative CSS sheets for IE?
I have a question ab开发者_如何学JAVAout CSS coding practices. IE often requires hacks or workarounds to get things looking right, and there are two different ways of doing things:
- Put everything in one big CSS file
- Create two CSS files and have it load depending on the browser that the user is using
I'm thinking the second one makes more sense, but is there any reason not to do this? Which is more common?
The only argument against two CSS files would be that on first open of your page it'll generate one extra HTTP request.
However, once the browser cache is populated with the local copy of these files, this concern is removed.
On the other hand, having IE styles separately means users on other browsers won't load them. Also, there's clear separation between the main styles, and the hacks, which means that with the adoption of IE9 you will be in a position to deprecate the hacks CSS easily down the road by just removing that file, instead of modifying the main CSS file.
My Preference as a standard for all projects is to use one CSS file so it is easier to manage and modify later (also only one HTTP request). Then use conditionals to change the body class.
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
Not sure how common this is but it is also used in HTML5Boilerplate
I think there are no reason to not do second one. Expression like <!--[if IE]> is worth to make sure that proper css is loaded and save bandwidth when non-ie browser is used.
The only argument that can be made for a single stylesheet is the reduction of one HTTP request. Given that on average, 60% of web traffic will be made out of IE users, that's not an insignificant impact.
However, hacks like the Holly Hack are just plain ugly and are not guaranteed to work, and that since stylesheets are cached, the impact should not be as significant as it would be. Conditional comments are an acceptable practice and should be used to work around IE problems. There's no reason to load two entirely separate stylesheets just for standard compliant and non-standard complaint browsers - overriding the few problematic properties should be enough.
Alternatively, a Javascript solution, such as IE7.js, can also be used for the same effect.
I use either, it just depends on how much of a change is required to make the page look right in IE.
If it's a small change like the element needs to be 500px in IE rather than 480px than I'll use a workaround in my stylesheet.
But if there are numerous changes I go with the conditional comments to load a separate stylesheet if it's IE - but with this I don't have two copies of the same stylesheet, one coded for other browsers and one coded for IE, I have it ALWAYS load my main stylesheet, then have the IE stylesheet load if needed and alter only the elements it needs to (So no necessary duplicates in the stylesheet as to cut down on filesize)
Basically, how I do it is:
A couple of elements need changing: stick with workarounds
A lot of elements need changing: use conditional comments
You may be able to get things working right without browser "hacks".
Wherever possible, avoid using browser-specific CSS. For older versions of IE, I prefer to use conditional comments <--[if IE...]> ... <[endif]-->.
I know they create another request to the server, but my opinion is that anyone who is foolish enough to be using an outdated version of ie (6 or less) isn't deserving of the couple milliseconds it would take to download the other stylesheet. This also allows me to centralize the fixes.
Use standards-compliant code first, then fix any issues for non-compliant browsers, but only when absolutely necessary.
Put in the IE CSS file, just what you need to fix layouts on IE, not a completely new (and maybe duplicate) stylesheet.
I also recommend this for importing javascript, like a quick script to make HTML5 elements work (this one I saw on Remy Sharp's sample on whatwg if I'm not wrong).
加载中,请稍侯......
精彩评论