[css4-images] @image rule

I'm not very sure that this proposal is a good idea, but I wanted to discuss it with the list, in case someone comes up with something better.

The problem: Many people want to add additional properties to CSS, in order to be able to manipulate (mostly) background images. For example, to apply opacity, transforms, blending modes to them. This need is even evident in the Blending Modes draft, which introduces background-blend-mode properties [1]. Others, (ab)use pseudoelements to achieve effects like transforms and opacity for background images [2]. As more properties are introduced in CSS, the need to apply them to specific images separately becomes even stronger.

Adding new properties for all these effects introduces clutter in the language and is not elegant. I propose a new @-rule that defines an image and manipulates it through a series of descriptors that correspond to a subset of CSS properties. 

Example syntax:

	@image foo {
		src: url(foo.png); /* Could be a gradient or image() or anything that currently returns an <image> */
		transform: rotate(10deg) scale(1.2);
		blend-mode: multiply;
	}

which could then be referenced by the `image()` function, perhaps by extending its grammar to accept an identifier, which doesn't seem to collide with anything in its current definition [3]. For example:

	background-image: image(foo);

The image produced would initially have the same intrinsic dimensions as the image referenced through the src descriptor (but the properties can change the image dimensions, e.g. a scale transform) and would be contained in the smallest rectangle that can fully contain the result, even when the result of the declarations within would be non rectangular (e.g. when border-radius, margin or a rotate transform is applied).

A way to think about it is the same image the element() function would produce, if applied to an empty block element with all of the following:
- the same width and height as the intrinsic dimensions of the image
- no padding
- background-image: the same image as the one referenced by the src descriptor and all other background properties at their initial values
- the same properties applied as the ones within the rule

Of course, the above description is problematic with images that have no intrinsic dimensions, so I'm not suggesting it as part of the normative prose, just as a way to explain what I mean here.

An initial set of properties that could be allowed within the rule could be:
- border-radius
- box-shadow
- border and its longhands
- width and height
- margin
- opacity
- transform and transform-origin
- filter
- blend-mode

Thoughts?

[1]: https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#background-blend-mode
[2]: http://nicolasgallagher.com/css-background-image-hacks/
[3]: http://www.w3.org/TR/css3-images/#image-notation


-- 
Lea Verou (http://lea.verou.me | @LeaVerou)

Received on Thursday, 3 May 2012 23:37:27 UTC