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).
@DeepTitanic3 ай бұрын
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
@CirTap3 ай бұрын
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
@nilaallj3 ай бұрын
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.
@nilaallj3 ай бұрын
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.
@nikred99853 ай бұрын
Sir,do you know someone like you for Javascript on youtube
@jshstuff3 ай бұрын
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
@TheColonThree3 ай бұрын
I still use rems and ems, because I can do things like 90% font size inherited from the parent, etc. It's very convenient.
@jshstuff3 ай бұрын
@@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.
@kghoseinseromatic38633 ай бұрын
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?
@salentipy3 ай бұрын
That was awesome. But very fast! lol. Time to go brush up on container queries, I guess!
@Megaman34513 ай бұрын
Hey Kevin, is it possible to get links to those Cards CodePens from Una, Miriam, and Stephanie?
@nanke198717 күн бұрын
Do you have or work on a css framework? Or does one adopt or apply the concepts and tools you present at a fast cadence (even if they might be behind)?
@musicfedorov2 ай бұрын
В синтаксисе есть проблема. Всё это не работает в мобильном сафари и я пытаюсь понять, где проблема.
@scnix3 ай бұрын
I friggin love container queries when I found them early this year.
@studyalot5963 ай бұрын
hey I wanted to ask a question but discord invite doesnt work
@nzbszb3 ай бұрын
Okay, lets-get-griddy!
@maryam95513 ай бұрын
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.
@Pamuk_The_Cat3 ай бұрын
Great video Kevin :) Can you make an updated video on how to create a search bar using HTML, CSS and JavaScript?
@nilaallj3 ай бұрын
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.
@heshamahmad41012 ай бұрын
kevin which editor too do you use ? that looks very handy for laptop coders. please share the name
@schwetang2 ай бұрын
That isn't an editor; it's CodePen.
@mrocholl3 ай бұрын
@KevinPowell how do you find these amazing codepens?
@webdevluc3 ай бұрын
Awesome video Kevin. Didn't know about container queries up until now
@HippoCrisis3 ай бұрын
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!
@scnix3 ай бұрын
Wait hold on, when did css get nesting like scss and does it work exactly like scss?
@claus4tw3 ай бұрын
Can’t you use cqw here to not even need the 30ch*x ?
@dynasticcreator3 ай бұрын
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.
@Tiger1AuasfE3 ай бұрын
Very cool, thnx for the video, i have a question Kevin, what is the best way to make a webpage responsive?
@KevinPowell3 ай бұрын
There isn't really a "best" way. It depends so much on the layout, and what you need it to do.
@nomadshiba3 ай бұрын
11:50 i think 1/-1 would be better there
@startyourdayaffirmation3 ай бұрын
How did you get so good at CSS? 💡💙
@saintbaf3 ай бұрын
Fantastic 😱😱😱
@spasmdesign3 ай бұрын
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.
@DeepTitanic3 ай бұрын
I think the upcoming css if() function will solve this check lea verou’s blog
@KevinPowell3 ай бұрын
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.
@MrBrady953 ай бұрын
Thanks, would love to see the 5 minute version!
@LarsRyeJeppesen2 ай бұрын
Speed 3x
@chadking7293 ай бұрын
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?
@jarnalyrkar3 ай бұрын
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.
@KevinPowell3 ай бұрын
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.
@chadking7293 ай бұрын
@@jarnalyrkar Sweet thank you so much!
@chadking7293 ай бұрын
@@KevinPowell Awesome! I will check out custom properties, and go from there. Thank you for the great content. And for getting back to me.
@reddevil0663 ай бұрын
Somebody please suggest me a best coding theme for vs code
@iSpectate0103 ай бұрын
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
@iamtharunraj3 ай бұрын
Try *Catppuccin Themes.* I use them and they look good. *One Dark Pro* is another great option.
@reddevil0663 ай бұрын
@@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?
@iSpectate0103 ай бұрын
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.
@iSpectate0103 ай бұрын
@@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. 😊
@r_lonef3 ай бұрын
I'm not first
@jshstuff3 ай бұрын
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!