ansaurus

Question

CSS compilers and converting IE hacks to conditional css

Answer 1

+3 A:

It's not really a compiler trick, but if you want to use conditional comments without having to compile separate per-browser stylesheets, you can simply use HTML conditional comments to inject a styling hook. For example:

    ...
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->

Now you can target rules you want to apply to IE<=6 and IE<=7 in the same stylesheet as the rest of the rules:

body.ie6 #thing { position: relative; }
body.ie7 #otherthing { z-index: 0; }

This is IMO marginally cleaner than the * html hack, which is the last acceptable CSS hack. (The “star hack” and “underscore hack” are invalid CSS: avoid.)

bobince 2010-04-30 19:16:22

Answer 2

A:

You can just conditionally include a generated CSS sheet for IE6/7/whathaveyou:

<head>
    <link rel="stylesheet" href="/css/master.css" type="text/css"/>
    <!--[if IE 6]>
      <link rel="stylesheet" href="/css/ie6.css" type="text/css"/>
    <![endif]-->
</head>

Also, if you're worried about mixing in the IE fixes/hacks with the bulk of your SASS/CSS, you can break them up into their own partials:

@import ie6.sass

The above would include all the rules for that particular version of IE in the current SASS document. Documentation on partials can be found here: SASS Partials

Damien Wilson 2010-04-30 19:22:17

I know about conditional includes, I'm asking how could I go about generating such a thing. And the main reason I'm worried about mixing them, is a case scenario when IE9 / IE10 come out and the hacks I used break them: that doesn't solve those issues.

2010-04-30 19:30:33

Just version your CSS/SASS files accordingly through IE conditionals. It's not likely IE9/10 will drop support for conditional comments. I'll update my answer accordingly.

Damien Wilson 2010-04-30 23:11:55

Answer 3

A:

This is IMO marginally cleaner than the * html hack, which is the last acceptable CSS hack. (The “star hack” and “underscore hack” are invalid CSS: avoid.)

Not really: while the "underscore hack" is invalid, the "* html" and "*+html" hacks are perfectly valid CSS. Check it out yourself. ;)

~

As for the question above, for now I'm not aware of any compiler able to do that, I still prefer to user the start hack (IE6-7) and keep everything in one file. More maintainable.

Folletto 2010-09-23 15:16:30

ansaurus

tags:

views:

answers:

CSS compilers and converting IE hacks to conditional css

related questions