What are pros and cons
if i make 4 different css?
- main.css
- IE7.css ( in conditional comments)
- IE8.css ( in conditional comments)
- IE6.css ( in conditional comments)
OR
1 css file for all
- main.css + including hack for IE6 + IE 7 + IE8(if needed)
views:
327answers:
3
+1
A:
The con against having different style sheets is that you'll have one more HTTP request. I find that totally negligeable against the pros, though:
Cleaner code structure
No hacks = no reliance on broken / undocumented behaviour
Much easier to maintain for people joining the project later
New versions can be added easily (though hopefully, that won't be necessary for IE9 any more)
Pekka
2010-02-26 11:38:52
Also those IE users are totally asking for an extra HTTP request by their choice of browser- they clearly have resources to waste :)
glenatron
2010-02-26 11:42:52
+1
A:
Pros:
- Performance: Saves resources for non-IE browsers.
- Validation: You can validate your CSS, and non-IE browsers does'nt have to handle non-valid CSS.
- Cross-browser: supports IE 5.5 to IE 8 and probably newer versions.
- Support: It's officially supported by Microsoft, contrary to CSS hacks.
Cons:
- Maintenance: You have to maintain more files.
- Performance: IE will have to make more HTTP requests.
- KISS: Sometimes it may be overkill, for one or two rules.
In general, I think conditional comments are better than CSS hacks.
Sagi
2010-02-26 11:39:37
you mean other browser will not dowload css of conditional comments
metal-gear-solid
2010-02-26 11:43:10
+1
A:
It's entirely dependent on how much content you have in each file and how you want to group them. The separation of files is for your convenience as a maintainer, not a technical issue.
* html (to hide from IE6) is the only CSS hack you're likely to want to use today. If you need more flexibility than that, then yes you'll want conditional comments, but no that doesn't mean you have to have separate stylesheets if you don't want to. And if you've only got a couple of hacks, you probably don't want to.
eg. in the markup you can add IE-specific classes
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body class="ok"><!--<![endif]-->
Now you can target IE without hacks:
body.ie6 .foo { ... }
body.ie7 .foo { ... }
bobince
2010-02-26 11:40:51