pointer-box-offset

<p>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:</p> <pre class="language-css"><code class="language-css"><span class="token selector">.list-group-item::before</span> <span class="token punctuation">{</span><br /> <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre> <p>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.</p> <p>I <em>think</em> it was <a href="https://frontendmasters.com/blog/author/chriscoyier/">Chris Coyier</a> 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”.</p> <p>Despite being a genius with an uncompromising intellect, folks much smarter than me have already thought about this! <a href="https://chriskirknielsen.com/">Christopher Kirk Nielsen</a> pointed me to <a href="https://github.com/w3c/csswg-drafts/issues/4708">a proposal</a> by <a href="https://tylersticka.com/">Tyler Sticka</a> for a new CSS property:</p> <pre class="language-css"><code class="language-css"><span class="token selector">.button</span> <span class="token punctuation">{</span><br /> <span class="token property">pointer-box-offset</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre> <p>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. <em>Precisely</em> the thing I was looking for!</p>