Container Units Should Be Pretty Handy

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.

The % here is 1-to-1 with the property in use, so width is a % of width. Likewise, I could use % for 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 width.

That is, unless we get container units! Here’s the table of units per the draft spec:

unit	relative to
qw	1% of a query container’s width
qh	1% of a query container’s height
qi	1% of a query container’s inline size
qb	1% of a query container’s block size
qmin	The smaller value of qi or qb
qmax	The larger value of qi or qb

With these, I could easily set the font-size to a percentage of the parent container’s width. Or line-height! Or gap! Or margin! Or whatever!

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

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"

— Miriam (But Terrible) (@TerribleMia) September 9, 2021

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:

Developed a demo using the new container units and it’s really powerful stuff! Just two font size declarations and <100 lines of CSS in this demo and it has a ton of flexibility.https://t.co/LlrHFhVND0

+ Thanks @TerribleMia for the nudge! https://t.co/5cs8JE75nW

— Scott Kellum (@ScottKellum) September 10, 2021

Ahmad Shadeed is also all over this!

Query units can save us effort and time when dealing with things like font-size, padding, and margin within a component. Instead of manually increasing the font size, we can use query units instead.

Ahmad Shadeed, “CSS Container Query Units”

Maybe container queries and container units will drop for real at the same time. 🤷

---

The post Container Units Should Be Pretty Handy appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

source https://css-tricks.com/container-units-should-be-pretty-handy/