2

別のCSSファイルでIEの回避策を維持するための一般的な方法は何ですか？他の方法（base64でエンコードされた埋め込みリソースと一緒に代替画像のURLを含める、boxsizing.htcの回避策など）で解決するのが現実的ではない、より深い問題について話しています。注：dataURIとバニラスピリットなので、ほんの少ししかありません

時々私は似たようなコードに頼らなければなりません

.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に似たものはありますか、それともまったく別のアプローチをお勧めしますか？

4

2 に答える 2

5

Sass（バージョン3.2以降）は、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);
    }
}

他のSCSSファイルをインポートする別のIE専用ファイルを作成しますが、これは上部にあります。

$ie-only: true;

条件付きコメントを使用して、$ ie-onlyがtrueに設定された生成されたcssファイルを古いIEバージョンに提供し、他のすべてのブラウザーは、$ie-onlyがデフォルトのfalseに設定されたものを取得します。

このテクニックのインスピレーションはここにあります：http： //jakearchibald.github.com/sass-ie/

于 2012-09-07T16:45:11.960 に答える
0

JavaScriptを使用して、ブラウザーなどに基づいてHTMLにクラスを追加できます。これらは非常に便利です。これは私が使用しているものですhttp://rafael.adm.br/css_browser_selector

于 2012-08-27T03:26:20.947 に答える