Container queries are going to solve this long-standing issue in web design where we want to make design choices based on the size of an element (the container) rather than the size of the entire page. So, if a container is 600px wide, perhaps it has a row-like design, but any narrower than that it has a column-like design, and we’ll have that kind of control. That’s much different than transitioning between layouts based on screen size.
We can already size some things based on the size of an element, thanks to the
% unit. For example, all these containers are 50% as wide as their parent container.
% here is 1-to-1 with the property in use, so
width is a
width. Likewise, I could use
font-size, but it will be a
% of the parent container’s
font-size. There is nothing that lets me cross properties and set the
font-size as a % of a container’s
That is, unless we get container units! Here’s the table of units per the draft spec:
|1% of a query container’s width|
|1% of a query container’s height|
|1% of a query container’s inline size|
|1% of a query container’s block size|
|The smaller value of qi or qb|
|The larger value of qi or qb|
With these, I could easily set the
font-size to a percentage of the parent container’s
Miriam notes that we can actually play with these units right now in Chrome Canary, as long as the container queries flag is on.
🥳 oh, and also Chrome Canary (with the container query flag) now has support for Query Units:https://t.co/GkIbLFW5C6— Mia, on Bass (@TerribleMia) September 9, 2021
Not sure when it happened – so far I've only tested qi, because that's the most useful.
If I may quote @chriscoyier… "CSS comes at you fast"
I had a quick play too. I’ll just put a video here as that’ll be easier to see in these super early days.
And some great exploratory work from Scott here as well:
Ahmad Shadeed is also all over this!
Query units can save us effort and time when dealing with things likeAhmad Shadeed, “CSS Container Query Units”
marginwithin a component. Instead of manually increasing the font size, we can use query units instead.
Maybe container queries and container units will drop for real at the same time. 🤷
You’d normally use clamp with viewport width vw units. How does using qw or qi make it better?
It is not about a viewport, but a container – a parent node layout-wise. Otherwise the same logic applies.
How will these work with browser zooming? The problem I’ve had with viewport sizes is that it won’t allow the user to resize fonts with browser zoom. If the container is vw sized here, I suspect we’ll have the same problem?