Add Superpowers to Your CSS Variables with Style Queries

by Jared White

That HTML Blog is the fresh place to be for posts about developing websites & applications using “vanilla” & standards-adjacent web technologies. Got a rad link to feature on the blog? Send it our way!

Add Superpowers to Your CSS Variables with Style Queries

March 8, 2024   Permalink

We’re on the verge of yet another CSS revolution with the arrival of style queries. If you’ve ever thought:

Yeah, variables are cool and all, but it’s a bummer I can only use them to set one property at a time

Wow, I wish I could style this whole layout differently based on a CSS variable I set with a media query

…then your dreams are about to come true!

Style container queries were first added to Chromium browsers last year, and now they’re landing in Safari with the arrival of Safari Technology Preview 190. The syntax is very simple to use, even simpler than container queries based on size:

@container style(--my-var: 123) {
  section > .do_stuff > [here] {
    color: yellow;
    background: maroon;
  }
}

In case it’s not obvious, the style rules above will only apply if there’s a --my-var custom property set to the value of 123. 🤯

The spec for style queries allows for the querying of any computed styles, not just variables, but browser engines are focusing on variables first because, frankly, it’s a whole lot easier. And honestly? It’s also the absolute coolest.

Because now we can set theme and breakpoint type variables and use those to style all sorts of things! Imagine a world where you can do this:

:root {
  --is-mobile: false;

  @media (max-width: 500px) {
    --is-mobile: true;
  }
}

Previously, there wasn’t anything you could “do” with a variable such as this, because false and true don’t apply meaningfully to any particular style rules. But now with style queries, you can do this:

aside.sidebar {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 600;
}

@container style(--is-mobile: true) {
  aside.sidebar {
    font-size: 1.1rem;
    line-height: 1.25;
    font-weight: 500;
  }
}

And if you’re thinking to yourself: wait a minute, isn’t this kind of like if we could use CSS variables directly in media queries? …the answer is, yes, it kind of is. 🙌

You can also “theme” components and then “untheme” them later simply by changing the value of a custom property. Here’s a CodePen demonstrating how a button is themed orange higher up in the DOM tree, and then lower in the tree that theme is switched off. It’s almost like “scoped CSS” but controlled at the level of page authoring, not component authoring.

We’re just scratching the surface of what’s enabled by style queries. The only fly in the ointment is that Firefox hasn’t started work on this feature yet. Keep a close eye on this Bugzilla issue and cross your fingers we see activity soon. In the meantime, I could envision some possible light usage of style queries in a “progressive enhancement” sort of way once production support is available across Chromium and Safari. Thrilling!

Follow

Get this: a weekly digest of thrilling links sent right to your inbox. w00t! 🙌

Email address

First name (Optional)

No spam, I promise. Just web dev links!

See Also

The content throughout this blog is hand-curated by me, Jared White, and is Copyright © 2024. Articles excerpted and linked to are under copyright by their respective authors unless otherwise indicated.

Return to Top 🔝

To the extent I have any control over this, no “large language” machine learning model or any “AI” training dataset may include any of the content on this website.

This blog stands in solidarity with all other bloggers in the blogosphere valiantly rebuilding after the devastation wrought by Big Social. Long live the indie web!

Skip to content