CSS Container Style Queries Reach Baseline Support with Drupal Front-End Implications

Container style queries for CSS custom properties have reached Baseline Newly Available support, completing major-browser availability for a feature that lets CSS respond to custom-property values on a parent container. Web.dev reported that Firefox 151 introduced support for style() queries on @container, while the Web Platform DX feature explorer lists the feature as Baseline Newly Available since 19 May 2026. The change gives Drupal front-end developers a native browser feature for patterns that have often depended on preprocessing or build-time conventions.

In a 29 June 2026 blog post, Mike Herchel, founder and lead developer at DripYard, argues that the feature could reduce Drupal’s reliance on compiled CSS for some use cases. He points to media-query variables as the practical shift: a breakpoint value can be set through a CSS custom property and queried by descendants without Sass, PostCSS, JavaScript, modifier classes, or changed markup. Mike also writes that DripYard themes already use vanilla CSS and may convert some navigation breakpoints to the newer approach.

Drupal’s existing front-end tooling history supports the significance of the claim, but broad adoption is not immediate. A Drupal core issue for Olivero previously described the PostCSS Custom Media plugin as a way to create a reusable navigation breakpoint because CSS custom properties could not be used directly inside media queries. Mike writes that Drupal core still waits for Firefox ESR before adopting style queries broadly, so the immediate news is browser support and early experimentation rather than a Drupal-wide migration.