Bars Icon

New & Upcoming CSS Features In 2023

11-01-2024 10:59 AM

The CSS Working Group is working on a number of exciting new features and CSS properties. These include features like anchor positioning, features for shapes, scroll snap, and new audio pseudo-classes.
Anchor Positioning
CSS Anchor Positioning is an experimental new CSS feature that allows you to position an element relative to another element on the page. This is done by using the anchor-position property. For example, the following code would position an element 10px to the left of the anchor element:
CSS Anchor Positioning is a powerful new feature that can be used to create a variety of interactive elements, such as tooltips, modals, and popovers. It makes tooltips even more dynamic. Here is a small example that shows how to anchor positioning to create a tooltip:

This code will create a tooltip that is positioned 10px above the anchor element when the anchor element is hovered over.
Another example from developers.chrome.com uses anchor positioning to track a visual indicator for the focused input fields. As you can see, the anchor can deal with multiple positions and layouts.
In the future, we will be able to position an element relative to multiple anchor elements:
An example of multiple handlers for one element is the chart below, where the tooltips are anchored by combining it with the max and min values of the chart (source: developers.chrome.com).

Some other examples of how CSS anchor positioning can be used.

  • Elements that follow the user as they scroll down the page.
  • Accordions that expand and collapse when the user clicks on a button.
  • Resize images based on multiple anchor-position s.
  • Modal dialogs that appear over the rest of the page.
  • Even more dynamic tooltips!