Style queries
Container queries that ask about the value of a custom CSS property rather than about width. Lets a component change appearance based on state set elsewhere in the tree.
The syntax is @container style(--variant: compact), and the rule applies when the nearest container carries that value for the property. The benefit is avoiding class names that have to be threaded down through several levels of components: a parent sets a variable and everything inside can react to it without knowing who set it or needing a class stuck on. It suits theming particularly well, and variants of the same card in different contexts. The feature has shipped in Chromium since version 111, but only for custom properties — querying ordinary properties like font-size is still being specified, since it opens the door to circular dependencies.