编译和维护特定于ie的样式表

Question

在单独的CSS文件中维护IE解决方法的常见做法是什么？我正在谈论通过其他方式解决的更深层次的问题(例如包括替代图像URL以及base64编码的嵌入式资源; boxsizing.htc解决方法等).注意:我在考虑dataURI vs时保守香草精灵,所以只有少数几个

有时我不得不求助于类似的代码

.some-class-lets-say-datepicker {
  background-image: url(data:image/png;base64,/*encoded image*/);
  *background-image: url(../gfx/lets-say-datepicker-icon.png);
}

编码图像字符串平均为100~300个字符.鉴于上面的代码,这会导致一些冗余和流量 - 兼容浏览器下载冗余和URL,并且IE7下载base64字符串在单独的图像请求之上.我发现这个开销对两者来说都是微不足道的(毕竟,IE7用户有更大的问题需要担心:)

同时以下(？)会更清洁:

<!--[if !IE]> -->
  <link href="main.css" rel="stylesheet" />
<!-- <![endif]-->
<!--[if lt IE 8]>
  <link href="main_ie.css" rel="stylesheet"/>
<![endif]-->

但是单独的维护似乎并不吸引人.关闭样式表提供条件,是否有类似的SASS/LESS或者你推荐的完全不同的方法？

Answer 1

如果您可以生成2种不同的样式表,Sass(版本3.2+)可以相当容易地完成此操作.

这是你的mixins:

$ie-only: false !default;

@mixin hide-from-ie {
    if $ie-only != true {
        @content;
    }
}

@mixin show-only-ie {
    if $ie-only == true {
        @content;
    }
}

在您的SCSS文件中:

.some-class-lets-say-datepicker {
    @include hide-from-ie {
        background-image: url(data:image/png;base64,/*encoded image*/);
    }

    @include show-only-ie {
        background-image: url(../gfx/lets-say-datepicker-icon.png);
    }
}

创建一个单独的IE文件,用于导入其他SCSS文件,但在顶部有这个:

$ie-only: true;

使用条件注释为旧IE版本提供生成的css文件,其中$ ie-only设置为true,并且每个其他浏览器获取使用$ ie-only设置为默认false的生成的文件.

这种技术的灵感来自于:http: //jakearchibald.github.com/sass-ie/