Defines an only-use counter style without the need to do a whole @counter-style, at the cost of missing some features.

ul { list-style: symbols(cyclic "🥬"); }

The sibling-index() CSS function returns the position of an element among its siblings, starting from 1. It’s similar to :nth-child(), but instead of using it in selectors, you can now use the index directly within CSS functions and calculations.

ul li { transform: translateX(calc(sibling-index() * 10px)); }

The sibling-count() CSS function returns the total number of sibling elements an element has, including itself. Think of it sort […]

ul li { width: calc(100% / sibling-count()); }

The CSS scroll() function provides an anonymous scroll timeline when used as a value for the animation-timeline property. Instead of explicitly setting up and referencing a named timeline using scroll-timeline-name, the scroll() function handles it for you. You simply tell it which scroll container to track (called the “scroller”) and which axis to follow, and it returns an anonymous scroll timeline.

.element { animation-timeline: scroll(); }

The CSS shape() function enables us to more easily create complex paths, polygons and other shapes using a more human readable syntax using lines, arcs, and curves. It also allows much greater flexibility and responsiveness in the use of units than the CSS path() function.

.triangle { clip-path: shape(from 50% 0%, line by 50% 100%, hline to 0%, line to 50% 0%, close); }