Why have a focus ring per element when you can have one focus ring for all the elements?

Meet the Universal Focus Ring! 💫

css-tip.com/universal-fo...

A funny experiment using Anchor Positioning (I repeat, it's a demo for fun)

And if you are up for some cool CSS hacks, you can see my tricks for updating the arrow direction without container queries! 🪄

I made it for the 3 common patterns:

css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...
css-tip.com/tooltip-anch...

Updated the interactive demo to include the "anchor-center" value. It's a special value different from "center" and is probably the one you will be using the most.

css-tip.com/position-area/

Example with position-area: top 👇

Ready for another crazy demo? This time, I am considering the corner positions. Same HTML code and still 100% modern CSS!

Yes, Anchor Positioning is very cool. 🤩

css-tip.com/tooltip-anch...

The code is a bit hard to decipher, but I am working on articles to explain all the magic 👍

I said 36 positions, but in reality, they are even more because within each position, we can control the alignment of the element using justify-self and align-self.

36 positions, 2 axes, 4 alignment values per axis. I let you do the count! 🫣

💡 CSS Tip!

In Anchor Positioning, you can use position-area to place an element relatively to its anchor, but there are 36 different positions !? 👀

No one can memorize them all, so I've created an interactive demo where you can select a position and get its code.

css-tip.com/position-area/

It's also easy to debug using @developer.chrome.com

It shows you which fallback position is used by crossing out all the others. When all of them are crossed out, the position defined on the element is the one used.

Do you want to see more cool stuff using modern CSS? This time, the tooltip will consider all four positions, and the tail will always point to the anchor. 👀

css-tip.com/tooltip-anch...

Still 100% CSS magic! 🪄

See it in play 👇

You can toggle the "debug mode" in the demo to better understand what's happening.

Demo: codepen.io/t_afif/full/... via @codepen.io

Here is my idea with less of code

css-tip.com/tooltip-anch...

The trick is to play with the margin property to show/hide the arrows.

cc @una.im @bram.us