It all began with the nav. Notice how in the sidebar of this here blog where you can open and close folders to reveal more entries? Well, the tappable area of the arrow was way too small and I kept miss-clicking and selecting folders instead. So, I tried to fix it and realized the only way to do so was by tweaking the element like this:
.list-group-item::before {
padding: 1rem;
}Alas! This increased the tappable area of the arrow but broke the surrounding layout, so I was forced to write all sorts of screwy CSS and hacks to account for it.
I think it was Chris Coyier the other day who mentioned that there’s nothing left on his wish list for big CSS features but I realize that this is now at the top of mine: I wish in CSS there was something like an ~interactive-size~ property so instead of having to add padding to small elements to make them clickable we could just tell the browser “trigger events when I tap/hover/whatever 15px around this element”.
Despite being a genius with an uncompromising intellect, folks much smarter than me have already thought about this! Christopher Kirk Nielsen pointed me to a proposal by Tyler Sticka for a new CSS property:
.button {
pointer-box-offset: 0.5rem;
}The idea is to give us control: let developers draw the target area around elements without effecting the surrounding elements or forcing us to make all those gnarly layout hacks. Precisely the thing I was looking for!