skip to content

After nearly 15 years as a highly-requested feature in CSS – and 15 years being told it was impossible – (size) Container Queries and units have shipped in both Chrome/Edge 105, and Safari 16! Firefox is not far behind.

2 weeks 2 browser engines
scrawled in red ink
over a poster of fast cars and neon lights
originally saying 2 fast 2 furious.

If you want to start using these features (I recommend it!) just make sure you’re using the right syntax! Some things have changed between the first prototype and the final version that’s shipping in browsers. But don’t worry – it’s stable now, and won’t be changing again!

Both Chrome 105 and Safari 16 come with an impressive list of new features in addition to container queries. The main highlights are the :has() selector (in both) and subgrid (in Safari). But I recommend digging through the release notes linked above.

(For more about container size queries and units, see my list of Container Query Resources.)

Style Queries Prototype

Meanwhile, Chrome Canary & Edge Canary have both shipped a prototype of style queries. Rather than measuring the dimensions of an element, style queries measure the computed value of a given property on that element.

To test the feature:

For now style queries are limited to strict equality (we can’t query number ranges, or partial values) – and the prototype is limited to custom properties. Even with those limitations, it’s a pretty powerful feature. Here’s my first experiment, establishing two ‘button themes’ – mia and mia-plus – toggled by a single custom property:

See the Pen Style query button themes by @miriamsuzanne on CodePen.

I’m excited to experiment with this more. It should enable most of the use-cases in Lea Verou’s request for Higher Level Custom Properties, and I’m excited to see what else people come up with. If you make any demos, please send them my way!

Browser Support for Size Queries & Units

Data on support for the css-container-queries feature across the major browsers from caniuse.com

Data on support for the css-container-query-units feature across the major browsers from caniuse.com

WebMentions

Mia

on tweets.miriamsuzanne.com

After nearly 15 years as a highly-requested (impossible!?) feature, size-based Container Queries & units have shipped in both Chrome/Edge 105 & Safari 16! Firefox is not far behind. (also: there's a prototype of style queries!) miriamsuzanne.com/2022/09/14/cq-…