A Single Article

Read it, comment, and share it with your friends

Why I avoid using conditional comments

Posted February 2 in Design.

I’m not making this post as an argument against conditional comments, but this is my personal reason for avoiding them. To be honest, I’m afraid of the possibility that someday, the <head> section will be filled with this:

<link rel="stylesheet" href="base-style.css" type="text/css" />

<!--[if IE]>
<link rel="stylesheet" href="ie-style.css" type="text/css" />
<[end if]-->

<!--[if FF]>
<link rel="stylesheet" href="ff-style.css" type="text/css" />
<[end if]-->

<!--[if Opera]>
<link rel="stylesheet" href="opera-style.css" type="text/css" />
<[end if]-->

<!--[if Safari]>
<link rel="stylesheet" href="safari-style.css" type="text/css" />
<[end if]-->

<!--[if Konquerer]>
<link rel="stylesheet" href="konquerer-style.css" type="text/css" />
<[end if]-->

<!--[if iCab]>
<link rel="stylesheet" href="icab-style.css" type="text/css" />
<[end if]-->

<!--[if Flock]>
<link rel="stylesheet" href="flock-style.css" type="text/css" />
<[end if]-->

Conditional comments are just against my idea of how CSS should be served… and that’s all I have to say about that.

Meta

Useful things

Check This

and support what I do

Related Articles

These just might ring a bell

Get a Trackback link

1 Trackbacks/Pingbacks

Other blogs referencing this article
  1. Pingback: Condicionales CSS para casi todos los navegadores | aNieto2K on February 5, 2007

10 Comments

Responses to my article
  1. Julián Rodriguez Orihuela February 2, 2007

    Well, you actually forgot all the different vesions of IE, that would be much closer to what we’ll see in the next months.

  2. Christian Montoya February 2, 2007

    Yeah, but that was unnecessary for my example.

  3. Tony February 2, 2007

    I’d think more like
    [if IE] style_hacked.css
    [else] style.css

    Though you are right, it’s still a pretty bad direction.

  4. BillyG February 2, 2007

    I still getting my feet wet in this web world, but coming from a COBOL cave, even I know there’s gotta be a better way! lol

  5. Christian Montoya February 3, 2007

    BillyG: See the comments section of “CSS techniques I use all the time” for the reason I posted this entry.

  6. Jon February 3, 2007

    In all honesty I don’t see anything like that happening. These conditional comments are significant in that every other browser ignores them as an HTML comment. I don’t see any other browser manufacturers adopting the technique any time soon as they already keep Web standards in mind.

    Personally I would much rather have all of my Internet Explorer fixes separated from the site style simply for maintenance and longevity. Until IE catches up, you would be forced to re-examine all of your projects upon each significant IE update had you employed hacks throughout the design — not something I would enjoy doing.

    Sure, conditional comments add a bit of clutter to your document, but in my opinion it is a much cleaner solution than using hacks. I’m not speaking of hacks in that they are not valid style, because many ‘accpted’ hacks are. The fact remains that they’re hacks, leaving potential for sporadic support in the future.

    Conditional comments are ignored by everything but [specific versions of] Internet Explorer. CSS hacks are most often still processed client side. The migration from IE6 to IE7, I would think, would be a big inspiration to start using conditional comments on a regular basis simply because an itemized list of rendering issues were corrected, while many still remain.

    In the ideal future, when all browsers employ Web standards in their document rendering, conditional comments will become deprecated, leaving a few lines of commented HTML, as opposed to style sheets littered with correctional styles that will waste bandwidth and interfere with document readability.

  7. Kyle Korleski February 6, 2007

    I will only use Conditional Comments for one purpose and that is getting my CSS to work in that Internet Explorer. Damn Microsoft.

  8. pauldwaite February 6, 2007

    I do see your point, but I don’t think your use of conditional comments would increase the likelihood of the situation above.

    All the vendors responsible for the browsers you mention seem committed towards complying with the CSS spec, and bringing their implementations in line as much as possible. As such, it’s unlikely that we’d ever need workarounds for each browser.

    I find extra stylesheets via conditional comments invaluable for dealing with Internet Explorer 5 and 6, as their bugs are severe, and frequently encountered. There are bugs in other browsers, but they’re rare and simple enough for me not to mind simply avoiding that particular bit of CSS.

  9. John Lascurettes February 7, 2007

    I share your and Clagnut’s views. I find it efficient to group all my “hacks” in one area at the end of the CSS file. For float-clears, for example, it’s more optimized anyway to group my selectors instead of declaring them everytime I’ve floated an element.

  10. John Lascurettes February 7, 2007

    The ONLY time I use CC is to pass non-compliant, IE-proprietary CSS to IE only. Example: alpha filters to support PNG backgrounds in IE 5.5 and 6. But then there’s the rub: It takes a complicated formula of nested CC just to filter out IE 5 and IE 7.

    Can we just take IE out behind the barn and shoot it already?

    I’ve seen others post good ideas for MS: integrate Gecko into a new IE while leaving Trident intact. Use Gecko, Presto or WebKit for any sites that are in standards/strict mode, use Trident for sites missing a DOCTYPE or otherwise in quirks mode. That way, they can have their beloved backward-compatibility for all those sites that don’t know what standards are and be able to keep up with the modern world in moving the Web forward (instead of holding it back like it does today).

Leave a comment

Share your thoughts with the world

You can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Please keep comments respectful and on topic.

This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.





Stay on top of new updates at this site: Subscribe to the Feed!