Should I Use The Svg Gradients Generated by Colorzilla for Ie9

why don't the colorzilla gradients work in IE?

They have a button under the css called

IE9 Support (?)

Make sure you check that and follow the instructions that appear.

LESS and IE9 filter:none for svg gradient compatibility?

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.

Choosing SVG or CSS3 for gradients

According to a test performed by Lea Verou (I trust her work), CSS gradients are faster:
http://lea.verou.me/2011/08/css-gradients-are-much-faster-than-svg/

UPDATE:

You could also consider using modernizr to serve up SVG to IE9 which supports SVG backgrounds but does not support CSS gradients.

In your CSS you would just do:

.cssgradients #someElement { /* Gradient background rule. */ }
.no-cssgradients #someElement { /* SVG background rule. */ }

More info here:

http://modernizr.com

Gradients in Internet Explorer 9

You still need to use their proprietary filters as of IE9 beta 1.

CSS3 Border-Radius and IE9

It has nothing to do with your SVG image or its data URI, but it has to do with your filter. Effects generated by the filter property, which you're using, do not get clipped by border-radius, and often overlap certain other things such as background images.

Whether this is a real bug or an unintended side effect, I don't know, but that's the cause in IE9, as it doesn't implement CSS3 gradients — only IE10 does.

Since you're using an SVG image anyway, you can easily fall back to that instead of using filter.

---

Related Topics