rgba background with IE filter alternative: IE9 renders both!
I'm trying use make a div's background transparent using a mixture of CSS3 rgba() and microsoft's filter property like this:
div {
width: 200px;
height: 200px;
/* blue, 50% alpha */
background: rgba(0,0,255,0.5);
/* red, 50% alpha */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF00开发者_开发问答00,endColorstr=#7FFF0000);
}
As expected, browsers that support rgba() will render the div as blue, whereas IE 6-8 will render it as red.
IE9 can apparently handle both (previously I thought filter support had been removed) and the result is a purple div. Is there any way of making IE9 support either of these properties but not the other? rgba() would obviously be preferred.
N.B. I am using IETester to run these tests. If the proper build of IE9 does not do this please let me know.
I’ve come up with a hacky workaround that I thought I'd share.
IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn’t exist on an element we can get IE9 to disable it's filter gradient:
div {
width: 200px;
height: 200px;
/* For FF, Chome, Opera, IE9+ */
background: rgba(0,0,255,0.5);
/* For IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
div:not([dummy]) {
/* IE9 only */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}
I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.
Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.
If you're using HTML5 you may want to go down the route of using
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
and in your CSS use something like :
.ie9 .element {filter: none; }
This seems to work for me (not fully tested in all versions). According to the discussions in this blog the :root selector is only available in IE9 and thus the code below can be written to remove all filter settings in IE9.
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
Edit: !important needed to make sure it works in all places.
Take a look at browser/version targeting using conditional comments. You'll want to target specific versions of IE and implement your styling per-version.
http://www.positioniseverything.net/articles/cc-plus.html
The simplest and most reliable method for filter: compatibility I've found uses the code http://www.colorzilla.com/gradient-editor/ generates:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Then you add a gradient CSS class to the element that needs it. And that's it.
Although conditional comments are still a bit of a hack, in my opinion they're less so than universal selectors or the likes of :not and don't have the performance risks.
Remember that Microsoft dropped conditional comments from IE10 and above, but you should almost never need them for those versions.
I wouldn't trust IETester either; download a virtual machine with proper IE9 on from https://www.modern.ie/en-gb - it's free; all you need is time and disk space (keep the original download so when it expires you can just reinstall.)
加载中,请稍侯......
精彩评论