Cross-Browser Transparency via CSS

TaiPhanMem.org – #1

This CSS is good, but it has a small problems with validating. It is not validated by W3, causes of filter, -khtml-opacity and -moz-opacity attributes (W3 accepts only opacity attribute, and only in CSS3).

Simon Sigurdhsson – #2

For standards compliance, use only the last rule and have it fail in IE and some others, or use the fixed background trick if possible. (Is extensibility defined in CSS?)

Simon – #3

@ Simon Sigurdhsson :

Conditional comments for IE should ensure standards compliance.

Unfortunately, without using a browser detection script server-side or client-side to serve the non-standard CSS to Mozilla and kHTML, you’ll have to use CSS hacks to target these browsers.

STL

H5N1 – #4

A trick for standard compliance?
Different css loaded via CSS browser detection or XSLT! :)

Cooltad – #5

@TaiPhanMem.org:
Is proper validation really that big of a deal? I mean, seriously, what honestly matters is that the code works well with everything. Validation should be a secondary priority.

Cooltad – #6

Not to double-post but I managed to find the ‘blackhole’ link in Firefox by simply disabling CSS. So I’d prefer I don’t get banned. My IP starts with 76.111…

You have fallen into a trap!

There is nothing here for you. So what are you doing here? Go home.
Our robots.txt file explicitly forbids your presence at this location.

Please note that the following Whois data will be reviewed carefully.
If it is determined that you suck, you will be banned from this site forever.

76.111.!!.!!!
Comcast Cable Communications, Inc. JUMPSTART-5 (NET-76-96-0-0-1)

Comcast Cable Communications, Inc. DC-27 (NET-76-111-0-0-1)

# ARIN WHOIS database, last updated 2009-01-29 19:10
# Enter ? for additional hints on searching ARIN’s WHOIS database.

Simon Sigurdhsson – #7

@Cooltad: True, validation is not top priority, but IMO proprietary stuff should be avoided, since they lead to a non-standardized mess – making life difficult for everyone.

Bill Brown – #8

There’s also this lovely little collection:

<style type="text/css">
div.bg-trans
     {
          border:5px solid #000000;
          /* FF2 &amp; Opera Hack */
          background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7DMAAAAASUVORK5CYII=);

          /* Safari and FF3 support CSS3 syntax already */
          background:rgba(0,0,0,0.8);
     }
</style>
<!--[if IE]><style type="text/css">
/* For Your IEs Only */
div.bg-trans
     {
          background:transparent;
          filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#DD000000,endColorstr=#DD000000);
          zoom:1;
     }
</style><![endif]-->

Demo: http://www.webdevelopedia.com/better_opacity.html

khaled – #11

Hi just had a look at the opacity in i.e. and apparently there is a problem in getting it to work in both ie 7 and 8. They have a solution on
www . quirksmode.org/css/opacity.html

.opaque {
       // first!
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
       // second!
       filter: alpha(opacity=50);
}

I havent used i.e. 8 yet so its not a big problem but might as well fix things now for the future.

Spencer Barfuss – #13

The only problem with the above mentioned hacks and tricks is that it doesn’t prevent the children within a parent element from having the transparency applied as well… in IE, that is.

I recently found a blog post that talks about preventing children from having the same transparency applied as the parent, but for some reason, it’s not working for me within IE Tester.

Here’s the link: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Bill Brown – #14

@Spencer

http://www.webdevelopedia.com/better_opacity.html

Spencer Barfuss – #15

@Bill Brown

Thanks, Bill. I was looking at your 2-digit prefix DD, and after reading the other article that I posted, I thought that maybe that wouldn’t work since he suggested that the differing opacity level required a unique 2-digit prefix before the 6-digit color hex value. Anyways…

In regards to the hack for Firefox 2 and Opera, is that simply a copy and paste code, or is it unique depending upon the image? I just need to know if that’s something that I can simply copy and paste for every instance.

Thanks for your help, Bill.

Bill Brown – #16

@Spencer

I assume you’re referring to the percentage used in the RGBa assignments, as in rgba(red,green,blue,alpha)? The alpha suffix is used to assign the transparency of the color. You can use the rgba syntax anywhere you’d use another color value: text, border-color, background-color, etc.

In terms of the FF2/Opera fallback, I’m using the data-uri scheme which means I am feeding the base64 encoded value of a tiny png which FF2/O then translate into an image. This is not a simple copy and paste unless that png is the color and transparency you need. If not, you’ll want to find or write a base64 encoder.

Spencer Barfuss – #17

Is there a base64 encoder that you use, or could recommend? An online encoder would be ideal for me…

Thanks again, Bill.

Bill Brown – #18

@Spencer

http://www.opinionatedgeek.com/dotnet/tools/Base64Encode/
http://www.motobit.com/util/base64-decoder-encoder.asp
http://www.google.com/#hl=en&q=base64+encode+file&aq=&aqi=&oq=&fp=e8d6ef47431c6a4a

Hope it helps.
Bill

SohoInteractive – #19

We’ve tried many different approaches to this issue and so far this has been the best and most consistent one.
Thank you for sharing.

FeralReason – #20

Thanks for the ‘short’ post explaining how to do this.
Now — assuming I am trying to create a transparent background in my container div — is there a way to reset opacity to 1 for text elements, image elements, etc. within that div (so they show opaque) ? Just including css to set opacity to 1 within these divs does not seem to work. The opacity setting in the container CSS seems to override these