CSS Stupidity

Well I wasted a whole morning on this.  See I have an imagemap of the library I work at. Clicking on a section of the map brings up a description of a collection and a search box specific to that area (or a link to the relevant area on the webpage). I decided today that I wanted these pop-up sections to have a translucent background. After a whole morning fiddling around with -moz-opacity, alpha filter, and opacity I threw in the towel and reverted to my old opaque background. You see, apparently setting opacity in CSS automatically applies the same setting to child elements.  Which, under normal circumstances wouldn’t be a problem since typically you can specify a different value for these child elements, or add a class or id with the differences.  Unfortunately, in the current version of CSS, opacity (once set) can’t be changed in child elements AT ALL.  There are several workarounds but (transparent PNG, tricking the cascade, etc.), IMO, they are all just bloated code. This is especially true given that my desire for a translucent background is entirely ascetic and doesn’t impact the function of the feature at all.  I’ve seen several mentions of using javascript to set opacity but again that seems to me a violation of the whole principle of separating structure, style, and function. Blah!!

I look forward to some of the CSS3 element currently being worked on.  Border-radius and  and RBGA can not come fast enough.  Lord knows when CSS3 will be ready, or even fully implemented in other browsers though.  I haven’t been paying attention too closely myself but after today’s opacity debacle I’ll be sure to keep a closer eye on developments.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s