Up until IE7 Microsoft haven’t provided support for PNG images which in turn makes it difficult to apply transparent page effects. In CSS you can set the transparency in different ways. To ensure that it works on most browsers use all of the styles listed below:
- opacity: 0.5;
This one is the official CSS3 method, at the moment it works in most newer browsers. - -moz-opacity: 0.5;
This one works in older versions of Mozilla and Phoenix/FireBird/FireFox. - -khtml-opacity: 0.5;
This is used by browsers that use the KHTML rendering engine, namely Konquerer on Linux and Safari on MacOS. - filter: alpha(opacity=50);
This one works only in MSIE.
The problem when including opacity to your stylesheet is that it wont validate since the tag is either browser specific or not yet approved as standard CSS. Designers and programmers like to see their code validate so they need a “fix” or workaround. The only way I know (at the moment) is using a tiny JavaScript. It’s not pretty and requires Java support from the browser, but it works. So until CSS3 is released you can apply the following:
<script type="text/javascript">
if (document.getElementById('SomeID')){
var oe = document.getElementById('SomeID');
// Set transparency to 50%
oe.setAttribute("style", "opacity:0.5;")
if (oe.style.setAttribute) //For IE
oe.style.setAttribute("filter", "alpha(opacity=50);")
}
</script>
It might not be the best coding standard, but the CSS will validate, and also your (X)HTML for that matter.
Note! getElementById refers to the elements selector ID, which means that you will not be able to modify CLASS selectors. The workaround above was implemented to validate my CSS when using the ID overlay in my add-on Lightbox.
Update: In order to hide your opacity settings you can do it even easier by simply adding the stylesheet containing the specifics like this:
<script type="text/javascript">
document.write('<link rel="stylesheet" type="text/css" media="screen" href="../css/opacity.css" />');
</script>
About Author
It’s time people stop caring about validating by the validator. Just make sure your shit works and stop whining!
Unfortunately for you people do care about validating their pages. Many of my clients insist on (at least) valid (X)HTML. Furthermore valid mark-up sends a signal to potential customers that you do care about details and accessibility.
I know the opacity style element wont break your site, but messy (X)HTML can.
However it’s easy to see that you don’t care that much given your 17 mark-up errors on your new frontpage (excluding your CSS)…
Thank you for sharing this code.
Better to use the CSS and not validate, I think.
opacityis recognised by pretty much every modern browser apart from IE now, so I would use:opacity: 0.5and then a conditional comment for IE:
filter: alpha(opacity=50)Your XHTML would still be valid, although your CSS would be invalid – albeit with good reason. There is a good article about validation here.
I don’t like to use JavaScript solutions unless absolutely necessary.
You’re right about browser recognition!
I just wanted to show one possible way around the CSS validator until CSS3 is released (as I mentioned in my post).
i just want to say thank you very much for this! i really appreciate you putting this code out there for people who want to validate their css and realize the importance of having nice validated code. i really do appreciate it and thank you very much!
I have better solution. Just add style=”opacity: 0.5;” to element which should be transparent (not to your css stylesheet). Of course – you must add it to all elements manually, but it’s valid xhtml 1.0, and CSS. No need for javascript :P.
seak1, I think you’ve misunderstood Wennichen. Even though the page validates as (X)HTML it will NOT pass the CSS validator.
So until CSS3 gets released the JavaScript workaround is the only way to validate both markup and style.
Oh! Yes, you’re right. It validates css stylesheet, but not whole page with css elements. Sorry for mistake.
It seems that IE7 loses the ability to do per pixel alpha (from the alpha bytes in a PNG image for example) when applying the alpha filter. I just tried it with an image that has a drop shadow within it, and the drop shadow turned totally opaque black! Man, why can’t IE just read the opacity value!?
I think we’ll have to wait for IE8 before we can expect the PNG issues to be solved. Fortunately more and more people are switching to safer/faster/more secure browsers all the time.
I understand your frustration, but there’s little we can do about it. It’s just Microsoft.
While not having tested this myself there might be a workaround to the IE7 opacity issue available.
Kyle,
Try adding “background: white;” to your CSS/style rules. I had the same issue with the drop-shadow rendered completely black, but this provided at least a workable result. I don’t have the eyes to say whether it’s a perfect solution .. but you might like (or at least be able to live) with the result. 🙂
It would work, only you’re missing out on the transparency effect… which is the whole point with this workaround.
have you guys tried validating the dominant search engine?
“Failed validation, 30 Errors”
what about the #1 internet portal?
“Failed validation, 34 Errors”
and yet everybody and their grandma uses these two services every day without issue. yet another proof that markup validation is big brother politics that most people just don’t bother with.
On the contrary. Neglecting markup validation IS big brother politics. Furthermore, most people doesn’t know (or have the time) to correct all errors and warnings.
Creating according to standards is merely done to illustrate that you a) have the skills required b) care about your audience c) and most likely are a perfectionist…
Why people constantly seams to get upset because someone provides insight and/or solutions to validating issues is beyond me. Shouldn’t you rather be focussing on all those giant internet portals that doesn’t give a s***!
Well, since opacity is supposed to be part of CSS3, I’d rather have my style sheet not validate (which I can easily explain to my clients) then having an ugly javascript work-around that won’t work if javascript is disabled.
As for IE6/IE7, conditional comments and different style sheets takes care of them.
Hi.. cool trick.. my CSS validates… however funny thing is now my HTML doesn’t 😛
I get this error message:
I put this code up in the head of the doc:
hmm my code isnt showing updocument.write('');
Anyways, it is just what you have up there.. pasted before the end head tag
Any ideas about why this doesn’t work?
Can you provide a link to a test page? It’s always easier to answer these questions when I can review the source myself…
Here is a simple method to get your css and xhtml to validate without the use of javascript. I am a firm believer that everything that can be done server side should be so here is a simple php solution.
the document.write solution is not a great idea because it keeps your xhtml from validating…this php php you have to do per browser but i have included all the major browsers in the example. this code works great in an include. for an example you can take a look at my site
once you have that in place create a very simple css file named opacity.css with your opacity css in it
i forgot to explain how it works … very simple validator is not a browser so it skips over the conditions…
also it looks like my example didnt make it into the previous post…
here is a link to a text file you can view
This is good article. but I’m not sure if user disable java script in browser than the CSS will affect page or not .
once you have that in place create a very simple css file named opacity.css with your opacity css in it
Actually, it doesn´t validate… not in xhtml 1.0 strict anyway…