Post

I was about to write a post about why I am not a big fan of the new dialog element, but it sounded so negative so here is a short thread about how awesome anchor positioning is instead. Anchor positioning is is one of the best designed APIs I have seen in a long time.

You can obviously use if for tooltips and popovers which are probably the primary use cases it is designed for. The position-try-fallbacks property is particularly clever, since it lets you specify where the element should go if there is not enough room in the original place.

But anchor position can do so much more. So many effects that used to be cumbersome to create are now trivial to do without having to add additional javascript or getting anybody's bounding client rects.

And this simple concept has almost endless use cases. Creating these kinds of onboarding tutorials used to require a bunch of JS logic to get the position right and anything that could affect the pages layout would break it, if you hand't already accounted for it. Anchor position solves all that.

I was doing a bunch of js on a <dialog> at work like yesterday, took three revisions to get the edge cases worked out. Definately taking a look at this, thanks for sharing!

0 reposts1 like