Exciting things new in IE9, CSS3:
Means Im going to use these by default, provide degraded versions to older IEs, such as no curved corners.
Opacity (no more little trans pngs)
Border Radius (woo!)
Box shadow (nice)
RGBA colours, another neat way to get transparency.
It dosn't support CSS gradients yet.
sooo... opacity best practice??
from: w3c http://w3schools.com/Css/css_image_transparency.asp
/* for IE >9*/
filter:alpha(opacity=60);
/* CSS3 standard, works in IE9*/
opacity:0.6;
but here is a note about IE8 in compatibility mode from http://www.quirksmode.org/css/opacity.html
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
filter: alpha(opacity=50); // second!
If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.
Which I just tested, and its not true? IE8-as-IE7(compatibility mode) still shows transp. even without the first line, maybe because doctype is strict? (read somewhere)
also random note, for IE6, 7, they need the element getting transparency to "have layout".
**BACKPEDAL**
The children of the opacity element inherit the opacity settings. Just tried it on a menu and makes my menu list items pink rather than white because some of them are over some red graphic. Not ideal. The fix here involves messing with the markup structure, not ideal for CMS skinning, especially just to use a tricky CSS3 property. Back to transparent pngs for now... sigh. Heres the 'fix' for the situation that might come in handy in certain situations if you're set on using the opacity property.
http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html
Posts
