The convenience of CSS&#s new @position-try

CSS anchor positioning came out some time ago. If you, like me, do not like writing CSS, this new API would definitely improve things.

Anchor Positioning

The CSS Anchor Positioning API allows developers to easily position elements relative to others (known as anchors), without needing extra libraries or complex JavaScript. This feature is perfect for creating menus, tooltips, dialogs, and other layered interfaces.

With this API, you can ensure that an element's size/position adapts based on its anchor. This eliminates the need for manual adjustments and provides a smoother, more responsive experience when building dynamic, interactive layouts.

What is position-try?

Anchor CSS also came out with a new CSS at-rule called position-try. It allows you to define fallback positions for anchored elements when they don’t fit within the screen or container. If an element overflows, the browser automatically chooses the next alternative position, ensuring it stays fully visible and functional. The position-try-fallbacks property can be used to define multiple fallback positions for the browser to try. Earlier this would have been achieved by running a listener that checks after every viewport change if things are going.

This could prevent a lot of headaches while working with dropdowns, tooltips etc. as now we do not have to write custom logic to check for overflow conditions.

A demo

Here is a quick demo of the code I wrote using the above CSS properties:

The submenu in my horrible-looking nav bar changes its position based on the width of the view port.

The code is written in React. Earlier I would have had to use an effect to do this. In my effect, I would have checked if the submenu element is crossing the viewport's boundary. If yes, I would have triggered another re-render to update the styles of the submenu. Since useEffect runs after the paint, and we don't want the user to see the submenu in the wrong location, I would have had to use useLayoutEffect for this.

Now all I have to do is write a CSS like this:

.button-anchor {
  anchor-name: --anchorButton;
}

@position-try --bottom {
  position-area: bottom;
}

.menu-list {
  position-anchor: --anchorButton;
  border: 1px solid #000;
  font-family: sans-serif;
  width: 60px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  padding: 8px;
  position: fixed;
  position-area: right span-y-end;
  position-try-fallbacks: --bottom;
}

@position-try - creates the rule called --bottom.
anchor-name - sets the button as an anchor element.
position-anchor - lets menu-list use --anchorButton as the anchor element.
position-try-fallbacks - helps list the multiple fallbacks to try. This means there can be more positions even if --bottom fails.

Summary

Anchor CSS has come and solved some very interesting use cases for a developer. In addition to the above, tethered positioning becomes very easy. Everything is purely on CSS, so performance is also great. Right now the browser support is not great, but I hope it sees more adoption soon.

The above is the detailed content of The convenience of CSS&#s new @position-try. For more information, please follow other related articles on the PHP Chinese website!