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.