Cross browser CSS Transparency
I had to rip this off of Chris Coyier’s www.css-tricks.com because I want to be able to find it more easily.
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Also from the same post, this info defines what the different parts of this code do:
opacity: 0.5: most versions of Firefox, Safari, and Opera
This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.filter:alpha(opacity=50): Internet Explorer
-moz-opacity:0.5: Netscape
You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.-khtml-opacity: 0.5: old versions of Safari (1.x)
This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
NEXT
CSS Shorthand
| Print article | This entry was posted by George on July 31, 2009 at 8:42 pm, and is filed under Web Design. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
ABOUT COMMENTING ON THIS BLOG
Comments are moderated by a human and will be approved if they bring value to the discussion. This means comments are on topic, relevant and useful. Here are some ways to insure your comment is rejected, marked as spam or will be edited (at my discretion):
- Using keywords, business names or website names in the Name field
- Putting a spammy site/page in the Website field
- Foul, abusive or discriminatory language
- Comments for SEO only purposes