[css-box] increase pointer target size independently of element layout #4708
Description
It's critically important that touch/click target sizes be adequate for an interface to be usable. But sometimes the visual needs of an interface element are out of step with its ideal pointer target size.
Some of the ways developers deal with this today:
- Nesting additional elements so the interactive area can be defined separately from the visual appearance. This complicates the markup.
- Using transparent borders and
background-clip. This forces use ofbox-shadowin place ofborderand may also preventborder-radiusfrom working in the expected way. - Absolute positioning pseudo elements larger than the parent element. This conflicts with
overflow: hidden.
It would be cool if we could somehow extend the pointer box of an element without impacting its layout or visual appearance?
.button {
pointer-box-offset: 0.5rem;
}
(I was encouraged to submit this issue after writing about the idea.)