Container Queries: Style Queries

Did you know CSS Container Queries are more than “check the size of a container”? Also covered by the draft spec are Style Queries which allow querying computed values of the container. Let’s take a look at what that means …

~

👨‍🔬 Style Queries are still a work in progress and only have partial experimental support in Chrome. Style Queries are not part of the initial Container Queries implementation that landed in Chromium and WebKit earlier this year.

~

# Container Queries? Style Queries? What’s the difference?

Container Queries allow authors to style elements according to aspects of a Query Container. This Query Container – or Container for short – is always a parent element.

For Size-based Container Queries, children can look at the Container’s dimensions, and act upon that. This type of Container Query works similarly to how a @media query would resolve, except that the condition will be checked against a parent element instead of the Viewport.

For Style-based Container Queries – or Style Queries for short – you can look at the styles applied onto a Container. That means you can style children conditionally, based on the Computed (!) Value of a CSS property from that Container.

💡 This post only covers Style Container Queries. Read about Size Container Queries here.

~

# Basic Example

A basic example is this one below, which changes the style of i and em elements in case the parent already is italic.

@container style(font-style: italic) {
  i,
  em {
    background: lavender;
  }
}

Note that the font-style: italic matching is done against on the computed value of the parent container.

If you’re wondering how to define a style container: you don’t. All elements are style containers by default. You don’t need to manually activate this.

~

# Use Cases

My colleague Una has a great post up on her blog that gives an overview of Style Queries and its use cases.

My favorite use case is grouping styles with higher-order variables, where you can set a bunch of CSS property values based on a Custom Property Value – Yep, just like the Higher Level Custom Properties proposal I covered a long time ago.

@container style(--theme: dark) {
  .card {
    background: royalblue;
    border-color: navy;
    color: white;
  }

  .card button {
    border-color: navy;
    background-color: dodgerblue;
    color: white;
  }
}

~

# Browser Support

💡 Although this post was originally published in October 2022, the section below is constantly being updated. Last update: March, 2023.

This table below shows an up-to-date list of browser support:

Chromium (Blink)

✅ Style Queries with Custom Properties shipped in Chrome 111. It was available as an experimental feature as of Chromium 107.

Firefox (Gecko)

🚫 No support

Safari (WebKit)

🚫 No support

When visiting using Chrome, the demo below will show you two different styled boxes, all controlled by the value of the --theme Custom Property:

See the Pen Style query test — card themes by Una Kravets (@una) on CodePen.

To stay up-to-date regarding browser support, you can follow these tracking issues:

~

# More Resources

At the time of writing there are not that many resources to find, but there are some:

~

# Spread the word

To help spread the contents of this post, feel free to retweet its announcement tweet:

~

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.