[css-variables] using CSS Variables as a mechanism for parameterised content

In the OpenType specification, CSS Variables are used to pass in colour 
palette values into SVG documents that can be used to define glyphs. 
This is done by having the implementation apply a user agent style sheet 
that looks like:

   :root {
     --color0: rgba(...);
     --color1: rgba(...);
     ...
   }

so that you can then reference those variables in fill and stroke 
properties.  When I proposed this, it seemed like a natural fit.  It 
also looks like what you'd want when we eventually get around to 
supporting parameterised SVG documents (however we end up allowing 
explicit values to be passed in).

I've come to realise now though that this has a distinct disadvantage: 
because the computed values on the root element, and any elements that 
reference the variables, are different depending on the particular 
colour values being passed in, an implementation cannot easily have a 
single document loaded and referenced with different parameter values. 
Well, it could, but it would mean that each time you want to render the 
document you'd need to restyle it with the updated user agent style sheet.

This makes me wonder whether we should have a way to reference values 
from the outer document without having the particular values be 
reflected in the computed value of the property that's referencing them. 
  I don't have any concrete suggestions yet; Doug's SVG Parameters 
proposal used "param(some-name)" as the syntax.  The important part is 
that you could write say <path style="fill: param(some-name)"> and the 
computed value of 'fill' would be "param(some-name)", not the value of 
the some-name parameter.  This would allow the implementation to look up 
the value at rendering time, and avoid having to restyle the document if 
you have multiple references to the document using different colours.

Note that this works well for <color>/<image> values, as changing them 
would not require the document to be reflowed.  If we want to support 
parameterisation of other property types using a mechanism other than 
CSS Variables, I'm not sure whether we could make any improvement.

I'm interested to hear others' thoughts.

Received on Thursday, 4 September 2014 03:55:48 UTC