The last remaining reason to compile your CSS has just disappeared.
CSS Style Queries have reached Baseline support across all major browsers, and they unlock something we've wanted for years: reusable, stateful design tokens that work entirely in native CSS.
The syntax
At its most basic, style queries allow you to add CSS rules to a nested element, based on a parent’s CSS variable.
:root {
--my-variable: true;
}
.my-selector {
@container style(--my-variable) {
color: red;
}
}At first glance this looks like something you could solve with a class. But that's missing the important part.
Style queries let CSS respond to other CSS. That means your components can adapt based on design decisions made higher up the tree, without adding modifier classes, JavaScript, or changing markup.
What can I do with style queries?
Style queries fit naturally alongside design tokens. A parent component can expose semantic values such as --density, --theme, or --navigation-breakpoint, and descendants simply react to them.
Use them as mixins (kinda)
Because the CSS variable that it queries needs to be on a parent container, you can’t just do a
.card {
--interactive: true;
/* This will not work! */
@container style(--interactive) {
background: tomato;
}
}But you can do something like this:
.card {
--interactive: true;
}
@container style(--interactive) {
.card__title {
text-decoration: underline;
}
.card__icon {
opacity: 1;
}
}What really excites me: Media query variables
What really gets me going about this is that we can now set variables in media queries!
html {
--breakpoint-nav: small;
@media (width >= 600px) {
--breakpoint-nav: large;
}
}
.navigation__toggle {
@container style(--breakpoint-nav: large) {
display: none;
}
}Previously, unless we’re using Sass or PostCSS, this was impossible!
What this means for Drupal
Today Drupal compiles CSS to support features like Custom Media. That means Node.js, PostCSS configuration, build tooling, CI steps, and generated assets.
If native CSS can replace those features, we remove an entire layer of tooling. Fewer dependencies mean simpler contributor onboarding, easier maintenance, and one less source of build failures.
Note I introduced the first use of style queries to Drupal core earlier this month within the new Admin theme (which is slated to replace Claro).
What this means for Dripyard themes
Dripyard themes are already vanilla CSS. We’ll likely convert a few breakpoints (mostly within the navigation system) to use the new method, which will allow our users to easily edit the values in one place if needed.
When can I start using it?
Firefox was the last browser to ship style queries, meaning they're now part of Baseline and ready for production use.
Drupal core still waits for Firefox ESR before adopting them broadly, but that milestone is only a few months away. Once ESR catches up, I expect style queries to become one of the biggest simplifications to Drupal's front-end architecture in years.
