Re: [css4-color] @color Custom Color Keywords

On Thu, Sep 16, 2010 at 11:26 AM, Christoph Päper
<christoph.paeper@crissov.de> wrote:
> Variables or constants in CSS are very often requested. Authors want them most often for colors or for lengths (or both and more of course).
>
> We now basically have this for typefaces with ‘@font-face’ wherein you can define your own keyword for ‘font-family’. Although colors work a little different we should be able to apply the same concept.

@font-face does far more than a simple variable substitution; it
defines a complex object that CSS can then use transparently.

Though you *can* (ab)use @font-face to do variable-like stuff for
fonts specifically, that's not what it's meant for, and the syntax
does not make it easy.

CSS Variables are a separate issue with their own justification.


> Style more like ‘@page’:
>
>  @color MyRed {
>    source: gradient("define me"), url(pattern.svg), url(pattern.png), red;
>  }
>  @color MyRed:text {
>    source: red;
>  }
>  @color MyRed:border(left), MyRed:border(right) {
>    source: hsla(0deg, 100%, 90%, 80%), rgba(90%, 5%, 5%, 80%), red;
>  }
>
> Style more like ‘@font-face’:
>
>  @color {
>    color: MyRed;
>    src: gradient("define me"), url(pattern.svg), url(pattern.png), red;
>  }
>  @color {
>    color: MyRed;
>    src: red;
>    color-application: text;
>  }
>  @color {
>    color: MyRed;
>    src: hsla(0deg, 100%, 90%, 80%), rgba(90%, 5%, 5%, 80%), red;
>    color-application: border-left, border-right;
>  }
>
> or
>
>  @color {
>    name: MyRed;
>    color: red; /* text */
>    background: gradient("define me"), url(pattern.svg), url(pattern.png), red;
>    border-left: hsla(0deg, 100%, 90%, 80%), rgba(90%, 5%, 5%, 80%), red;
>    border-right: hsla(0deg, 100%, 90%, 80%), rgba(90%, 5%, 5%, 80%), red;
>  }

Why are you mixing colors and images here?  CSS distinguishes between
colors and paint servers (a color can be a paint server, though, using
the image() function in CSS3 Image Values).

Also, are you intending this to do fallback between the comma-separated values?


> For better fallback, I believe this should work for static predefined color keywords (HTML/VGA and SVG/X11 names), i.e. not system colors, ‘transparent’ and ‘currentcolor’, maybe not even the 16 basic color names (and ‘orange’). After all, you can use font family names for ‘@font-face’ that would have worked with local resources:
>
>  foo {font-family: Helvetica, Arial, sans-serif;}
>
> can be rewritten as
>
>  @font-face {font-family: Helvetica; src: local(Helvetica), local(Arial);}
>  foo {font-family: Helvetica, sans-serif;}
>
> and older browser still use Helvetica if available.
>
> This doesn’t fix the request for lengths, but it solves one problem very neatly with existing techniques.
>
> PS: In ‘@font-face’ the font properties are reused as “descriptors” to describe the resource. ‘color-application’ tries to mimic that, but does so badly. The second variant looks better (and leaves out ‘…-color’, although ‘font-…’ is always present in ‘@font-face’).
> PPS: I have the feeling I had proposed something like that previously. Sorry for that if so.
> PPPS: The color values are very random, especially HSL and RGB don’t match.
> PPPPS: I’m aware that I violated the specified syntax for ‘hsla()’ and ‘rgba()’.

A context-sensitive "color" seems pretty weird to me.  It's odd that
attempting to use a particular "color" for color and background-color
would give different results.

I think this should just be addressed via a general Variables
mechanism.  I don't see much reason to special-case color variables.

~TJ

Received on Thursday, 16 September 2010 19:22:51 UTC