CSS element() function

[BearCooder]

Description

CSS element() function renders a live image generated from an arbitrary HTML element.

The CSS Image Values and Replaced Content Module Level 4 introduces the element() function. This function was previously defined in Level 3 and so Firefox already has support for it, since its version 4,May 2011. To put it simply, this function renders any part of a website as a live image. As you see a DOM element rendered right in the browser, you’ll get an image of it. Every changes to that element will be immediately seen in real-time in the image, even text selection. Read more with really cool examples here

Specification

https://www.w3.org/TR/css-images-4/#element-notation

Open Issues

Chrome - https://bugs.chromium.org/p/chromium/issues/detail?id=108972
Safari - https://bugs.webkit.org/show_bug.cgi?id=44650

Tests

No response

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[jsnkuhn]

Just did a couple of searches of WPT and there do not seem to be any tests about element() as of yet.

Neither Mozilla or Webkit have any official listing of a standards position on element(). Although clearly at one point Mozilla was positive as it has a partial implementation that the standard is based on.

Mozilla unprefix bug: https://bugzilla.mozilla.org/show_bug.cgi?id=707106

Also no specific issues open on element() for the csswg. Lots of mentions in passing but not specific.

Something possibly for the "Other" category:

Google's paintAPI polyfill (https://github.com/GoogleChromeLabs/css-paint-polyfill) piggy-backs on Firefox's -moz-element implementation. In all honesty it preforms poorly....

For Safari the polyfill uses -webkit-canvas() (https://webkit.org/blog/176/css-canvas-drawing/) which seems to be their take on an element() like property although it seems to only support <canvas> references.

[BearCooder]

Thank you for the input, that is very valuable. I could not find tests either but assumed I searched wrong. It seems it does make more sense for the other category to submit. Do you want to submit it for the other category? Or should we better wait?

[jsnkuhn]

I think the better way to go is to propose each property individual. That way we can give the interop/browser vendor folks more specific info to look to make a call on each property on it's own. Then later they can make the calls about grouping things together. I believe this is how it worked last year.

[BearCooder]

You mean each property (element(), -webkit-canvas()) as own Investigation Effort Proposal?

[spartanatreyu]

A real-world application of element():

The sidebar/radar/minimap in this website: https://www.stefanjudis.com/today-i-learned/how-to-escape-css-selectors-in-javascript/

Compare scrolling, and interacting with the page in Firefox to other browsers.

[BearCooder]

An excerpt from @kizu blog:

I only recently started using Firefox, so I did not yet experiment with element(), but it was for sure on my radar for a while. An ability to reuse the visuals of some element on the page? Huh? This can be so powerful! And it is almost impossible to work around otherwise (except for some very specific cases where we could use -webkit-box-reflect).

[wpt-interop]

Thank you for proposing CSS element() function for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

We could not find any tests for CSS element() function in the Web Platform Tests. Such tests are crucial for measuring interoperability status and progress. Once there are WPT entries covering this proposal, we welcome it being resubmitted for a future round of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.

[BearCooder]

Hello @dandclark, thank you for the explanation. Is it possible(and how) to contribute to WPT with tests? I just need a pointer in the right direction and will dig myself into it. Thanks!

[foolip]

@BearCooder that is absolutely possible! https://web-platform-tests.org/ tries to be comprehensive enough to get started even if you don't know WPT at all, and if you have trouble you can ask questions in https://app.element.io/#/room/#wpt:matrix.org.

I would suggest putting tests for this in a new element/ directory in https://github.com/web-platform-tests/wpt/tree/master/css/css-images.