CSS compilers and converting IE hacks to condition

2019-08-09 04:19发布

站内问答 / HTML/CSS
1978 3 4

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?

3条回答
啃猪蹄的小仙女
2楼-- · 2019-08-09 04:59

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

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-08-09 05:09

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

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-08-09 05:09

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)