Container Units Should Be Pretty Handy | CSS-Tricks
source link: https://css-tricks.com/container-units-should-be-pretty-handy/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Container Units Should Be Pretty Handy
Chris Coyier on
Sep 22, 2021
Grow sales with a smart marketing platform.
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:
unitrelative toqw
1% of a query container’s widthqh
1% of a query container’s heightqi
1% of a query container’s inline sizeqb
1% of a query container’s block sizeqmin
The smaller value of qi or qbqmax
The larger value of qi or qbWith 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
, andmargin
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. 🤷
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK