How to make cross browser gradient mixin in compass, with IE9, IE8, IE7 and Opera?
Solution 1
What is the benefit of background-size: 100%;?
What is the benefit of using background-image instead background?
SVG images are background images, and the contents of that property is a programatically generated image. To keep it consistent, Compass uses the background image. Additionally, specifying background-image
can allow the coder to specify a background-color
that won't get nuked by the mixin.
Setting background-size
ensures that the image actually stretches to fill the space of the element, instead of being the size of the image itself.
Is there a way to add filter:none to the element only for IE9 in Compass?
How to get IE6-8 compatible code too in compass like this filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );?
There are three options to both of these:
- Extend the mixin/write your own mixin. The included mixins are just files that are stored in Compass's install location, so you can always edit them, or use them to create your own mixins.
- Use CSS3 PIE with Compass.
- Put the IE-specific code into one or more IE-specific stylesheets (this is my preferred method if PIE isn't an option, as it sandboxes the CSS, so you don't have to do hacks to get one version or another to ignore a given line of CSS).
Solution 2
First of all give these a try in your _base.scss
@import "compass/support";
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$experimental-support-for-microsoft: true;
$experimental-support-for-pie: false;
$experimental-support-for-svg: true;
Then add in
@import filter-gradient($start-color, $end-color, $orientation)
Jitendra Vyas
Hi, I am Jitendra a front-end developer from India specializing in web standards, accessibility, and usability based development.
Updated on July 20, 2022Comments
-
Jitendra Vyas almost 2 years
I want to make mixin for all browser including IE9 IE9, IE8, IE7 and Opera.
Like http://www.colorzilla.com/gradient-editor/ generate the code
it generate
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 */
And for IE9 We need to set
filter:none
Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]> <style type="text/css"> .gradient { filter: none; } </style> <![endif]-->
Compass has latest module for gradient http://compass-style.org/reference/compass/css3/images/ which we can use after calling
$experimental-support-for-svg: true
and for example use like this.gradient {@include linear-gradient(#000000, #ff0000)}
Which gives output like this
.gradient { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(100%, #ff0000)); background-image: -webkit-linear-gradient(#000000, #ff0000); background-image: -moz-linear-gradient(#000000, #ff0000); background-image: -o-linear-gradient(#000000, #ff0000); background-image: -ms-linear-gradient(#000000, #ff0000); background-image: linear-gradient(#000000, #ff0000); }
if we compare compass Image code this to colorzilla code
-
it's missing which is for IE6-8
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
- and for older browsers
background: #1e5799; /* Old browsers */
- and it's using
background-image
insteadbackground
- and it has one extra property
background-size: 100%;
- and there is no instruction on this page
http://compass-style.org/reference/compass/css3/images/ for how to
solve
filter:none
required for IE9.
My questions:
- What is the benefit of
background-size: 100%;
? - What is the benefit of using
background-image
insteadbackground
? - Is there a way to add
filter:none
to the element only for IE9 in Compass? - How to get IE6-8 compatible code too in compass like this
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
?
-
-
Jatin about 10 yearsPlease try to explain.