RE: Introducing property codependency.

On Wed, 21 Oct 1998, Braden N. McDaniel wrote: (reorderd)
>> A BIG problem with CSS at the moment is the potential clashing of
>> colours. Any stylesheet which defines a few different background
>> colours and a few different foreground colours has to define
>> *every* possible combination separately.
> <shrug> Just about any style sheet, or set of style sheets, I've
> created that I would consider "robust" has at least one "monster" in
> the bunch. Such is the nature of CSS. The reality of "cascading"
> demands that one defensively specify any property on any element
> that might be important in achieving the desired visual effect. It
> gets long sometimes.
RIGHT!!! *THIS* is what I am getting at. This is what we should try to
solve.

I spent around an hour yesterday, after my post, trying to figure out
ways (syntaxes) of doing it.

> I kinda like the idea you're putting forth, but I don't think the
> example you've provided does a good job of illustrating its
> necessity. Context-specific selectors allow the result you're
> looking for (though the means is different). I'll grant you that it
> can get a bit long sometimes, but I'm really not sure that what
> you're proposing would be significantly more compact.
I haven't as yet proposed anything.

The challenge is to simplify a stylesheet like the following:

   P { color: black; background: white; }
   Q { color: black; background: yellow; }
   P A:link { color: blue; background: white; }
   P A:visited { color: navy; background: yellow; }
   Q A:link { color: blue; background: white; }
   Q A:visited { color: navy; background: yellow; }

...so that there are only four rules, but without compromising the
'safeness' of the rules. In other words, one cannot simply make it:

   P { color: black; background: white; }
   Q { color: black; background: yellow; }
   A:link { color: blue; }
   A:visited { color: navy; }

...since with this sheet we are faced with the possibility of another
stylesheet in the cascade applying a background to the A element, and
making the document.

Ok, so the above doesn't look too bad. It's only got two background
colours. My stylesheets have ended up sometimes with 6 or more
background colours -- and if just *one* of the inline elements has a
text colour, that means I have to list it SIX times!

With 6 different inline colours and 6 different background colours, I
need 36 different rules! It becomes UNMANAGEABLE!

(Note -- this isn't as academic as it sounds. Sitewide sheets may well
have this many backgrounds, with only two or three used per page.
There is no way to know which will be used, though. And inline styles
-- well, :link, :visited, :active, :hover, :focused, to start with.)

----------------
And now for some less relevant points...

> [snip color of links discussion]
> Which reminds me: How about adding an hsv() functional notation for
> color in CSS3? Yes, it's just a matter of convenience. But it
> *would* be convenient, and it should be trivial to implement.
Noted.

> I propose creating a small, transluscent (courtesy of PNG) simple
> icon. This could be used something like this:
> 
> 	A:link.external, A:visited.external {
> 		background-image: url("external.png");
> 	}
> 
> You'd prolly wanna add background-position and background-repeat
> properties at your discretion; I'd probably opt to have the image
> not repeated, and displayed at the far right of the text box.
Now would be a good time for me to point out that background-position
is currently not allowed on inline elements. This should, IMHO, be
changed. It has already been discussed, though.
See:
http://lists.w3.org/Archives/Public/www-style/1998Sep/0004.html

>> [1] You want to see what I mean? Look at my main CSS file:
>>    http://www.bath.ac.uk/%7Epy8ieh/media/homepage.css
> 
> In which you include:
> 
> #IE4GANGSCREENPAGE #GANGSCREEN {
>   background: black url(res://shdocvw.dll/ierocks.gif)
>   fixed no-repeat center center;
>   width: 414px; height: 352px; margin: 0em 0em 0em 1em;
>   overflow: auto; border: solid black medium;
>   color: white; padding: 2em; text-align: center; }
> #IE4GANGSCREENPAGE #GANGSCREEN PRE {
>   font: 14px "Verdana", "Arial", sans-serif;
>   color: white; padding: 0em; margin: 0em;
>   font-weight: bold; background: transparent none; }
> #IE4GANGSCREENPAGE #GANGSCREEN STRONG {
>   color: yellow; font-weight: inherit;
> }
> 
> /* I cringe at the specificity of those rules... */
> 
> Me too.<g> Part of what you have there is entirely superfluous.
> Since an ID is guaranteed to be unique for a document, giving an
> ID-selector a context is totally unnecessary. The above selectors
> could be simplified to
> 
> #GANGSCREEN { ... }
> #GANGSCREEN PRE { ... }
> #GANGSCREEN STRONG { ... }
No. In this case, the stylesheet is used by *every* page on my site. I
may have more than one gangscreen, but only one is IE's gangscreen.

>> [2] I won't bother citing examples, because every time I show an
>> example of how a new idea could be implemented, the discussion
>> becomes one of appropriate syntax rather than potential of the
>> idea!!!
> Whoops.<g> 
See what I mean!!!

-- 
Ian Hickson

Received on Thursday, 22 October 1998 06:13:09 UTC