Container style queries are still in their infancy. Supported by Chromium and Safari, it’s one I’ll be keeping an eye on.

What are Container Style Queries?

Container Style Queries allow you to query a CSS property or variable from a contianer.

What Problems Do Container Queries Solve?

You can currently use size queries, which come close to style queries. With style queries you can query the computed valyes of the query container. There is very little information around to know exactly how they will be used within CSS at the moment of writing this short piece.

Syntax/Example

.example {
  container-name: example;
}

@container example(background:red) {
  .example {
    color: blue;
  }
}