"Smart" design patterns with container queries
Vložit
- čas přidán 1. 07. 2024
- Container queries are more than just a media query that looks at the parent, it also is aware of the font-size of the parent, which opens up some interesting possibilities that media queries simply don’t do.
🔗 Links
✅ I’ve got courses! kevinpowell.co/courses?...
✅ My video on the basics of container queries: • Learn how to use Media...
✅ CSS Nesting: • Getting started with C...
✅ The code from this video: codepen.io/kevinpowell/pen/MW...
⌚ Timestamps
00:00 - Introduction
00:12 - The classic example of container queries: the card
00:45 - Container queries can do more!
01:33 - The basics of container queries
03:20 - Units matter more with container queries
06:28 - Because units matter, we can make “smart” layouts
14:30 - Little bonus with :has()
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I was using `ch` here to show that we can, but this would work just as well with `px` or anything else with the grid-auto-fit, and that would still be a step up over doing it with media queries, where it's still based on the viewport, and not the actual container size, so the math wouldn't work properly in a media query (you can do calc() in them too though).
The biggest downside of CQs is that you can’t pass down a subgrid in order to have a single master grid. Im experimenting with style queries instead as they don’t have that limitation
Thanks for the ideas!
*FYI:* you can use container units (cqw, cqh etc) for all element props that accept size units. No need to wrap anything in a @container rule for this to work.
So you could use fluid font-size with cqw (instead of rem) based off the container width, or adjust the padding, or .....
Enjoy!
EDITED: see replies
Isn’t `container-type: normal` the initial value for all elements, only allowing for style containers, not size containers? If you want container units to work you need `container-type: inline-size` or `container-type: size` on the root on that subtree. You are right however that you don’t need to nest container units inside an `@container` block for them to work.
A small addition: Container units always work per se, however if there is no ascendant size queried element they will fall back to the size of the viewport.
I forgot ems aren't necessary for media queries any longer. I vaguely recall hearing a while ago that pixels are consistent now. but I've been telling juniors for the past few months that we need to be doing ems... whoops, inadvertently have been spreading misinformation. I've been sourcing some old blog post that deep dived this issue and concluded rems + em media queries was the correct way. good reminder
I still use rems and ems, because I can do things like 90% font size inherited from the parent, etc. It's very convenient.
@@TheColonThree the thing I’m talking about is different. I’m taking about the unit to put in the media query itself. like @media (min-width: 48em) {} vs @media (min-width: 768px) {}. we used to need to do the em variant to get consistent font scale/zoom behavior across browsers.
yes of course, rems and ems still have their same use cases for sizing actual elements.
I friggin love container queries when I found them early this year.
This was incredibly well timed as I used my first container query just this morning and had looking into them better on my to do list. Love the potential, I think it's something I wanted for a long long time but I am behind on new features enough that I hadn't realised it was possible!
That was awesome. But very fast! lol. Time to go brush up on container queries, I guess!
Awesome video Kevin. Didn't know about container queries up until now
It’s very nice that font units in container queries are relative to the computed font size of the queried container! This makes it tempting to simply query the body element and use that instead of media queries. However, due to how canvas propagation and layout containment work, this comes with some weird side effects for fixed positioning and overflow. Therefore I prefer to give a shared container name for the direct descendants of the body: `body > * { container: primary / inline-size }`. This targets the header, main and footer element which all have the width of the viewport.
Fantastic 😱😱😱
hey Kevin what's the best way to show a positioned absolute element out from an overflow container?
for example I have an overflow y container with a max height of 200px and inside it I have position absolute element with a height 400px, how would you get this thing to show out from the overflow container?
Great video Kevin :) Can you make an updated video on how to create a search bar using HTML, CSS and JavaScript?
@KevinPowell how do you find these amazing codepens?
Hey Kevin, is it possible to get links to those Cards CodePens from Una, Miriam, and Stephanie?
How did you get so good at CSS? 💡💙
Okay, lets-get-griddy!
Hey! Can you make a tutorial on how to put a download image button on popup image card of every image just like we see in wallpapers & images websites etc?
I couldn't find a solution to that.
11:50 i think 1/-1 would be better there
Very cool, thnx for the video, i have a question Kevin, what is the best way to make a webpage responsive?
There isn't really a "best" way. It depends so much on the layout, and what you need it to do.
Wait hold on, when did css get nesting like scss and does it work exactly like scss?
Can anyone help me?
I am using Rubik variable font downloaded from google font and converted to woff2 from font squirrel. I am declaring font face correctly with font weight range of 0 1000 but when I set font weight to 500, 600 or 900 the font weight isn't in effect.
I am a UX designer wanting to advance in my CSS journey. Do you have a series or playlist to get me into variables and components? How to set them up and link them in your project. I'm at a strange transition and I need some direction. Is this understanding sass? Should I dive into sass?
CSS has custom properties, which functions as variables.
They are written as such:
:root {
--my-custom-prop: #123123;
--gap: 1rem;
}
You can set them in any selector, not just the root. They have to be prefixed with two dashes. You can set them to any valid css value.
In order to use them, you use the var-function:
.some-selector {
background: var(--my-custom-prop);
}
SCSS variables are a bit different, but they are set using a dollar symbol:
$main-color: #123123;
SCSS variables cant change after they have been compiled. Custom properties can be manipulated directly, e.g by javascript.
I'm not sure what you mean by components, except for UI-libraries and such? Thats not really something you need to learn, you just use something like Material UI or Tailwind UI. I don't utilize these at all so maybe someone else with more experience on that can chime in.
I do have a series on custom properties, which jarnalyrkar did a good job of explaining. As for components, that's a bit of a different story, and a very big *it depends*, since they're usually made with some sort of framework like React.
@@jarnalyrkar Sweet thank you so much!
@@KevinPowell Awesome! I will check out custom properties, and go from there. Thank you for the great content. And for getting back to me.
Browser support is not there yet.
Can’t you use cqw here to not even need the 30ch*x ?
hey I wanted to ask a question but discord invite doesnt work
Somebody please suggest me a best coding theme for vs code
Hello 👋. I'm using Night Owl theme and I think it is pretty good. It has pretty good options to choose based on your taste. I suggest this to you
Try *Catppuccin Themes.* I use them and they look good. *One Dark Pro* is another great option.
@@iSpectate010 yeah I used it but I don't like it much brother sorry if you feel bad but could you please suggest me any other theme.
By the way where are you from?
Yeah sure. And also Material themes. I used it when I first started using vs code. And there's also "Winter is coming" theme. They are also good to use. Tokyo night theme, or GitHub theme. I never used them before but they seem good to me. So give it a try.
@@reddevil066 Sure. There are also Winter is coming theme, GitHub theme, Tokyo night, Material themes. I used material themes when I first started using Vs code. They are also good for me. Try them out too. 😊
Hey Kevin, just now I noticed CSS tricks started posting again a few months ago. I had no idea. It's definitely not yet back to the good vibes it used to be, and the articles are pretty bland so far, but now I'm hopeful it can someday become good again. I'm curious if you ever mentioned in any of your videos that it returned. Since it shut down your channel's been my main source of css content. I definitely missed it if you ever mentioned it!
The problem with containers has you sad you only can handle sub element's would be nice if they can fix so it can ref to it self. say that you have a card like a productcard and you add 24 * 3 then you 72 divs that you don't need there just because containers can't ref to it self.
I think the upcoming css if() function will solve this check lea verou’s blog
They can't reference themselves as it would very easily add to circular logic, but yeah, I do know what you mean. To be fair though, as much as having a there that wouldn't otherwise be required can be annoying, it also won't hurt anything either.
I'm not first