Container queries are going to resolve this long-standing challenge in net design the place we need to make design selections based mostly on the dimensions of a component (the container) somewhat than the dimensions of your complete web page. So, if a container is 600px extensive, maybe it has a row-like design, however any narrower than that it has a column-like design, and we’ll have that sort of management. That’s a lot completely different than transitioning between layouts based mostly on display screen dimension.
We are able to already dimension some issues based mostly on the dimensions of a component, because of the % unit. For instance, all these containers are 50% as extensive as their father or mother container.
The % right here is 1-to-1 with the property in use, so width is a % of width. Likewise, I may use % for font-size, however it is going to be a % of the father or mother container’s font-size. There’s nothing that lets me cross properties and set the font-size as a % of a container’s width.
That’s, until we get container items! Right here’s the desk of items per the draft spec:
unitrelative toqw1% of a question container’s widthqh1% of a question container’s heightqi1% of a question container’s inline sizeqb1% of a question container’s block sizeqminThe smaller worth of qi or qbqmaxThe bigger worth of qi or qb
With these, I may simply set the font-size to a share of the father or mother container’s width. Or line-height! Or hole! Or margin! Or no matter!
Miriam notes that we will truly play with these items proper now in Chrome Canary, so long as the container queries flag is on.
🥳 oh, and likewise Chrome Canary (with the container question flag) now has help for Question Models:https://t.co/GkIbLFW5C6
Undecided when it occurred – up to now I’ve solely examined qi, as a result of that is probably the most helpful.
If I’ll quote @chriscoyier… “CSS comes at you quick”
— Miriam (However Horrible) (@TerribleMia) September 9, 2021
I had a fast play too. I’ll simply put a video right here as that’ll be simpler to see in these tremendous early days.
And a few nice exploratory work from Scott right here as properly:
Developed a demo utilizing the brand new container items and it’s actually highly effective stuff! Simply two font dimension declarations and <100 strains of CSS on 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 can be throughout this!
Question items can save us time and effort when coping with issues like font-size, padding, and margin inside a part. As an alternative of manually rising the font dimension, we will use question items as an alternative.
Ahmad Shadeed, “CSS Container Question Models”
Perhaps container queries and container items will drop for actual on the similar time. 🤷
The put up Container Models Ought to Be Fairly Helpful appeared first on CSS-Tips. You may help CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!