Gradient support for IE 8 and below - css

I found a great CSS gradient code generator for a page my friend is making, but there are some comments below it that worry me:
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";
background-color: #CCC;
And in reply:
I strongly recommend against these! They do not act the same, are limited, hurt performance, and can cause layout issues. Simply put, since IE does not support gradients (and many other CSS features natively, without filter), either use images for the same effect (background image) or convince your client that IE users get less of an experience (who seriously cares about gradients vs single colours besides insane 'designers'?) because their browser just doesn't match up to what we as developers want. It's called graceful degradation and IE should not be any exception to that.
So what I don't know is: Should I suggest they do/do not use any of this code? Is getting IE to use this code useless/hopeless?

The filter stuff is generally regarded as bad practice, and isn't valid CSS (so your stylesheet will fail validation tests)
it's possible to set a background image for the element in question, then IE will fallback to that image if it's a version that doesn't support gradients, the beauty of it is that browsers supporting gradients don't load the background image (well, usually) so performance isn't impacted negatively.
Personally, if I were you I'd go for the background image solution, it's a lot cleaner than the whole "filter" thing, and doesn't punish people not using Internet Explorer (yay!)
If you'd like more detail, see here:
http://css-tricks.com/css3-gradients/

I'm using http://www.colorzilla.com/gradient-editor/ to create CSS gradients. THe code produced there works even in IE 6+:
background: #1e5799; /* Old browsers */
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(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
So yes, you could use gradients in MS IE.

Four years after the question was asked, the issue has not gone away. I do a lot of sites for large corporates and you still find IE8 on the corporate desktop, sometimes even as the company standard.
My recommendation would be to take those lines exactly as they are offered. IE8 will use them, and any modern browser will ignore them. It keeps the designer happy that you are implementing his design to the best of the browser's ability, but you don't have to mess about with striped background images.

/* Internet Explorer 5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#ffffff)";
background-color: #CCC;

Related

Why do I need so much code for a simple CSS gradient?

I'm just kind of curious as to why I need so many different lines of CSS code to make my gradient compatible with most browsers. Isn't this something that should be universal?
Correct me if I'm wrong, but if something this simple is this not universal, I'm surprised that we don't need browser specific code for font-size, padding, margin, etc.
div.myQuestion {
width: 250px;
height: 100px;
background: #7d7e7d;
/* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
/* IE6-9 */
}
<div class="myQuestion"></div>
That's because gradients are complicated.
You don't need prefixes for padding and margin because they were defined in CSS 2.1, and are simple enough.
However, gradients were defined much later, in CSS3. Moreover, the syntax changed multiple times. The behavior also changed. Some people were still arguing relatively recently to change the space of colors in which the color stops are interpolated (it's not obvious when you take transparency into account).
Then, lots of people don't update they browsers. So they are stuck with these preliminary implementations.
Now most browsers have realized vendor prefixes are a nightmare and they decided to avoid using them for new properties.

Issue in IE While Combining Background-image and css3- Gradients

I am Combining CSS3 gradient and background image. It is working fine in Chrome and FF and also Background image is getting repeated. in ie9 and Below i am not able to see the Background image. Any one please help me
body{background: #d5cea6; /* Old browsers */
background-image:url("cc.png"), -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%); /* FF3.6+ */
background-image: url("cc.png"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70)); /* Chrome,Safari4+ */
background-image: url("cc.png"),-webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Chrome10+,Safari5.1+ */
background-image:url("cc.png"), -o-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* Opera 11.10+ */
background-image: url("cc.png"),-ms-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* IE10+ */
background-image:url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); /* IE6-9 */
}
This is the code i used
In short, no it won't work. You will not be able to do this with IE's old filter style if you're trying to combine a background image and a gradient into the same background.
The only way I know of to make this work reliably in old IE versions is to use the CSS3Pie library.
Using this library, it is possible to specify standard CSS code in old IE versiosn for various modern features, including gradients.
Download the PIE.htc script, add it into your site, then add the following lines to your CSS (and remove the filter line):
-pie-background: url("cc.png"), linear-gradient(to bottom, #d5cea6 0%,#c9c190 40%,#b7ad70 100%); /* PIE */
behavior: url(PIE.htc); /* change the URL as appropriate for your site */
Now your background should behave the same even in really old IE versions as it does in modern browsers.
Hope that helps.
See also the CSS3Pie documentation.

How to convert a multi-stop css3 gradient into an image?

I have a multistop gradient created with colorzilla that I have successfully gotten to work as the background of my website. It works perfectly for firefox, chrome, and IE9. For IE7 and below, it only shows a white background, which is acceptible but not preferable, and to be frank, going back 2 generations, I am not worried about it. However, IE8 only shows a gradient from the first color to the last color, no stops in the middle, which would normally get rid of the middle color, which was white in my case. For the purposes of making it somewhat better, I changed it so the white would be the last color of that gradient, but it is by no means a perfect suggestion.
The solution, to me, appears to be converting my already created multistop gradient from the css code it is in into an image that I can repeat endlessly as necessary, as was traditionally done before the modern era of css gradients. However, I have been unable to find any sort of tool or code that would allow me to do this for a given height and width. Does anyone know of any tool, preferably free, that would satisfy these needs? For the purpose of this question, the gradient code I am using is the following:
background: #72b4f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcyYjRmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzU3YzE0ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTc3MzEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #72b4f9 0%, #ffffff 25%, #ffffff 45%, #57c14f 96%, #397731 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#72b4f9), color-stop(25%,#ffffff), color-stop(45%,#ffffff), color-stop(96%,#57c14f), color-stop(100%,#397731)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* IE10+ */
background: linear-gradient(top, #72b4f9 0%,#ffffff 25%,#ffffff 45%,#57c14f 96%,#397731 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A2CEFB', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
You may want to try CSS3Pie http://css3pie.com it is a quick/free solution for IE7/IE8
Or create a SVG image using the Gradient Background Maker
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Then find a way to import to photoshop
Photoshop always works for me. Im sure you could use GIMP though. A gradient dialog in any image program generally has the same sliders and attributes thet the css generator you used would. You should be bale to create a file at the canvas size you want then essentially use the gradient tool's dialog to set the same settings. For more on that ask on SuperUser or on a forum for users of the app you go with.
Im not aware of an app that will convert the css to an image.
I ended up finding a website that did essentially what I wanted at http://gradcolor.com/. I was able to create multiple gradients at a specific size, and the website created the file for me to download and upload to the website. Thank you everyone for your suggestions, as they led to me finding this.

IE filter gradient not showing wrong colors

I have some link buttons that I'm using CSS3 gradient code that I generated from Ultimate CSS Gradient Generator. It is working great except for IE7-9 (not worrying about IE6). Instead of the nice mid-gray to dark gray it is showing a blue to black gradient. The code being used is:
background: #666666; /* Old browsers */
background: -moz-linear-gradient(top, #666666 0%, #141414 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#666666), color-stop(100%,#141414)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #666666 0%,#141414 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #666666 0%,#141414 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #666666 0%,#141414 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #666666 0%,#141414 100%); /* W3C */
To see what it is rendering like: http://bradmccullough.com.w.jaijaz.co.nz/
I have noticed that altering the display css element changes it but can't put my finger on what exactly is going on.
Thanks.
It is because you are using the shorthand color for gray in your CSS. Make sure you use #666666. Looking at the source of the stylesheet, for the IE filter, you're using #666 (although in your post above you have it right).
We had a similar problem recently. We identified that running CSS minify on the CSS files would shorten '#666666' to '#666', resulting in IE8 not being able to render the correct colour value within the 'filter' property. The only alternative was to define the colour as 'white' (our problem was with '#ffffff') or tweaking the colour slightly, i.e. '#fffffe' to prevent it from being written in shorthand.

Gradients in Internet Explorer 9

Does anyone know the vendor prefix for gradients within IE9 or are we still supposed to still be using their proprietry filters?
What I've got for the other browsers is:
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
As a bonus does anyone know Opera's vendor prefix as well?
Looks like I'm a little late to the party, but here's an example for some of the top browsers:
/* IE10 */
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);
/* Opera */
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444444), color-stop(1, #999999));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(top, #444444 0%, #999999 100%);
Source: http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html
Note: all of these browsers also support rgb/rgba in place of hexadecimal notation.
The best cross-browser solution is
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/
height: 1%;/*For IE7*/
You still need to use their proprietary filters as of IE9 beta 1.
IE9 currently lacks CSS3 gradient support. However, here is a nice workaround solution using PHP to return an SVG (vertical linear) gradient instead, which allows us to keep our design in our stylesheets.
<?php
$from_stop = isset($_GET['from']) ? $_GET['from'] : '000000';
$to_stop = isset($_GET['to']) ? $_GET['to'] : '000000';
header('Content-type: image/svg+xml; charset=utf-8');
echo '<?xml version="1.0"?>
';
?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<defs>
<linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#<?php echo $from_stop; ?>" stop-opacity="1"/>
<stop offset="100%" stop-color="#<?php echo $to_stop; ?>" stop-opacity="1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#linear-gradient)"/>
</svg>
Simply upload it to your server and call the URL like so:
gradient.php?from=f00&to=00f
This can be used in conjunction with your CSS3 gradients like this:
.my-color {
background-color: #f00;
background-image: url(gradient.php?from=f00&to=00f);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f00), to(#00f));
background-image: -webkit-linear-gradient(top, #f00, #00f);
background-image: -moz-linear-gradient(top, #f00, #00f);
background-image: linear-gradient(top, #f00, #00f);
}
If you need to target below IE9, you can still use the old proprietary 'filter' method:
.ie7 .my-color, .ie8 .my-color {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr="#ff0000", endColorStr="#0000ff");
}
Of course you can amend the PHP code to add more stops on the gradient, or make it more sophisticated (radial gradients, transparency etc.) but this is great for those simple (vertical) linear gradients.
The code I use for all browser gradients:
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;
You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.
Update:
Here is a LESS Mixin (CSS) version for all you LESS users out there:
.gradient(#start, #end) {
background: mix(#start, #end, 50%);
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="#start~", EndColorStr="#end~")";
background: -webkit-gradient(linear, left top, left bottom, from(#start), to(#end));
background: -webkit-linear-gradient(#start, #end);
background: -moz-linear-gradient(top, #start, #end);
background: -ms-linear-gradient(#start, #end);
background: -o-linear-gradient(#start, #end);
background: linear-gradient(#start, #end);
zoom: 1;
}
Opera will soon start having builds available with gradient support, as well as other CSS features.
The W3C CSS Working Group is not even finished with CSS 2.1, y'all know that, right? We intend to be finished very soon. CSS3 is modularized precisely so we can move modules through to implementation faster rather than an entire spec.
Every browser company uses a different software cycle methodology, testing, and so on. So the process takes time.
I'm sure many, many readers well know that if you're using anything in CSS3, you're doing what's called "progressive enhancement" - the browsers with the most support get the best experience. The other part of that is "graceful degradation" meaning the experience will be agreeable but perhaps not the best or most attractive until that browser has implemented the module, or parts of the module that are relevant to what you want to do.
This creates quite an odd situation that unfortunately front-end devs get extremely frustrated by: inconsistent timing on implementations. So it's a real challenge on either side - do you blame the browser companies, the W3C, or worse yet - yourself (goodness knows we can't know it all!) Do those of us who are working for a browser company and W3C group members blame ourselves? You?
Of course not. It's always a game of balance, and as of yet, we've not as an industry figured out where that point of balance really is. That's the joy of working in evolutionary technology :)
I understand that IE9 still won't be supporting CSS gradients. Which is a shame, because it's supporting loads of other great new stuff.
You might want to look into CSS3Pie as a way of getting all versions of IE to support various CSS3 features (including gradients, but also border-radius and box-shadow) with the minimum of fuss.
I believe CSS3Pie works with IE9 (I've tried it on the pre-release versions, but not yet on the current beta).
Not sure about IE9, but Opera doesn’t seem to have any gradient support yet:
http://www.opera.com/docs/specs/presto26/#css
No occurrence of “gradient” on that page.
There’s a great article by Robert Nyman on getting CSS gradients working in all browsers that aren’t Opera though:
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
Not sure if that can be extended to use an image as a fallback.
As of version 11, Opera supports linear gradients with the -o- vendor prefix. Chris Mills wrote a Dev.Opera article about it: http://dev.opera.com/articles/view/css3-linear-gradients/
Radial gradients are still in the works (both in the spec, and within Opera).
Use an Gradient Generator - and everything will be perfect ;)
http://www.colorzilla.com/gradient-editor/

Resources