Geek Answers Handbook

CSS gradients work in IE9?

Unfortunately, I don't have a machine on which I can test IE9 yet (still in XP), and browsers still don't do IE9. Can someone tell me if IE9 supports css gradients? Here is a page with gradients. It works?

http://www.webdesignerwall.com/demo/css3-dropdown-menu/css-gradient-dropdown.html

+6
css internet-explorer css3 internet-explorer-9 gradient
source share
4 answers

This is not true.

See here: http://caniuse.com/#search=gradient

It will support SVG as a background, although it is currently used to create gradients for Opera.

+6
source share

IE9 currently lacks CSS3 gradient support. However, here is a good solution to solve the problem of using PHP to return the SVG (vertical linear) gradient, which allows us to save our design in our style sheets.

<? header('Content-type: image/svg+xml; charset=utf-8'); echo '<?xml version="1.0"?> '; $from_stop = isset($_GET['from']) ? $_GET['from'] : '000000'; $to_stop = isset($_GET['to']) ? $_GET['to'] : '000000'; ?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" preserveAspectRatio="none" width="100%" height="100%"> <defs> <linearGradient id="linear-gradient" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#<?=$from_stop?>" stop-opacity="1"/> <stop offset="100%" stop-color="#<?=$to_stop?>" stop-opacity="1"/> </linearGradient> </defs> <rect width="100%" height="100%" style="fill: url(#linear-gradient);"/> </svg>

Just upload it to your server and call the url like this:

 gradient.php?from=f00&to=00f

This can be used in conjunction with your CSS3 gradients as follows:

 .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 modify the PHP code to add more stops on the gradient or make it more complex (radial gradients, transparency, etc.), but this is great for these simple (vertical) linear gradients.

+3
source share

According to this article , IE9 does not support gradients.

+1
source share

IE9 does not support CSS gradients.

See below for a comparison between Firefox 4 and IE9 .

+1
source share

More articles:


All Articles