0

私は LESS プリプロセッサを使用してサイトを開発していますが、IE9 を動作させるために、条件付きフィルターのオーバーライドにグラデーションの背景を適用しているすべてのクラスまたは要素を含めることが絶対に必要かどうか疑問に思っていました...

<!--[if gte IE 9]>
  <style type="text/css">
    .the-first-gradient-class{ filter: none; }
    .the-second-gradient-class{ filter: none; }

    ...

    .the-last-gradient-class{ filter: none; }
  </style>
<![endif]-->

LESS がグラデーションを処理しているので、出力された HTML に特定の「グラデーション」クラスを追加していません。私がこのようなことを言って、ただそれをやり遂げることを妨げるものはありますか??

<!--[if gte IE 9]>
  <style type="text/css">
    * { filter: none; }
  </style>
<![endif]-->
4

1 に答える 1

0

あなたの考えはうまくいきません

条件ステートメントのポイントは、IE の古いバージョンのグラデーションsvgだけでなく、バ​​ックグラウンドでグラデーションが定義されている場合に IE9 をオーバーライドすることです (たとえば、この SO の質問を参照してください)。filter

IE9 で をsvg適切に使用するには、以前のバージョンのフィルター セットを上書きするように設定する必要があります。これは通常、css のカスケードを使用してフィルターをリセットすることによって行われます。したがって、グラデーションを定義する元の css に続く条件付きコメントで同じセレクター名が使用されるのはなぜですか。より新しい IE9 css が自動的に使用されます。これは、同じセレクターですが、カスケードで後で来るためです。

2 番目の方法は、IE9 条件付きのセレクターを、適用されたどのグラデーション セレクターよりも具体的にすることです。ただし、LESS でさまざまなセレクターを使用しているだけなので、これは困難ですが、克服できないわけではありません。

では、なぜあなたのアイデアはうまくいかないのか

*セレクターは0特定のものです。それはすべての要素に影響を与えますが、パワーはありません。そのため、カスケード内の他のセレクターをオーバーライドしたり、力ずくでオーバーライドしたりすることはできません。基本的に、あなたの場合、セットを持つようにフィルターが定義されていないセット要素以外は何もしません。定義されているもの（グラデーションコードを含む）filter: noneの他のすべてのコードを保持します。filter

回避策として成功する可能性が最も高い

グラデーションを使用してさまざまな要素に単一のクラスを設定したくないため (おそらくそれを処理する最も簡単な方法)、代わりに、グラデーションを含む可能性のある LESS によって生成されたさまざまなセレクターを処理しているため、次のようになります。これらのセレクターの CSS を展開して処理します。これを行うにはさまざまな方法がありますが、他のブラウザーが表示しないように条件にフィードできる可能性がある方法もありますが、1 つの例 (すべてのブラウザーで選択される) を計画することです。htmlIE9 の場合にクラスを設定してから、次のようにします。

以下

.someClass {
  filter: gradientFilter;
  .ie9resetFilter();
}

.someOtherClass {
  filter: gradientFilter;
  .ie9resetFilter();
}

.ie9resetFilter() {
  html.ie9 & {
    filter: none;
  }
}

CSS出力

.someClass {
  filter: gradientFilter;
}
html.ie9 .someClass {
  filter: none;
}
.someOtherClass {
  filter: gradientFilter;
}
html.ie9 .someOtherClass {
  filter: none;
}

IE9 で他のフィルタを使用していない場合は...

IE9 のフィルター呼び出しのすべてのインスタンスを (フィルターの種類に関係なく) オーバーライドすることを気にしない場合はid、htmlorbody要素に を設定し、条件付きコメントを使用してオーバーロード選択を行うことができます (事実を使用して) 「同じ単純なセレクターの繰り返し発生は許可されており、特異性が向上します。」 )。idで「myID」が設定されているとしましょう。条件付きでこれを行うと、IE9bodyの any のオーバーライドがほぼ保証されます。filter

<!--[if gte IE 9]>
  <style type="text/css">
    #myID#myID#myID#myID * { filter: none; } /* specificity is 400 */
  </style>
<![endif]-->

LESS に、4 つの ID に等しい特異性を持つ通常のセレクター文字列がないことを前提としています (とにかくそうならないことを願っています)。

これは理想とはほど遠いものですが、個々のセレクターのオーバーライドを回避するための回避策です。

于 2013-10-18T14:06:53.553 に答える