Funny Container Query Defaults

Maybe it’s me. Or maybe it’s that the spec is still being ironed out. We’ve already seen changes to the CSS Container Queries syntax since it was initially released as a draft, after all.

But: All elements are style containers by default. That means we have to explicitly declare container-type set to size or inline-size to register an element as a size container.

.parent {
  container: wrapper / inline-size;

A container query is a size query by default. Once we’ve registered a size container, we can start querying away.

@container wrapper (width > 60ch) { /* Apply these styles */ }

That’s different from a style query, where we call the style() function to distinguish it from a size query:

@container style(background-color: #000) {}

Shouldn’t style queries be the default type of query since that is the default container-type? It would seem that having to declare a size() function would be the right path in order to differentiate the default style behavior from a size query since elements are style containers fresh out of the box.

Like I said, maybe it’s just me. Or maybe it’s something I’m ignorant about, like how that might affect existing media queries. I dunno. Just thinking out loud.

✏️ Handwritten by Geoff Graham on May 28, 2024


  1. # May 28, 2024

    @geoff At this point browsers are only implementing style queries for custom properties, so that could be a part of it? I also imagine style queries came later. There’s also state queries in the hopper (e.g. querying if a sticky element is stuck).

  2. # May 28, 2024

    @geoff yes! we should just drop the style()

    these two look distinct enough to not need disambiguation through size() or style():

    <br>@container (inline-size &gt; 69ch)<br>@container (--prop: whatever)<br>

  3. # May 28, 2024

    @knowler @geoff What Nathan said! + I imagine the “anonymous” syntax was derived from media queries, something something existing patterns?

    (also I wouldn’t be opposed to an explicit size() container query function but that’s not exactly a priority!)

  4. # May 28, 2024

    @mayank @geoff There is a difference here though:

    css<br>@container (min-inline-size: 69ch)<br>/* This is checking if the container has `min-inline-size` set to `69ch` */<br>@container style(min-inline-size: 69ch)<br>

    I know at this point browsers aren’t implementing style() for regular properties, but I imagine this might have something to do with it.

  5. # May 28, 2024

    @knowler @geoff yeah i know, it makes sense to require disambiguation for those if we ever get style queries for regular properties.

    but that’s way different from custom properties (which is what we’re getting now)


Leave a Reply

Markdown supported