Getting started with CSS Style Queries

CSS style queries are a new feature that allows developers to apply styles based on custom properties of container elements. Unlike traditional approaches using modifier classes, style queries enable conditional styling that responds to both container dimensions and custom property values. They work by querying custom properties from parent containers using the @container style() syntax, making it possible to create dynamic theming systems and responsive layouts that adapt based on multiple conditions. While browser support is currently limited to custom properties only, style queries open up new possibilities for component-based styling that weren't possible before.