This guide lists all the new additions to CSS, like nesting, container queries, view transitions, and :has(). Each feature comes with an explainer, demo, code example, and a quick bit of detail as to why you should care about them.

CSS frameworks can help in the early stages of development, offering speed and consistency, but they become difficult to maintain over time. The alternative is to build your own custom CSS, either from scratch or using a starter codebase. Modern CSS features make the need for preprocessors less necessary.

Container queries are a new CSS feature for responsive layouts. The feature isn't supported by every browser. This article offers a fallback strategy using JavaScript and a custom `responsive-container` element that enables container queries while supporting older browsers.

CSS's @property is a new at-rule allowing explicit definition of custom property syntax, initial value, and inheritance. This article shows how @property enables smooth animations and transitions, demonstrated by a shiny animated button with rotating gradients, a silky smooth hover effect, and tiny shimmering dots. @property lets developers create intricate designs and complex animations, previously difficult or impossible with standard CSS.

This article goes over a complete frontend redesign of a website that involved creating a new header, a unique hero section featuring personalized hats drawn by the author's daughter, and a circular navigation for the hats section. It also incorporated interactive elements using Framer Motion and scroll-driven animations, along with the usage of CSS features like container queries, :has(), offset-path, and more.