[css-syntax, ideas-needed] Merge/inherit lists of values.

Consider some CSS property that accepts list of values.
As an example (treat it as hypothetical) 'background-image-transformation'
property
that accepts list of various image transformation "functions" or filters:

  background-image-transformation: hue(red) saturation(0.5) ...;

among list of filters I have flip-x() and flip-y() that do mirroring of the
image.

I've got a request to provide sort of inheritance for such property so for
these two
rules

div {
   background-image: url(arrow.png);
   background-image-transformation: gamma(1.4);
 }

div:dir(rtl) {
   background-image-transformation: flip-x();
}

and the markup:

<div dir=rtl>...</div>

used value of background-image-transformation will be this:

   background-image-transformation: gamma(1.4) flip-x();

I suspect that for implementation of such inheritance some change on
CSS grammar/syntax level is required.

I am thinking about something like !inherit modifier:

div:dir(rtl) {
   background-image-transformation: flip-x() !inherit;
}

Any other ideas?

I suspect that such inheritance feature could be useful for any other
properties that accept lists of values. For example 'background'
property that accepts lists of image definitions. In some cases
it could be useful to combine two or more such list rather than
to just override by heaviest rule.


-- 
Andrew Fedoniouk.

http://terrainformatica.com