i stumbled onto a weird trick today for when u want an element to be totally unseen but still interactive. using the
hidden="until-found"
attribute is super handy if u are working w/ search functionality or specific browser behaviors. the tricky part is that standard hiding usually collapses the layout, which ruins ur UI flow. i found that you need a little bit of
extra css to force the browser to keep that empty space reserved for the element. w/o it, the rest of ur components just shift around and it looks
completely broken . it basically makes the element
ghost-like in the layout. i am still trying to figure out the best way to handle the margin properties to make this seamless. has anyone else found a cleaner way to do this without bloating the stylesheet? it feels like a bit of a
hacky workaround for modern layouts
link:
https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible/