[css3-values][css3-images] element() function

Mozilla recently introduced support for a -moz-element() function,
which allows you to refer to an element by id and then use it as an
image.  It updates live as the element changes in the DOM.

This seems to be a very useful tool.  Probably the greatest use is to
be able to draw into a <canvas> and use that as a background for
something (this is also possibly with the webkit-specified
-webkit-canvas() function), but there are actually *tons* of wonderful
visual effects that can be done in a much less hacky way with this.
(Check out the MozHacks blogpost for cool uses -
http://hacks.mozilla.org/2010/08/mozelement/ - and the MDC entry for
some specifics - https://developer.mozilla.org/en/CSS/-moz-element .)

While all the uses right now are element-as-image, this also finally
offers the possibility of selectors on the RHS of properties.  At the
moment -moz-element() only accept id selectors, but one could imagine
it accepting an arbitrary selector and just grabbing the first matched
element, like a live version of the querySelector() function.  This
can then be used for other properties in the future; one use in
particular that I'm interested in is being able to specify an
arbitrary element as the "positioning root" for an abspos element.
(This is a feature-request from some of Google's app team people, who
want to do HTML popups for arbitrary elements, particularly in an
editting environment where you can't sanely make the popup an abspos
child of the element.)

I'd like to get this added to CSS3 Values and Units (as an <element>
type, or something similar), and then specified in CSS3 Image Values
as an <image> type.  I and Tantek volunteer to write the necessary
spec text.

I believe it is safe to add this to V&U right now.  Given that we
already have one implementation, and Webkit offers a similar ability
as well, it should be quite safe to add on the verge of Last Call.  If
necessary, we could add it as At Risk.

Thoughts?

~TJ

Received on Tuesday, 31 August 2010 16:26:52 UTC