Early Days of Container Style Queries

Most early days conversations revolving around container queries usually compare the syntax to media queries.

Both of these are making queries for min-width: 600. The difference is that the media query is looking at the viewport’s width to trigger those style changes while the container query is looking at the computed width of the .posts element. Sweet!

But no examples on syntax just yet — only a brief description:

So, yes, given time we should expect to pull off something like this:

That’s a pretty dumb example. One thing to note is that the container-type is no longer based on the container’s inline-size but by style. We could delcare that like so:

Where might querying a container’s styles come in handy? I don’t know yet! But my mind gos to a few places:

Una also mentioned in the CSS Podcast that container style queries could help prevent some awkward styling situations, like if we happen to have italicized text in an already italicized blockquote:

source

If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.