- From: Jim Kynde Meyer via GitHub <sysbot+gh@w3.org>
- Date: Mon, 06 Apr 2020 05:55:53 +0000
- To: public-houdini-archive@w3.org
jimkyndemeyer has just created a new issue for https://github.com/w3c/css-houdini-drafts: == [css-paint-api] Support for using paint() in element overlays == In https://drafts.css-houdini.org/css-paint-api/#intro there is mention of using paint() as filters, although that is not yet supported. If I understand the current spec, paint is limited to being used on `background-image` and `border-image`. I'd like to propose an additional "layer" of painting, namely the types of overlays that browser-based devtools show, e.g. how the box model appears in Chrome devtools:  A few key points: - The painted overlays need to be the last layer of paint such that the same effect as the devtools can achieved using alpha blending - Registering painting in the overlay needs to be non-destructive, that is it can't override existing css properties such as background image or border image as this will change the appearance of the element being highlighted using an overlay paint. Open question: Potentially a new CSS property is needed? - Multiple overlay paints should be allowed, e.g. registered using unique ids -- again to be non-destructive if multiple overlays need to be shown at once. Open question: how to register paint by multiple ids? A few example use cases: - In a browser based visual design tool or devtools, easily overlay a highlight on top of hovered/selected elements - In browser extensions, easily highlight elements without having to modify the DOM Adding this would remove a whole class of problems with doing overlays, e.g. calculating their position effectively, keeping them in sync with layout changes, and not having to insert additional DOM elements. Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/982 using your GitHub account
Received on Monday, 6 April 2020 05:55:56 UTC