Re: W3C 'CSS3 module: Color' Working Draft dated 19th February 2002

fantasai writes:
> Tantek Çelik wrote:
> >
> > text-decoration-opacity
> 
> I think text-decoration can be fairly grouped with text, especially since it
> doesn't have a separate color property, either. (And if there were separate
> opacity properties, border and outline opacity could have an initial value of
>  <foreground-opacity>, just as border-color has an initial value of <color>).
> 
> > It is much simpler to introduce 2 new color value types which can then be
> > used with all properties that specify a color, rather than add 5-9 new
> > properties.
> > 
> > In addition, the new color value types permit controlling the opacity of
> > these pieces of elements independently of elements' children, which the
> > opacity property does affect.
> 
> Which shows the fundamental problem with declaring rgba and hsla the
> solution to separating background and foreground opacity.
> 
> Suppose I have a <div>. I want the the <div>'s background to be translucent,
> but it's text should be opaque so it's easily readable. It's a reasonable
> request, no?
> 
> <div class="sidebar">
>   <p>Paragraph text.... <a href="file.html">Link</a>... So <strong>DON"T
>      FORGET...</strong> etc.
>   </p>
> </div>
> 
> Your suggestion would be to set the background as a transparent color. Thus:
> 
>   .sidebar {
>       background: rgba(255, 255, 0, .5);
>   }
> 
> Which works fine, except I also happen to have these rules in effect:
> 
>    :link, :visited {
>       background: #FFBB00;
>       color: #000033;
>    }
> 
>    strong {
>      background: #FF0000;
>      color: #000000;
>    }
> 
> So the background on the link and emphasized notice is opaque. This is not
> according to my design, and IMO, it looks bad. So now I have to write separate
> rules for any elements in a sidebar, adjusting the background color's opacity
> accordingly. This isn't much of a problem if I only have to deal with sidebars,
> and only with links and strong emphasis. However, using this approach with a
> complicated stylesheet and a large variety of elements is inelegant and prone
> to mistakes.

Good point. On the other hand, maybe you *do* want to have your links
opaque, because they don't stand out nearly as much when the
background is blended. And maybe the sidebar has 'background:
rgba(255,0,0,0.5)' and you need a new rule for strong inside a sidebar
anyway.

You also seem to assume that the background of the link *replaces* the
background of the sidebar, rather then lie on top of it (i.e., red
blended with the window background). Or at least that
'background-opacity' would inherit (i.e., red blended with yellow and
with the window background). The former, I believe, is against what
CSS1 says, the latter would probably lead to more color blending than
you bargained for:

    <body style="background: #99F">
    <div style="background-opacity: 0.5; background: #FB0">
      <p style="background: #FF0">
        <em style="background: #003">
          what background do I have?
        </em>
      </p>
    </div>

It's not dark blue, it's more like olive.

Some examples:

Here is your example with inherited background opacity:

Here is your example as the current CSS3 color module would render it:

Here is the example I gave with inherited background opacity:

Bert
-- 
  Bert Bos                                ( W 3 C ) http://www.w3.org/
  http://www.w3.org/people/bos/                              W3C/INRIA
  bert@w3.org                             2004 Rt des Lucioles / BP 93
  +33 (0)4 92 38 76 92            06902 Sophia Antipolis Cedex, France

Attachments

Received on Friday, 29 March 2002 09:13:19 UTC