Feb 07
27
Validate CSS style “opacity”
39% 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>
Subscribe to Comments
Weekly Stats Chart
Wordpress.org
SchizoDuckie said,
February 27, 2007 @ 4:49 pm
It’s time people stop caring about validating by the validator. Just make sure your shit works and stop whining!