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

Really quick, I'd just like to say "thanks" to everyone for giving this so much deep thought and discussion. Greatly appreciated.

> @tylersticka could you look through the minutes above and weigh in with your thoughts about making this property more high-level (larger/normal/smaller instead of a particular size)?

I've re-read the transcript a few times, and I'll admit to feeling pretty skeptical.

Let's say you have a horizontal menu containing multiple buttons side by side with some space around and between…

<img width="378" alt="Two buttons side by side, one labeled 'Button 1' and the other 'Button 2'" src="https://user-images.githubusercontent.com/69633/74873576-53498580-5314-11ea-9546-f9ff5f48b612.png">

```html
<div class="menu">
  <button>Button 1</button>
  <button>Button 2</button>          
</div>
```

```css
.menu {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 1em;
  padding: 1em;
}
```

Now let's say we want to extend their interactive area a bit because we want them to be easier to touch. To pull this off today, we might use a pseudo element that extends outward by half of the gap ([CodePen](https://codepen.io/tylersticka/pen/VwLKjPm)):

```css
.menu button {
  position: relative;
}

.menu button::after {
  content: "";
  position: absolute;
  top: -0.5em;  /* half of grid gap */
  bottom: -0.5em;
  left: -0.5em;
  right: -0.5em;
}
```

This extends the hit area for everyone, and mouse users get a more seamless experience when moving their cursor from one menu item to the next. Hooray!

Now in a world where I have `hit-margin` (or whatever we might call it) and I can specify an exact size, simplifying this CSS is very simple. I can instead write:

```css
.menu button {
  hit-margin: 0.5em; /* half of grid gap */
}
```

Since I defined a `grid-gap` of `1em`, I _know_ that `0.5em` is the most I can extend the hit area without overlap.

But I'm not sure how I would do that with keywords alone. How do `larger` or `smaller` relate to the white space choices I've defined in my CSS?

-- 
GitHub Notification of comment by tylersticka
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4708#issuecomment-588451067 using your GitHub account

Received on Wednesday, 19 February 2020 20:46:56 UTC