Question

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 7 years ago.

Improve this question

Skip to bottom for question, but first, a little context.

So I have been looking into CSS compilers (like Sass & Less) for a while, and have been really interested in them, not because they help me understand anything easier (I ve been doing css for a couple of years now) but rather they cut down on cruft and help me see things easier.

I recently have been looking into reliably implementing inline-block (and clearfix), which require lots of extraneous code & hacks. Now according to all the authorities in the field, I shouldn t put IE hacks in the same page I do my CSS in, I should make them conditional. But for me that is a really big hassle to go through and manage all this additional code, which is why I really like things like Less. Instead of applying unsemantic classes, you specify a mixin and apply it once, and you re all set.

So I guess I got a little of the track (I wanted to explain my points) but bascially, I m at the point where these CSS compilers are very useful for me, and allow me to abstract a lot of the cruft away, and reliably apply them once and then just compile it. I would like to have a way to be able to compile IE specific styles into their own conditional files (ala Less / Sass) so I don t have to deal with managing 2 files for no reason.

Does anything like a script/applcation that runs and can make underscore / star hacks apart of their own file exist?

Answer 1

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.)

Answer 2

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

Answer 3

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.

友情链接