Avoid CSS hacks

Refrain from using CSS hacks as long as you can. If you need to do something to cover up for flaws in Internet Explorer’s rendering, please use conditional comments to only serve the different versions of Internet Explorer specific CSS, as I’ve stated for a long time.

For more information, read Markus Mielke’ post Call to action: The demise of CSS hacks and broken pages.

Posted in CSS |

15 Comments

  • Marco says:

    That's indeed the best advice. I've always used this instead of hacks. It's much easier to maintain and it won't break when new versions of Internet Explorer come out.

  • Chris says:

    Anybody would have a link to a very basic tutorial explaining conditional comments?

    Thanks in advance :-)

  • Henrik says:

    I disagree.

    I refer to Bye Bye Tan Hack which covers all bases, and pretty much explains how I think too.

  • Henrik says:

    great regular expressions there ;)

  • Robert Nyman says:

    Chris,

    Above link in the post should explain it pretty thoroughly. I also think Peter-Paul Koch's page Conditional comments is pretty good.

    Henrik,

    Well, I disagree with Dave Shea here. Would you rather depend on an invalid hack and send incorrect <acronym title="Cascading Style Sheets">CSS</acronym> to all your visitors, no matter what web browser they're using? Conditional comments are the solution most web developers use to serve <acronym title="Internet Explorer">IE</acronym>, and <acronym title="Internet Explorer">IE</acronym> alone, the code needed to get it to work. If you're running multiple <acronym title="Internet Explorer">IE</acronym> on your computer, it takes 1 minute to get it to work with conditional comments.

    I'd rather use a stable and tested solution for a (hopefully) dying breed of old non-standards conformant versions of <acronym title="Internet Explorer">IE</acronym>, and serve only valid hack-free <acronym title="Cascading Style Sheets">CSS</acronym> to all web browsers that can handle it (and <acronym title="Internet Explorer">IE</acronym> 7 will, most likely, be one of those).

  • Jens Meiert says:

    Well, I already posted this in the IE Blog and on Roger's site, but it is too important: What the IE team calls "hacks" here are just child and adjacent sibling selectors, which are no hacks, at least not per se! I cannot believe that nowhere specified "conditional comments" are now a seriously considered solution – almost every "Web standards committed" developer or designer now turns around, or what's going on!?

  • Robert Nyman says:

    Jens,

    The example at the IE blog is not a hack, I know. Not the best example.

    What I like about conditional comments is that they're just HTML comments with special content, so they shouldn't affect any other web browser than Internet Explorer. I also regard it as a solution that downgrades well and is a solution for web browser versions that will go away (although it might take some years).

  • Jens Meiert says:

    But, beside that "conditional comments" are proprietary and specified nowhere (at least not by the W3C), they also require you to use more than one style sheet (assuming that you use external style sheets, of course). We should remember that having the formatting centralized is one of the biggest advantages of CSS.

  • Marco says:

    Jens> What's wrong with a couple of 'centralized' stylesheets? You probably have a print.css file already anyway. Also, when one programs perl, php, ruby or any other language everything isn't 'centralized' in one file either. As long as your CSS is all nicely arranged by IE version in one directory I consider that rather organized / centralized. It's much better than one big file full of messy hacks which might break seriously in the future.

    The advantage of CSS you mention has nothing to do with putting all the CSS in just one file. The main advantage of CSS is the fact that it separates document markup from style/design aspects.

  • Jens Meiert says:

    Marco:

    What’s wrong with a couple of ‘centralized’ stylesheets?

    There's nothing particular "wrong" with it. But it is a difference if you can use several style sheets or if you must use them.

    You probably have a print.css file already anyway.

    Personally, I almost always use only a single style sheet and address media types via the "@media" rule. Think alone about extensibility, what will you do when you, say, want to address the "handheld" media type? You will add it to each and every HTML file? That's fine, great, but this is not very efficient. You should not need to touch your documents when you want to change their appearance, even if you want to have it dressed for other media or devices.

    It’s much better than one big file full of messy hacks which might break seriously in the future.

    Again, child and adjacent sibling selectors are no hacks. Take a look at the spec.

    The advantage of CSS you mention has nothing to do with putting all the CSS in just one file. The main advantage of CSS is the fact that it separates document markup from style/design aspects.

    Again, I stated "[...] is one of the biggest advantages of CSS". And that is just quite right. Remember the times you had to change your presentational markup for layout changes. I remember people being happy about having CSS and changing formatting in one place then. It is an advantage.

  • Robert Nyman says:

    Jens,

    First, don't get stuck on the example in the IE blog, we're not talking about correct code like using child selectors here.

    The kind of hacks/fixes we use are only the ones really necessary, when we've found no other way to accomplish the same thing; problems like <code>float</code> and <code>margin</code> bugs and hasLayout issues.

    So, we're not promoting using hacks here, it's being the last resort for covering up for web browser bugs.

    When you want to add an extra style sheet that should target every web browser, there's no need to update the references in every file. Instead, import it into your main <acronym title="Cascading Style Sheets">CSS</acronym> file like this: <code>@import url(my-extra-css-file.css );</code>.

  • Jens Meiert says:

    Robert,

    no offense meant! ;)

    When you want to add an extra style sheet that should target every web browser, there’s no need to update the references in every file. Instead, import it into your main CSS file [...]

    Of course – I see, there was a misunderstanding: I understood Marco's "print.css" as a "linked" style sheet. [...] Though this might be "a matter of taste", I usually prefer a single style sheet (as long as it does not become too big; at GMX, for example, we decided to create CSS modules to save load time).

  • Robert Nyman says:

    Jens,

    Oh, none taken. Sorry if I sounded a bit harsh, I was tired…. :-)

    And I agree, one <acronym>CSS</acronym> is fine if it's not going to be huge. I've been working on fairly large web sites lately, and then I try to at least split the styles into two files, one for layout purposes and one for fonts (however, the layout one always seem to become the humongous one :-)).

  • Sound advice and the best way to avoid trouble when IE 7 comes into play.

    In addition I tend to comment each rule I add to a hacks stylesheet so that it will make sense what bug I am fixing when I come back to it – particularly if it was one of the more esoteric IE bugs!

  • Robert Nyman says:

    Stuart,

    In addition I tend to comment each rule I add to a hacks stylesheet so that it will make sense what bug I am fixing when I come back to it – particularly if it was one of the more esoteric IE bugs!

    Absolutely, me too! :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>