Hi,

when I'm programming style sheets for a whole web application I'm missing a
CSS feature to be able to reference CSS properties of other elements.


Let's say there is a background/foreground colour combination of:

BasicStyles.css:
----------------
body
{
background-color: white;
color: red;
}


I suggest to add a feature to CSS be able to reference these values in
another style sheet, e.g. to be able to invert the basic colours without
actually being required to *know* the explicit colour values. For instance:

ParticularStyles.css:
----------------
.emphasize
{
background-color: red;
color: white;
}


should become something like:

ParticularStyles.css:
----------------
.emphasize
{
background-color: body.color; -- using the computed colour of the body
element
color: inherited.background-color; using the computed inherited
background-colour
}


Axel Dahmen

In <d5p6dk$rnt$1@online.de>, Axel Dahmen wrote:

[color=blue]
> when I'm programming style sheets for a whole web application I'm missing a
> CSS feature to be able to reference CSS properties of other elements.
>
> I suggest to add a feature to CSS be able to reference these values in
> another style sheet, e.g. to be able to invert the basic colours without
> actually being required to *know* the explicit colour values. For instance:[/color]

What wrong with @import "BasicStyles.css"; in ParticularStyles.css ?

--
|":._.:"| http://habett.com/
| (=) | http://habett.org/
|\. | ./| http://www.roux.to/

Axel Dahmen wrote:[color=blue]
> when I'm programming style sheets for a whole web application I'm missing a
> CSS feature to be able to reference CSS properties of other elements.[/color]

Yeah, I've often wished for something similar. This topic has been
raised before, but in the absence of any changes to CSS and concommitant
changes to the browsers, the suggestion has simply been made to use
server-side code or a preprocessor to generate the desired CSS, with the
smarts built into the code or preprocessor.

Then let's start a fraction to suggest this kind of functionality. CSS3 is
under development, so it's the right time to suggest amendments.

I believe this to be a necessary feature. Particularly if you want to
provide a homogeneous design throughout several style sheets.

One typical application would be giving customers the option to change basic
styles (like body background-color) and to automatically have detail
elements match accordingly (like in the given example).

RFC
Axel Dahmen



--------------
"C A Upsdell" <""cupsdellXXX\"@-@-@XXXupsdell.com"> schrieb im Newsbeitrag
news:_dWdnT-Rh8uN3R3fRVn-1A@rogers.com...[color=blue]
> Axel Dahmen wrote:[color=green]
> > when I'm programming style sheets for a whole web application I'm[/color][/color]
missing a[color=blue][color=green]
> > CSS feature to be able to reference CSS properties of other elements.[/color]
>
> Yeah, I've often wished for something similar. This topic has been
> raised before, but in the absence of any changes to CSS and concommitant
> changes to the browsers, the suggestion has simply been made to use
> server-side code or a preprocessor to generate the desired CSS, with the
> smarts built into the code or preprocessor.
>
>[/color]

The requested feature doesn't necessarily require a parent style sheet or
prior CSS declarations of any kind as it refers to computed values.

I've just omitted to @import rule in the example.

Axel Dahmen

------
"Stephane Roux (HAbeTT)" <habett@habett.org> schrieb im Newsbeitrag
news:d381b1684d.habett@habett.habett.org...[color=blue]
> In <d5p6dk$rnt$1@online.de>, Axel Dahmen wrote:
>
>[color=green]
> > when I'm programming style sheets for a whole web application I'm[/color][/color]
missing a[color=blue][color=green]
> > CSS feature to be able to reference CSS properties of other elements.
> >
> > I suggest to add a feature to CSS be able to reference these values in
> > another style sheet, e.g. to be able to invert the basic colours without
> > actually being required to *know* the explicit colour values. For[/color][/color]
instance:[color=blue]
>
> What wrong with @import "BasicStyles.css"; in ParticularStyles.css ?
>
> --
> |":._.:"| http://habett.com/
> | (=) | http://habett.org/
> |\. | ./| http://www.roux.to/[/color]

Axel Dahmen schrieb:[color=blue]
> [Variables]
> Then let's start a fraction to suggest this kind of functionality.[/color]

Every other week there is such a proposal on www-style, of which very
few are thought through at all. They all get turned down, they don't
even get a reply from any WG member now. The most important reason is
simple: It's not implementable backwards compatibly. Another unresolved
issue is the cascade, it's too easy to have a variable overwritten badly
later on.

So if you are, as you wrote, *programming* your stylesheets, you can
easily do what you want with that programming language.

Furthermore, many instances can be solved by clever use of existing CSS
features, like grouped selectors or inheritance and maybe collapsing or
transparency.

> The most important reason is[color=blue]
> simple: It's not implementable backwards compatibly.[/color]

It doesn't matter if you add a new property or new values to a property. An
old application will never understand the new features. But it is important
to have the old application ignore the new feature and not behave
erroneously.

To make it backward compatible, any reasonable escape character may be used
to precede a computed back-reference as proposed, like:

h1
{
background-color: >body.color;
}

Old applications will interpret this like they would interpret any new
property, like e.g. "display: inline-block", i.e. they will not interpret
this at all.

[color=blue]
> Another unresolved
> issue is the cascade, it's too easy to have a variable overwritten badly
> later on.[/color]

My suggestion is not about variables but on using currently computed values
instead of constants. This should render this issue solved. -- No
programming. More or less it's as simple as just using run-time instead of
design-time.
[color=blue]
> So if you are, as you wrote, *programming* your stylesheets, you can
> easily do what you want with that programming language.[/color]

The feature request is not about programming, I'm just using current values
instead of constants. This would render creating style sheets far more easy.
E.g. you would not have to amend each and every element you assigned some
corporate colour to, when this corporate colour is changed by the design
department.

Currently styles are quite rigid and dependant because explicit values have
to be used with each and every element, making editing rather awkward and
complicated. Using computed back-reference values, a corporate colour would
only have to be assigned to some selector once and can then be used
throughout the whole website. It doesn't even need to be assigned at all, as
back-reference, like the one proposed, uses the currently computed value,
hence using whatever value is computed for the referenced selector.

[color=blue]
> Furthermore, many instances can be solved by clever use of existing CSS
> features, like grouped selectors or inheritance and maybe collapsing or
> transparency.[/color]

This would be like riding a horse from behind. Moreover, these suggestions
are clumsy and inflexible as well:

* Inheritance can not be used if you want to have *several*
properties share e.g. the same colour.

* If a designer would use grouped selectors, he might be
forced to create loads of groups having some same properties
and then he would need to assign a bunch of these groups to
any element. This would be more like designing a nuclear
power station than designing a website.

* Collapsing and transparency? So you actually want to put
design into code?

No, this can all much more easily be solved using a feature like the one I'm
suggesting.


Axel Dahmen

[attribution restored]

Christoph Päper <christoph.paeper@nurfuerspam.de> wrote:[color=blue][color=green]
>> Another unresolved issue is the cascade, it's too easy to have a
>> variable overwritten badly later on.[/color][/color]

Axel Dahmen <NO_SPAM@NoOneKnows.invalid> wrote:[color=blue]
> My suggestion is not about variables but on using currently computed values
> instead of constants. This should render this issue solved. -- No
> programming. More or less it's as simple as just using run-time instead of
> design-time.[/color]

You seem to have missed the issue of the cascade.

What happens when you cascade the author style sheet

body { color : black ; background : white ; }
h1 { color : silver ; background : >body.color ; }

with the user style sheet

body { color : white !important ; background : black !important ; }

? The H1 element is displayed silver-on-white, which isn't very legible.

That's why style sheets should specify an explicit color (not "inherit" and
not "transparent" and not a runtime value like you're suggesting) and an
explicit background (not "inherit", etc.) together.
[color=blue][color=green]
>> So if you are, as you wrote, *programming* your stylesheets, you can
>> easily do what you want with that programming language.[/color]
>
> The feature request is not about programming, I'm just using current values
> instead of constants. This would render creating style sheets far more easy.
> E.g. you would not have to amend each and every element you assigned some
> corporate colour to, when this corporate colour is changed by the design
> department.[/color]

I use the same preprocessor to generate my CSS as I use to generate my
HTML. I define the color scheme once, and then the preprocessor inserts the
specified colors where necessary. If I change the color scheme, then I
change it once, and the preprocessor handles the rest.

That's the advantage of using a programming language, rather than trying to
convert CSS into a programming language.
--
Darin McGrew, mcgrew@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, darin@htmlhelp.com, http://www.HTMLHelp.com/

"Timing has a lot to do with the outcome of a rain dance."

> You seem to have missed the issue of the cascade.[color=blue]
>
> What happens when you cascade the author style sheet
>
> body { color : black ; background : white ; }
> h1 { color : silver ; background : >body.color ; }
>
> with the user style sheet
>
> body { color : white !important ; background : black !important ; }
>
> ? The H1 element is displayed silver-on-white, which isn't very legible.[/color]


I don't see a contradiction in that. Using the current implementation
cascading can also have unfortunate constellations like:

body { color: black ; background: white ; }
h1 { color: darkred ; background: transparent; }

with the user style sheet

body { color: white !important ; background: black !important ; }


[color=blue]
> That's why style sheets should specify an explicit color (not "inherit"[/color]
and[color=blue]
> not "transparent" and not a runtime value like you're suggesting) and an
> explicit background (not "inherit", etc.) together.[/color]

Still values like "inherit" and "transparent" belong to the current
standard. What would you suggest to use e.g. on bitmapped backgrounds?

[color=blue]
> I use the same preprocessor to generate my CSS as I use to generate my
> HTML. I define the color scheme once, and then the preprocessor inserts[/color]
the[color=blue]
> specified colors where necessary. If I change the color scheme, then I
> change it once, and the preprocessor handles the rest.[/color]

I'm not using any pre-processor at all, neither for CSS nor HTML. That's the
advantage of a comprehensive standard. Again, using runtime-values instead
of design-time values is not programming. It gives the liberty to update
certain definitions (or CSS files, resp.) and have the other definitions
match these.

If a designer wants to provide custom skins for his website (e.g. e-shop
templates), it is a great advantage if the customers only need to provide a
simple updated basic style sheet, having all detail elements follow the new
colour scheme.

Now continued at:

http://lists.w3.org/Archives/Public/...5May/0059.html




------------
"Axel Dahmen" <NO_SPAM@NoOneKnows.invalid> schrieb im Newsbeitrag
news:d5p6dk$rnt$1@online.de...[color=blue]
> Hi,
>
> when I'm programming style sheets for a whole web application I'm missing[/color]
a[color=blue]
> CSS feature to be able to reference CSS properties of other elements.
>
>
> Let's say there is a background/foreground colour combination of:
>
> BasicStyles.css:
> ----------------
> body
> {
> background-color: white;
> color: red;
> }
>
>
> I suggest to add a feature to CSS be able to reference these values in
> another style sheet, e.g. to be able to invert the basic colours without
> actually being required to *know* the explicit colour values. For[/color]
instance:[color=blue]
>
> ParticularStyles.css:
> ----------------
> .emphasize
> {
> background-color: red;
> color: white;
> }
>
>
> should become something like:
>
> ParticularStyles.css:
> ----------------
> .emphasize
> {
> background-color: body.color; -- using the computed colour of the[/color]
body[color=blue]
> element
> color: inherited.background-color; using the computed inherited
> background-colour
> }
>
>
> Axel Dahmen
>
>[/color]