New CSS Features

I recently watched a talk from Google i/o 24 about the latest in web ui. It covered several things I hadn't heard about, and it got me wondering what other features I may have missed. I spent some time looking over CSS features introduced in the past couple years. Here are a few that seem worth exploring further.

Say you're on a page with a lot of content that you're scrolling through. You open a modal to read some detail and give a couple quick scrolls to get to the bottom — but you overdo it and not only scroll to the bottom of the modal but scroll down the page as well. Annoying.

The overscroll-behavior property lets you manage how overscroll works — set it to none and scrolling stops once you reach the bottom.

Check out this codepen I made and look at the two boxes of legal content. Trying scrolling through each of them to see the difference.

Use this along with overflow: clip to create nested containers with neatly matching border-radius. The way the lilac and black curves on the image to the right look mismatched can be solved with this trick, as seen on the left. Read more about it from Chris Coyier, or check out this simplified version on codepen.

Mix two colors (or tint with white or black) to quickly create compatible combos.

# a quick blend of green and yellow
background-color: color-mix(in srgb, yellowgreen, yellow);

# most sophistication with percentages
background-color: color-mix(in srgb, yellowgreen 20%, yellow);

Codepen example

Using @keyframes and animation to create scroll-based animations that are much more performant than when using JS scroll events.

Not yet widely supported, but it works in Chrome.

Codepen example

Learn Scroll Animations from Google

I don't see any MDN docs for this yet so will have to report back. This one's a little unintuitive for me, but I think the simplest way to use it is with the inset-area property paired with anchor-name and position-anchor. It's a little weird how you name the anchor with a variable but never explicitly set the variable. Play around with it here.

You can get a lot more sophisticated with dropdown menus using popover: https://youtu.be/_-6LgEjEyzE?t=1718

.anchor {
  anchor-name: --anchor-el;
}

.tooltip {
  position: absolute;
  position-anchor: --anchor-el;
  inset-area: right;
}