css validation and opacity
Dec 24, 2009 | perrymb | Return
Contrary to popular belief, you can have your css validate while still using opacity for rollovers, it just takes a little cheating. Of course I typically advise against cheats in web development, but this is one that simply cannot bring about any negative effects -so why not?
The opacity doesn't validate because it's supposedly only valid since css3, however I've yet to find a browser that won't display things correctly when using it. Perhaps I just don't have a pc old or outdated enough -but is that even a problem (the opacity, not my lack of old computers). If the only issue in viewing your site on a pc that old is the lack of opacity, you're in good shape. Anyway, on to that glorious validation.
This is actually incredibly simple, we're just going to put the css somewhere out of the crawler's reach -javascript! Much in the same way that search engine crawlers skip this stuff, so too does the validation bot.
<script type="text/javascript">
document.write("<link rel='stylesheet' type='text/css' media='screen' href='http://mediabanana.com/opacity.css'></link>");
</script>
Example
There you have it -put your css opacity in that css file, and you are cleared for validation.
<style>
img#withopacity:hover {opacity:0.7;filter:alpha(opacity=70);}
</style>
css opacity example, for those who are scratching their heads.
Return