[css4-color] @color Custom Color Keywords

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.

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;
  }

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()’.

Received on Thursday, 16 September 2010 18:26:35 UTC