编译和维护ie特定的样式表 [英] Compiling and maintaining ie-specific stylesheets

问题描述

在单独的CSS文件中维护IE解决方法的常见做法是什么？我在谈论更深层的问题，这是不切实际的通过其他手段（如包括一个替代图像网址使用base64编码的嵌入式资源; boxsizing.htc解决方法等等）注意：在考虑dataURI和vanilla spriting时，我保守，所以只有一些

What is the common practice for maintaining IE workarounds in a separate CSS file? I'm talking about deeper issues that are impractical to work out by other means (such as including an alternative image url along with a base64-encoded embedded resource; boxsizing.htc workaround etc.) NB: I'm conservative when considering dataURI vs vanilla spriting, so there are only a few

有时我必须使用类似

.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 stringon单独的图像请求的顶部。我发现这个开销对于两者都是微不足道的（并且，毕竟，IE7用户有更大的问题需要担心：）

with the encoded image string being on average 100~300 chars. Given the code above, this causes some redundand traffic - for compliant browsers to download the redundand URL, and for IE7 to download the base64 stringon top of the separate image request. I find this overhead to be insignificant for both (and, after all, IE7 users have much bigger issues to be worried about :)

同时， ？）变得更干净：

At the same time the following would (?) be a lot cleaner:

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

但是单独的维护似乎并不吸引人。 Closure样式表提供条件，有与SASS / LESS类似的东西，或者

but separate maintenance does not seem appealing at all. Closure-stylesheets offer conditionals, is there something similar for SASS/LESS or is there a different approach altogether that you'd recommend?

推荐答案

Sass（3.2以上版本）可以很容易地做到这一点，如果你'

Sass (version 3.2+) can do this fairly easily if you're ok with generating 2 different stylesheets.

以下是您的mixin：

Here's your mixins:

$ie-only: false !default;

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

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

在您的SCSS档案中：

In your SCSS files:

.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文件，但是位于顶部：

Make a separate IE-only file that imports your other SCSS files, but has this at the top:

$ie-only: true;

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

Use conditional comments to serve old IE versions the generated css file with $ie-only set to true, and every other browser gets the one generated with $ie-only set to the default false.

这个技术的灵感来自这里：http://jakearchibald.github.com/sass-ie/

Inspiration for this technique was found here: http://jakearchibald.github.com/sass-ie/

这篇关于编译和维护ie特定的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！