You want CSS opacity to go with that? Well, suit yourself

This article is also available in Hungarian.

Personally, I like opacity when it is used well in a web site. And instead of some static images, I prefer, when possible, that it is achieved through CSS.

CSS offers the developer complete flexibility when it comes to adapting the size and level of transparency. It can also easily be animated or manipulated in other ways with JavaScript, which makes it a very powerful and flexible solution.

How do I use opacity in CSS?

It’s quite simple. Opacity is specified by W3C in the CSS Color Module Level 3 Working Draft, and to use it for an element, it simply goes like this:

#oh-so-pretty {
	background: #999;
	opacity: 0.8;
}

Simple as pie, right? Well, not quite…

Oh, there’s Internet Explorer

There’s a company called Microsoft manufacturing a web browser called Internet Explorer. While the above code works in all the latest versions of Firefox, Safari and Opera (and has for quite some time), and additionally the new Google Chrome, not surprisingly, Microsoft decided to take their own route.

To get opacity in Internet Explorer, you need to use this code:

#my-poor-ms-element {
	background: #999;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

Quite simple and intuitive, right? 😛

So, except from going away to a standardized and simple syntax, to annoy you more, the scale for opacity goes from 0 – 100 in Internet Explorer, when it goes from 0 – 1 in every other web browser, giving you a nice treat when you want to dynamically change the value.

Wait, there’s more

What amuses me is following the blog of the Internet Explorer development team, where they truly do seem to struggle hard to make the upcoming version of Internet Explorer, IE 8, into a better product than its predecessors. Now and then, a true gem pops up, and reveals what a ridiculous world we web developers live in.

In a very justified move, Microsoft is aiming to remove all their own made-up CSS extensions which aren’t approved by the W3C (as of yet), so they will all need a prefix to work in IE 8: -ms. All good, and well, you might think. Nope.

Because the problem with this is that while they do that, for certain CSS features they continue to stubbornly refuse to implement the W3C syntax that everyone uses, resulting in one code for IE 5 – 7, another for IE 8 and then one proper one, implemented by web browser who respect web standards. Unlucky for you, opacity is one of those features.

Microsoft’s recommended way of using opacity in a web page (hold on tight to something now) looks like this:

#my-poor-ms-element {
	background: #999;
	/* For web browsers who care */
	opacity: 0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Since this isn’t April 1st, I do continue to wonder if there’s some other date when such jokes are allowed to?

The idea of web browser vendor-specific prefixes

The whole idea, the point, of web browser vendor-specific prefixes are for them to be used with new CSS features, which also most likely are in some W3C draft for things to come. And if not, it’s there for experimental support or CSS properties submitted for a future W3C inclusion.

I’m not sure, but feel fairly sure in stating that Microsoft’s suggested filter approach is not submitted to the W3C, but if it is, it will never be accepted since it’s overly complicated and just not a necessary mean for the end in question.

Therefore, Microsoft, get your act together and implement the opacity syntax for IE 8 now. I don’t care if it maps to your funky filter-solution behind the scenes, but respect the proper way of writing it and the web developers having to write the code.

56 Comments

  • Dave says:

    Althogh this is crazy of MS, I bet they'll at least allow -ms-opactity:0.8 by the time it RTMs. I just hope all the JS libraries can keep up, so I can just upgrade and do something like:<code>

    $("#my-poor-MS-element").css("opacity",0.8);

    </code>

    PS, comment preview is great! I may try it on my comment forms.

  • Mark Perkins says:

    Obviously this situation with MS is far from ideal. But CSS opacity in general is far from perfect, as if you make an element say 50% transparent that will also make all child elements of it also 50% transparent. This is often (I would say mostly) not the behaviour that you want.

    So in my opinion, regardless of IE, a transparent PNG as a background image is a much better way to achieve the effect without making everything contained within the element semi-transparent.

    Unless anyone knows of another way to work around this issue?

  • Riddle says:

    Thanks for valuable info, but you really shouldn’t capitalize "-MS" in that IE8-compatible CSS extension.

  • Even then IE 7 doesn't handle text well with filters. It turns off clear type! Has IE7 Broken CSS Filters?

    @Mark,

    There are many problems with transparent PNGs in IE. They work in IE7, but you have to use filters in anything less than IE7. When you use a filter, you can't position the PNG and it turns off clear type making the text pixilated and at least for me, not as easy to read.

  • I don't know whether to laugh or to cry about things like these. It's just plain stupid how Microsoft insists on complicating things. I can't really see the motives behind decisions like these. Is it maybe because of misdirected pride, or is it something else?

  • Robert Nyman says:

    Dave,

    Yes, me too. And thanks. Glad you like the preview. 🙂

    Mark,

    Absolutely, I'd say that it is best suited for small things such as overlays, or fading in and out things. PNGs can be suitable some times, but like Tanny states. there are problems with backwards compatibility for IE.

    Riddle,

    I use a plugin for replacing abbreviations. and that can sometimes cause those problems. It's ok in the web site, but in certain feed readers you can unfortunately get upper-case letters (since no styling is sent along). Sorry about that.

    Tanny,

    Well, they clear type is definitely an annoyance as well.

  • Note that you can also write a shortened form:

    #my-poor-MS-element {

    filter: alpha(opacity=80);

    }

    … which is a marginal improvement in syntax.

    Also to note is that, this proprietary MS syntax fails the W3C validator with a "Parse Error opacity=80)" error.

    I know it's not always feasible but whenever possible I've stopped trying to accommodate MS browsers. My sites will work in IE but if people want the 'extra touches', they need to use a standard browser. It's a nice bonus when people do switch and notice all the additional visual aspects of the site.

  • Embrace, Extend and Extinguish

    If all clients realize how much extra they had to pay to get their sites working in Internet Explorer, perhaps THEY would become advocates of change for the better of everyone.

  • Robert Nyman says:

    Aaron,

    That's true, but as far as I know, that syntax is not recommended, since the performance with it is not as good as the progid approach.

    Morgan,

    Well, I guess we need to start telling people how much extra it will cost if they want it to work in certain web browsers who doesn't adhere to general standards.

  • To be fair as none of the IE examples will validate and need to go in specific styles for each version of the browser anyways it's no real biggie that there is a different version for IE8 compared to others…

    Annoying they couldn't just go with opacity like the other people though (which would have validated) but I guess time constraints and the like meant they had to do it.

  • Robert Nyman says:

    Ross,

    That’s really my point. The syntax is a mess, sure, but I’m arguing that they could just go with opacity, and, if necessary, connect it to their filter implementation behind the scenes. No need to put it in the face of developers.

    And definitely, it will be a number of extra CSS files for minor issues that really shouldn’t be any issues.

    Kamal,

    Oh, absolutely. The problem with only using proper code, though, is that Internet Explorer has such a giant market share, and naturally our clients would like their web sites to work in the most-used web browser, so we continue to waste time and their money on adapting, adapting and adapting.

  • Kamal says:

    Microsoft is just trying to create proprietary stuff as much as possible even while there so many standards that they could just follow. I think this "opacity" is just one example of this.

    The easiest option would be to spread the word and create our web sites only with the standard/accepted tags and options. Then one day Microsoft will have to adopt to the standards since IE is not displaying major portion of sites in correct format causing users to switch to Firefox like browsers.

  • […] Nyman slÃ¥r an vad som liksom är Microsofts kärna i You Want CSS Opacity To Go With That? Well, Suit Yourself. Kortfattat behandlas hur CSS ska hantera opacitet enligt specen, samt vad som är Microsofts […]

  • Robert Nyman says:

    Nick,

    We’re all fine, thanks! 🙂

    Right, it used to be on their agenda. In regards to DHTML Behaviors, I know lots of people used to implement them as IE-specific fixes as well; not very common nowadays, I think (but then again, probably more common than I think 🙂 ).

  • <blockquote cite="http://www.robertnyman.com/2008/09/16/you-want-css-opacity-to-go-with-that-well-suit-yourself/">I’m not sure, but feel fairly sure in stating that Microsoft’s suggested filter approach is not submitted to the W3C…

    Microsoft's filter documentation used to say something like "This property has been submitted to the W3C as a proposed addition to CSS" (this was in the late 1990s – early 2000s).

    It now simply says that "There is no public specification that applies to this property," so it seems that they've given up on the idea of getting it included as an official CSS property.

  • Robert Nyman says:

    Nick,

    Hey, how's it going?

    Now when you mention it, I have a very vague recollection of seeing something like that too. But yeah, apparently they just let it go then.

  • Things are good thanks, Robert – hope you and your family are all well 🙂

    They had the "submitted to the W3C" blurb all over the MSDN documentation of their proprietary stuff for years, but finally got rid of it as part of the general tidying-up of the docs that accompanied the release of IE7.

    IIRC, DHTML Behaviors were also submitted as a proposed recommendation to the W3C, but quickly died a death. 😉

  • Ernesto says:

    There is a work around for certain IE versions to make not all child elements transparent. By adding position: relative; to a child element those IEs won't opacify the child. Yet another wicked behaviour.

  • Robert Nyman says:

    Ernesto,

    Funky, I did not know that! Thanks!

  • Note that in IE8b2, you need to put the -ms-filter (IE8) before the regular filter (IE6-7). See http://blogs.msdn.com/ie/archive/2008/09/08/micro… for details.

  • Robert Nyman says:

    Greg,

    Absolutely, that's true. But since they stated that it was a bug and were to fix, I didn't put any more thought into it, really. But thanks for pointing it out!

  • In case you are interested I found this workaround about elements we want to be *non* transparent inside transparent ones. It's a *workaround* and not a clean solution, but I mention it mostly as food for thought 🙂

    link: <a>Non-Transparent Elements Inside Transparent Elements (CSS Tricks)

    Cheers

  • Robert Nyman says:

    Nikos,

    Thanks for sharing!

    While that solution is some interesting thinking, there are moments (more regular occurances in scalable web application scenarios) where having the element outside of the fading element is just too much of a hassle.

    Besides, with font resizing and such, it will never be a 100% solution to a problem I'm sure many would like to solve.

  • Dan Tilley says:

    This reminds me of when Microsoft brought out Outlook 2007 and made the bizarre decision to use Word as their HTML renderer! Even IE would have been acceptable (as it was in previous Outlook versions), but now we have to make our HTML newsletters work in Word, as well as all the other, much easier, formats. Background images anyone? Not any more…

  • James says:

    The instructions stated here for opacity in IE 5-7 are different from those mentioned at W3Schools (although the instruction I saw at the latter is specifically for images). I've tried both pieces of code for a heading text and find that neither work. Have I missed something?

  • Robert Nyman says:

    Dan,

    Yeah, one more weird decision…

    James,

    Impossible to tell, but with this approach, you will get opacity for background and text colors.

  • Don Carr says:

    I'm glad MS doesn't make light bulbs and power plugs. We'd have to change our lamps and wall sockets every couple of years, or maybe just keep one "Microsoft" outlet and one "Microsoft" lamp.

    We needed a pause button to come up over a little slideshow, with opacity .5, as you rolled over it. Oh and also you needed to me able to copy the picture normally (right click or ctrl click). Honestly, it took longer to make the little play and pause buttons in Photoshop than it took to add the feature into a test page and have it work wonderfully on Safari, Opera, Firefox, Camino, Seamonkey on Mac and SeaMonkey on XP and Vista. It's taken me 2 weeks off and on trying to get this thing to happen in IE. Still no luck.

    http://www.megalodon.com/pauseTry3.html

    I just this evening pasted in the MS-recommended opacity CSS you posted in your article. It just comes up full opaque in IE. I think it has something to do with it being an image element it's playing over, but not sure. The earlier version worked

    http://www.megalodon.com/pauseTry2.html

    but that was before the requirement came down of needing to allow copying of the image. This one used a div positioned (:absolute) over the img to fire the mouseOver, instead of using the image element, which is what pauseTry3 uses. I had to add a 1×1 transparent background to the div to make IE actually fire the mouseOver (worked everywhere else of course).

    Is there some IE problem with using transparency over an image element?

    I feel that Microsoft's design philosophy is "slap it together and go on to the next jumping paperclip." Good design doesn't sell Windows boxes.

    Great article.

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • superdave says:

    i have the latest alpha google chrome (not the developers beta) and opacity doesn't work at all. text is completely unreadable. and it's long past april the 1st.

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • Robert Nyman says:

    Don,

    Sorry for a late reply. I'm sorry I can't help you, but there are definitely some weird things going on with transparency in IE…

    superdave,

    Not sure about the state of Chrome, but the version of WebKit it's based on has, as far as I know, supported transparency for quite some time.

  • […] any difference, I replaced the PNG image with a background color and opacity via CSS (and used the ridiculous code to get opacity in Internet Explorer). We deployed the code and awaited the news of any […]

  • […] The CSS for this is pretty straightforward, if you leave out (as I do below) the cruft needed to make Internet Explorer understand opacity: […]

  • Ah-men to all your complaints re: Microcrazy's thumbing their noses at CSS standards, then pretending they'd changed their ways with IE8, then having IE8 fail to support the standards compliant opacity style code others do and CSS3 specifies! I hope Jobs gets out an Apple ad ridiculing this pretend standards compliance that is actually just passive aggressive bullcrap on the part of Micronuts.

    How are we supposed to use their opacity properties in DHTML? I need to be able to refer to their CSS style properties and make dynamic changes in Javascript, but their opacity code is a travesty with no DOM CSS style properties to be found anywhere. Sigh . . .

  • Robert Nyman says:

    css-resources,

    Yeah, it really is a hassle…

  • Alan Hogan says:

    Mark – that’s where RGBA comes in to play.

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • […] problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child […]

  • Danny says:

    You split your infinitive.

    "to stubbornly refuse"

    should be

    "to refuse stubbornly"

    Fnarr, fnarr!

  • Robert Nyman says:

    Danny,

    I like that kind of splitting. 🙂

  • jack says:

    FILTER: progid:dximagetransform.microsoft.gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#cecfde);

    The above code only works in Internet Explorer.

    In Firefox,how to do?

  • Jack says:

    Oh…

    How to apply it to the button style?

    Thank you.

  • Robert Nyman says:

    Jack,

    Play around with the CSS code and see how it works out for you.

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • Fenizelib says:

    ??????? ??????? ???, ??????????? ????????, ??. ?????? ?????? ???? ?.??????, ???????????? ????????? ???????? ?????? ? ?????????? ? ?????????? ??????
    [url=http://law-1.ru/] ??????????? ?????[/url]

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • And 3 years after this article was first written Internet Explorer (at least version 8 and below – i.e. the majority of the market) Still does not support the opacity property.

    Microsoft are at least allowing for web standards and developments in CSS3 and HTML5, but doing things their own way will not win them friends however many iterations of IE they produce.

  • Robert Nyman says:

    mOxby,

    IE9 does support opacity, RGBa and HSLa, though.

  • […] that plays nice in all browsers is a rough topic, educate yourself if you need […]

  • Politrad says:

    I can’t get Google Chrome to show the facebook “like box” as transparent. Any ideea? IE and Firefox both work fine.

  • Robert Nyman says:

    Politrad,

    Sorry, no idea why that might be.

  • Chris says:

    Four Years and counting.
    Please never remove this awesome thread as I have lost count of the number of clients I have used this to inform of this delightful situation.

Leave a Reply to ??jQuery????????? « zhuohang Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.