[css-variables] Re: Complete list of CSS keywords (for values)

Simon Sapin <simon.sapin@exyr.org>:
> On 10/07/14 09:49, Christoph Päper wrote:
>> … a site that aggregates all keywords and pseudo functions used as values …
> 
> "Shepherd" (…) has a database of all property definitions, their values, etc.

Thank you. I was able to extract the data I wanted, although I cannot verify its accuracy easily, because the anchor data, which I used, was quite heterogenous.

>> If there’s none, how does the WG keep track of keywords so as not to
>> reintroduce an existing one to a different property with possibly
>> different meaning? Swarm knowledge?
> 
> Having the same keyword have a different meaning in different contexts is not a problem. For example many properties accept an 'auto' keyword and give it very a different meaning.

‘auto’ is unproblematic for a human being, because it always means “do some default magic stuff”. Other keywords could be more problematic.

>> Disclosure: I wanted to quickly check whether there are pre-defined
>> keywords ending in suffixes that could be used as type primitives,
>> e.g. ‘-string’, ‘-name’ / ‘-label’ / ‘-font’, ‘-color’, ‘-size’,
>> ‘-length’ / ‘-width’ / ‘-height’, ‘-angle’, ‘-duration’,
>> ‘-frequency’, ‘-resolution’, ‘-location’ / ‘-address’ / ‘-file’ /
>> ‘-resource’ / ‘-image’, ‘-position’, ‘-lines’ / ‘-count’ / ‘-number’
>> / ‘-layer’ / ‘-depth’.
> 
> I don’t understand this, could you explain a bit more?

I’m considering to propose typed variables for level 2 of css-variables. I believe it could work with suffixes and would require neither the double hyphen nor ‘var()’.

With the help of Shepherd, I found the following strings as *suffixes* of predefined keywords: 

-adjacent, -after, -alignment, -all, -alphabetic, -alpha, -around, -async, -auto, -available, -baseline, -base, -before, -between, -block, -box, -breaks, -burn, -caption, -cell, -center, -character, -circle, -clip, -closed, -cluster, -column, -composite, -compress, -container, -content, -corner, -decimal, -decoration, -demand, -dodge, -down, -edges, -end, -evenly, -executed, -factor, -flex, -floats, -formal, -greek, -grid, -group, -ideograph, -image, -informal, -inner, -in, -inserted, -integer, -iroha, -item, -kana, -latin, -left, -level, -light, -line, -lr, -numeric, -only, -open, -orientation, -out, -overline, -override, -paged, -parent, -participation, -position, -quote, -repeat, -reverse, -right, -rl, -roman, -row, -shape, -side, -size, -start, -table, -tb, -text, -through, -underline, -under, -value, -width, -word, -wrapped, -wrap, -x, -y, -zero

Sadly, ‘-size’, ‘-position’, ‘-width’, ‘-integer’ and ‘-image’ are in that list.

Still, ‘-color’ is not in there, so something like this could work:

  :root {
    --main-color: #06c;
    --background: #F00;
    --bordercolor:#123;
    --text-color: 16px;
  }
  #foo h1 {
    color:                  main-color;  /* works */
    background-color:       background;  /* fails on parse, ‘-color’ missing */
    border-color:           bordercolor; /* fails on parse, ‘-’ missing */
    font-size:              text-color;  /* fails on parse, wrong variable type */
    outline-color:          text-color;  /* fails on compute, wrong value type */
    color:            var(--main-color); /* works */
    background-color: var(--background); /* works */
    border-color:     var(--bordercolor);/* works */
    font-size:        var(--text-color); /* works */
    outline-color:    var(--text-color); /* fails, wrong value type */
  }

Such humane variables would only be allowed for primitive value types that already can be expressed by keywords and author defined identifiers perhaps.

The CSS WG would just have to exclude certain suffixes (mostly the ones from my first list) from their repertoire for future keywords.

Received on Thursday, 10 July 2014 17:12:20 UTC