[csswg-drafts] [css-box] increase pointer target size independently of element layout (#4708)

tylersticka has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-box] increase pointer target size independently of element layout ==
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](https://cloudfour.com/thinks/jagged-little-pill-issues-with-rounded-buttons/) so the interactive area can be defined separately from the visual appearance. This complicates the markup.
- Using [transparent borders and `background-clip`](https://twitter.com/gumnos/status/1220885314505453569). This forces use of `box-shadow` in place of `border` and may also prevent `border-radius` from 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?

```css
.button {
  pointer-box-offset: 0.5rem;
}
```

![pointer-box-offset-opt](https://user-images.githubusercontent.com/69633/73291727-9dc46000-41b5-11ea-8201-70b044a4f71c.png)

(I was [encouraged to submit this issue](https://twitter.com/fantasai/status/1220851780357148674) after [writing about the idea](https://cloudfour.com/thinks/some-imaginary-css/#click-touch-target-sizing).)

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4708 using your GitHub account

Received on Tuesday, 28 January 2020 18:05:48 UTC