[css3-images] Composing generated images

Image Values defines the cross-fade() function, which takes two source
<image>s and produces a composite <image> as a result.  Potentially,
these can be nested, like "cross-fade(cross-fade(img1, img2, 30%),
img3, 50%)", which gets somewhat confusing.  This will get worse when
we introduce more image-pipeline functions, like filter() in the
Filters spec.  Nested image-pipelines like
"filter(cross-fade(url(foo), filter(url(bar), blur(5px)), 50%),
sepia())" are very difficult for humans to parse or even just type
properly.

It doesn't seem like we need this much complexity in CSS.  We should
be able to lean on SVG to handle the more complex cases, where you
have a more explicit structure and the code is just generally easier
to read.

As such, I propose that we go ahead and disallow this kind of thing.
I'll define a <base-image> type that is produced by functions like
url(), image(), and linear-gradient().  Pipeline functions like
cross-fade() or filter() will be defined to only take <base-image>s as
input, and will produce <composed-image>s as output, so by definition
you won't be able to nest them.

Thoughts?  Are there strong use-cases showing simple, common things
that you can only do by nesting pipeline functions in CSS, and that
can't be done more easily in SVG?  Otherwise I'll make this change.

~TJ

Received on Monday, 23 May 2011 21:40:46 UTC