Forem

TusharShahi
TusharShahi

Posted on

1

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:

Demo of submenu changing its position based on viewport boundaries

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;
}
Enter fullscreen mode Exit fullscreen mode

@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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay