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.