This post is about the clarification of the
shape-outside property regarding active areas and proposed expansion of separate property.
Are there any plans modify the active area of the DOM to improve user interaction for elements like buttons?
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.
I know that
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
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.