paintAPI (houdini)

[jsnkuhn]

Description

from spec:

The CSS Paint API is being developed to improve the extensibility of CSS.

Specifically this allows developers to write a paint function which allows us to draw directly into an elements background, border, or content.

from Mozilla:

This specification allows developing prototypes of new graphical CSS features and provides an escape hatch for developers when the existing features aren't good enough for a particular piece of a web page.

Rationale

chromium: implemented
safari ("in development"): https://bugs.webkit.org/show_bug.cgi?id=190217
firefox ("under consideration"): https://bugzilla.mozilla.org/show_bug.cgi?id=1302328

• There's a polyfill (https://github.com/GoogleChromeLabs/css-paint-polyfill)
  but must admit that it hasn't performed so great for me. Sometimes just flat out doesn't respond in Firefox at all. Maybe because it piggy backs on -moz-element() which isn't fully implemented in FF? FYI, have filed some bugs for the polyfill and got responses/fixes from the dev

Including the polyfill sometimes kills the benefits of the paintAPI. One of the big paintAPI wins is complex images in a small size. If you have to include an extra file download (the poylfill) to make it work than the overall file size associated with the worklet becomes larger and you might just be better off using an image. Cross browser support would fix this.

• https://houdini.how/
  Lots of demos. Chrome folks are using paintAPI to polyfill native material UI bits not yet available in CSS

• personally attempting to make a "full" polyfill for the CSS corner-shape spec (which has been stalled for about 10 years at this point) with the paintAPI. Got to a point working on the worklet where I was spending more time trouble shooting bugs with the polyfill than working on the worklet itself. Considering making a v.2 of the worklet just for fully supported browsers. Thinking in the future v.1 (with the polyfil fill) can just be replaced. Work in progress demo: https://jsnkuhn.github.io/corner-shape/

Specification

https://drafts.css-houdini.org/css-paint-api/

Tests

lots and lots of tests:

https://wpt.fyi/results/css/css-paint-api?label=experimental&label=master&aligned&view=subtest

[foolip]

In the MDN short survey on CSS & HTML, "Custom Paint API (Paint Worklet)" was selected by ~11% of survey takers, putting it in the bottom third of the 20 options. (There is some uncertainty as with any survey data.)

[nairnandu]

Thank you for proposing paintAPI for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. This should not be taken as a comment on the technology as a whole, and resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

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

Posted on behalf of the Interop team.