opacity is well-covered in all modern browsers, and can be achieved in all IEs with a combo of a filter for IE6/7 and -ms-filter for IE8.
Note that opacity cascades to all elements within the element you’re styling. Meaning, if you set a div to have a 50% opacity, everything inside of that div will also have 50% opacity; and there is no way to give something 150% opacity to force it back…
If what you’re looking to do is create a semi-transparent background, see the section on rgba.
The Options
-
Internet Explorer Filter
Pros:
- Pure, valid CSS, no JS, no HTC, no tricks, no hacks!
- IE8 offers vendor prefix (-ms).
- IE6/7 use the proprietary
filter, so can easily put that into IE-only stylesheet. - Easy to target specific browser versions if using HTML5 Boilerplate
<head>conditional comments.
Cons:
filteris invalid, so stylesheets will not validate, if you care about that.- At least one more line of CSS for each feature…
-
eCSStender
Pros:
- Eliminates need for IE Filters
- Extensions are modular, so you can (more-or-less) only add the features you need for each page.
This extension also handlesrgbaandhsla, so if you plan to use those on the same page, this is already there.
- Open-source, so limited extensions will hopefully grow if this catches on (or you could build your own!).
Cons:
- If added to a site, all browsers get the additional weight (eCSStender Core is 18.8kb, and the extension is 3.86kb, minified).
- Somewhat expensive, as it examines every rule on every stylesheet on the page, comparing each to whatever extensions are available.
- Implementation requires JS; without JS, nothing happens.
- Extensions are still somewhat limited (though they do cover probably the most common CSS3 features).
The Bottom-Line
I would say pure CSS (meaning IE filters) is always the way to go, but IE Filters will break validation. eCSStender validates, which is great, but also adds more weight to all browsers (not just those that need the help).
Leave a Reply