Menu
I've found http://www.colorzilla.com/gradient-editor/ to be great for generating CSS3 gradients. However, there's one thing about it which would be great if someone could clarify for me.
As I understand it, IE9 doesn't support the filters in the same way IE6-8 did, and doesn't support CSS3 gradients either. Colorzilla gives a very clever way of forcing IE9 to work with multi stop gradients, by including SVG data for the gradient in the CSS, and setting filter to none for IE9 only on any elements using the gradient. Below is an example of what Colorzilla generates if ticking the IE9 Support checkbox, the background: url(data ... line being what's added for IE9.
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
With the following added to the <head> element in the HTML.
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
I'm wondering whether it's generally preferable to include this code for IE9, or rely on a regular image fallback instead? Is there any situations where one approach may be better than the other? Also, might this SVG code affect the performance of other browsers that use the CSS3 properties, or will they simply ignore this line?
Colorzilla doesn't seem to explain the implications of including this bit of code, maybe there aren't any and it's the right way to do it all the time? If that's the case I'm sorry for wasting peoples time, but the fact it's a tickable option made me think there may be some reason not to use it.
877
The IE9 SVG gradient works well, but IE7 considers it to be unsecured content. So if you secure your site with this styling behind SSL/HTTPS, IE7 users will get the "This page contains both secure and nonsecure items." I pulled this section into a conditionally included CSS file to keep IE7 from barking.
78
IE9 does support IE6-8 filters although IE10 will not. You are right that IE9 does not support CSS3 gradients but IE10 will do so.
Since IE9 does support IE6-8 filters colorzilla needs to turn off the IE6-8 filter when you put the SVG filter on the object. The IE6-8 filter is set using a filter property unlike the css filters that are set using the background property. The <head> addition therefore turns off the duplicate IE6-8 filter on IE9. Given the different property names the last selector matches rule does not apply.
This code should be faster than regular image fallback as the SVG code can be hardware accelerated. The SVG code won't affect other browsers as the last selector matches, that's why the legacy browser line is at the top.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
