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

Question

在单独的 CSS 文件中维护 IE 变通办法的常见做法是什么？我说的是更深层次的问题，这些问题无法通过其他方式解决(例如包括替代图像 url)带有 base64 编码的嵌入式资源；boxsizing.htc 解决方法等)注意:在考虑 dataURI 与 vanilla spriting 时我比较保守，所以只有几个

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

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

但单独维护似乎一点吸引力也没有。闭包样式表报价 conditionals ，SASS/LESS 是否有类似的东西，或者您是否推荐完全不同的方法？

Answer 1

如果您可以生成 2 个不同的样式表，Sass(版本 3.2+)可以相当轻松地做到这一点。

这是你的混入:

$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/