Summary

This post is about the clarification of the shape-outside property regarding active areas and proposed expansion of separate property.

Question

Are there any plans modify the active area of the DOM to improve user interaction for elements like buttons?

Use-case

An interface designer would be to create a page interface where each elements hover and clickable active area matched the shape of the interface element they wanted.

Explanation

I know that border-radius and border-corner-radius have gone some way in helping this however I would like the same flexibility as shape-outside has to control the active area of the elements.

I really think this would be advantageous with the likes of web components; please do let me know if I have missed this in some of the latest proposals. I could only find one reference to ‘interactive area’ on the W3C site in reference to border-radius the latest CSS-shapes module doesn’t mention it.

The latest Webkit nightly prefixed implementation has an interactive area on hover that copies that of the shape-outside - Example

So I would propose an interactive-area property which has the same definable properties as clip-path and shape-outside separate of impacts to floating and focused purely on the area of interaction for event bounding areas.

With that, it would likely need the ability to be animatable which is likely the reason this doesn’t exist already, we all know the issues surrounding animating border radius on hover. I think the browser would need to have the ability to have a keyword perhaps similar to initial that gives a clear indication of the active area which could be used in certain stages in animation to mitigate the risk of the users pointer(or similar) exiting out of the active area.

@tabatkins would you be able to shed any light on this as a feature but also clearing up the specifications to highlight “interactive area” impact per each property.

I’m sure its another case of me clearly missing something.

@tabatkins while I have your attention today, is there any intention to expose this sort of interface into CSS at any point also?

The “interactive area” thing is really just a subset of the “what the hell is hit testing” work that needs to be defined at some point. It should fall out of us defining all the necessary stuff for hit-testing.

I’m not quite sure what you’re asking about regarding “this sort of interface”.

Ah just stumbled upon the hit testing article on W3C, it doesn’t add any more to what I was after despite highlighting further the issues that needs aligning.

So by the interface I meant a way of defining the shape of the “interactive area/hit testing boundary”. I assume the answer this would come out of that work.

However certainly I would like to be able to make custom shape paths in HTML/SVG etc. Much like the new tab button in Chrome, I would love to be able to make this in one element with a custom boundary for the pointer to activate the hover effects.