LESS和IE9过滤器：没有SVG梯度兼容性吗？

Question

I'm developing a site using the LESS preprocessor and was wondering if it's absolutely necessary to include every single class or element to which I'm applying a gradient background in the conditional filter override to make IE9 behave...

<!--[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]-->

Since LESS is handling the gradients, I'm not adding a specific 'gradient' class to my outputted HTML, and doing that is kind of a pain (and I don't really want to deal with that). Is there anything preventing me from just saying something like this and just being done with it??

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

Answer 1

Your idea will not work

The point of the conditional statement is to override IE9 when a gradient has been defined with an svg background as well as a filter gradient for older versions of IE ( see for example this SO question ).

To get the IE9 to use the svg properly, it needs to be set to override the filter set for the earlier versions. That normally is done by using the cascade of the css to reset the filter, hence why the same selector names are used in the conditional comment which follows the original css defining the gradient. The later IE9 css will automatically be used because it is the same selector but comes later in the cascade.

A second way to do it would be to have the selector for the IE9 conditional be of higher specificity than any applied gradient selector. However, since you are just using a variety of selectors with LESS, this would be challenging, but not insurmountable.

So why your idea does not work

The * selector is of 0 specificity . It affects all elements, but not with any power. So it cannot override any other selector in the cascade, nor by brute force. Essentially, in your case, it would do nothing other than set elements that already do not have filters defined to have a filter: none set on them, keeping all other filter code in place for those that are defined (including your gradient code).

Most likely success for a work around

Since you don't want to set a single class on the various elements with a gradient (the easiest way to probably handle it), and are instead dealing with a variety of selectors generated by LESS that may include a gradient, your going to have to handle it by expanding the CSS for those selectors. There are a variety of ways this could be done, some that would probably still be able to feed it into a conditional so other browsers do not see it, but one example (that would be picked up by all browsers) would be to plan on setting a class on the html when it is in IE9, and then do this:

LESS

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

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

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

CSS Output

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

If you are not using filters for anything else in IE9 then...

If you don't care about overriding every single instance of a filter call (no matter what type of filter it is) for IE9, then you could set an id on the html or body element, and do an overload selection using conditional comments (using the fact that "Repeated occurrances of the same simple selector are allowed and do increase specificity." ). So let's say you have an id of "myID" set on the body , then you could do this in a conditional to almost guarantee an override of any filter for IE9:

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

I am assuming you don't have any normal selectors strings in your LESS that would have a specificity equal to four id's (I hope not anyway).

This is far from ideal, but is a workaround to avoid individual selector overriding.