New & Upcoming CSS Features In 2023

Anchor positioning, new pseudo-classes, and more!

Published in

NAVARA

7 min readAug 7, 2023

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:

.element {
  anchor-position: my-anchor left 10px;
}

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:

<div id="anchor">This is the anchor element</div>
<div id="tooltip">This is the tooltip</div>

#tooltip {
    position: absolute;
    display: none;
    anchor-position: my-anchor top 10px;
  }
#anchor:hover #tooltip {
    display: block;
  }

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.

Focus and follow using CSS anchor-position

In the future, we will be able to position an element relative to multiple anchor elements:

.anchor1 {
  anchor-name: anchor1;
}
.anchor2 {
  anchor-name: anchor2;
}
.positioned {
  position: absolute;
  top: 0;
  left: 0;
  anchor: anchor1, anchor2;
}

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

Tracking bar chart values with CSS anchor position

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!

Note that as of August 2023, anchor-positioning is still an experimental feature. You can test Chrome Canary!

New features for shapes

With CSS Shapes we don’t mean creating a div of 100 by 100 pixels and filling it read to create a square… CSS Shapes is a real thing that allows you to easily create complex shapes with CSS.

The shape-outside property has already been developed a while ago. This lets you create shapes that are relative to a specific location on the page. For example, you could create a circle that is centered on the top-left corner of the page:

.circle {
  shape-outside: circle(50px at 10px 10px);
}

But this is just the beginning. There are more shapes such as triangles, trapezoids, or polygons. You can make it as complex as you want.

.triangle {
  shape-outside: triangle(50px, 0, 50px, 100px, 0, 100px);
}

Other new features:

shape-inside which can be used to create shapes that are filled with images or other content.
shape-image which can be used to create shapes that are responsive to the size of the element.
shape-overflow which can be used to create shapes that are clipped or that have content that flows outside of the shape. In the following example shape-overflow: clip will allow the content to overflow the shape, but it will be constrained to the stroke box of the element:

.shape {
  shape-image: url(https://example.com/image.png);
  shape-overflow: clip;
}

Note that as of August 2023, these features are still in draft phase.

New features for scroll snap

I personally really like the scroll snap feature, as it makes the scrolling experience much smoother and it is very easy to implement. If you haven’t worked with scroll-snap before, here is an example of how you can use CSS Scroll Snap to create a snap-to-scrolling behavior for an element:

.my-element {
  scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(50px, 100px);
}

This code will create an element that snaps to every 50px on the x-axis and every 100px on the y-axis.

Scroll snap has been live for a while now, but there are a few of new features that are somewhat new:

Scroll snap align: The new scroll-snap-align property allows you to control how an element is aligned when it snaps to a snap position. For example, you can use this property to ensure that an element is always aligned to the top, bottom, center, or left/right of the scroll container. Also in the example below, you can see that there is support for scroll snap in both axes.

.container {
  overflow-x: scroll;
  overflow-y: scroll;
  scroll-snap-type: both mandatory; // Support both axes
  scroll-snap-align: center;
}

Better support for touch devices: making it easier to snap to snap positions using touch gestures.

.container {
  scroll-snap-type: both mandatory;
  scroll-snap-touch-snap-points: true;
}

Audio pseudo-classes

As part of the Selectors Level 4 update, there are some pseudo-classes added that represent loaded images and videos.

When it comes to media playback, the :playing, :paused, and :seeking pseudo-classes seem very useful. This is great because we can now easily style these elements to create a more interactive and engaging user experience.

Another section deals with media loading states and includes :buffering and :stalled. These classes indicate to users that the media will continue playing once loading issues are resolved. Also the pseudo-classes :muted and :volume-locked will be added. These pseudo-classes are a nice way to provide visual feedback, keep users informed, and work with different styling, such as in the following example:

video {
  opacity: 1;
}
video:buffering {
  background-color: #ccc;
  opacity: 0.5;
}

Overall, these CSS pseudo-classes could be very practical. They’ll be a valuable addition to our web development toolkit, making it easier to handle media elements and improve the overall user experience on our websites. I’m looking forward to using them.

As of August 2023, some of these functions are only available for Safari.

Current-element pseudo-class

The :current pseudo-class is straightforward; it represents the element that is currently being displayed or an ancestor of that element. We could use this to create styles that respond to the user's current position in a specific element.

For example, the following rule could be used to highlight the paragraph or anchor element that is being read aloud in a speech rendering of the document:

:current(p, a) {
  background: yellow;
}

In addition, the :past and :future pseudo-classes also offer interesting possibilities, representing elements that occur entirely before or after the :current element. The :past pseudo-class represents any element that is defined to occur entirely prior to a :current element. The :future pseudo-class however, represents the element after.

New features for subgrid

CSS Subgrids are a feature of CSS Grid Layout that allows you to create nested grids within a single grid container, and there are new features coming! A small recap; here is an example of how you can create a subgrid:

.my-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.my-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 50px);
}
.my-grid > .my-subgrid {
  grid-column: 1 / 2;
}

Grid Container
   Column 1
       Subgrid
         Row 1
         Row 2
   Column 2

As you can see, the subgrid is nested within the grid container. The subgrid has its own grid layout, which is independent of the grid layout of the grid container.

A new feature of subgrids is named grid lines. You will be able to name grid lines on your grid and then position items based on those names rather than the line number, such as in this example:

.grid {
  display: grid;
  grid-template-names: a b c;
}
.grid .item.a {
  grid-column: a;
}
.grid .item.b {
  grid-column: b;
}
.grid .item.c {
  grid-column: c;
}

Another one is subgrid alignment of a child grid to align the grid with the parent grid:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
.grid .item {
  background-color: #ccc;
  border: 1px solid black;
}
.grid .item > .child-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-alignment: start start;
}

The grid-alignment property can be used to align a child grid with its parent. In this example, the child grid is aligned with the parent grid on both the horizontal and vertical axes.

One downside of subgrids: they can be hard to debug. If they become hard to debug: use a grid inspector to visualize the layout. In the inspector panel, you will see a number of different tabs. One of the tabs will be the “Grid” tab. The Grid tab will show you a visualization of the layout of the CSS grid. The visualization will show you the grid lines, the grid tracks, and the grid items.

Overall, I believe that CSS Subgrids are a valuable tool that can be used to create complex and responsive layouts and I am excited to see how they are used in the future with these new features.

Note that as of August, subgrids are not yet supported by all browsers!