I believe using 33.33cqw within an established container would be more appropriate than 33.33% or maybe using calc(100cqw / 3) to skip the floating point "guesswork"
This can be used for very interesting stuff together with registered custom properties since they get computed directly. You can for example declare styles depending on the color scheme (which is not the same as the media feature which always mirrors the system settings). ``` @property --color-scheme-check { syntax: ""; initial-value: #fff; inherits: true; } :root { color-scheme: light dark; --color-scheme-check: light-dark(#fff, #000); } @container style(--color-scheme-check: #fff) { /* Declarations for light color scheme */ } @container style(--color-scheme-check: #000) { /* Declarations for dark color scheme */ } ``` Hopefully the `light-dark()` function can be used for other things than colors in the future, but until then, this solution works well enough.
День тому+1
Honestly I would never use this kind of css complexity in a serious product. Container queries are great but using these kind of 'switches' where some classes interdepend on some others and trying apply DRY to css should (imho) be avoided. Even if you can be extremely 'clever' with your css it does not mean you should.
Awesome! For a few months ago I was working on a component and thought: Oh why do we have no option to conditionally add some css with plain css? Now its there^^ Thank you for your nice videos and greetings from germany!
I haven't gone too crazy with this but I found a use case where the design had these boxes that were either off-white or white depending on what container they were in, and they could be nested. Wrote a pair of queries that tested a prop called invert-box, which set the box-color to one or the other and inverted the value on the element for decendents to follow.
IDK man. This is relatively new to me (style queries) however it's starting to feel very spaghetti code-ish. Lots of documentation required because it can be very confusing to know what is impacting what.
Hey Kevin - I apologize if what I’m about to say is silly-I’m a newbie when it comes to CSS-but wouldn’t you solve your problem with "display: contents"? in this way, you get rid of the container that has the scrolling effect and you make the smaller images part of a larger grid...
I am so grateful for this channel. But i am literally at a point why i wish they would just pause for a 10 years( yes i know its not going to happen) as fast as i learn something new there is something else ..i feel like my head will explode.
I wish there was website where I could pick roughly time I was last caught up on front end stuff and it could tell me all the things to catch up quickly to today
День тому
I sometimes say I know CSS better than most developers, but this is another level.
Usually you videos are perfect to share with my junior colleagues as the code is concise and easy to understand. But this React(?) style stuff with styled components and global Sass variables (instead of the more readable module syntax) screams confusion. I understood what you were trying to show, but I'm a Full Stack Developer for 18 years. But even I found it really busy and you really had to know where to look at to not get side tracked. I know you want to promote your course but I don't thinks that's the best way. Most people love your videos because you make complicated topics seem easy. This one seemed like an easy topic made extremely complicated. Just so you can advertise your course?
To be honest not sure why this was so different to you compared to his other content? He usually also has HTML in his videos because you need that to show some CSS. So showing Astro/JSX here doesn't make it that different in my opinion. Other "noise" is there no matter how you look at it. He appropriately focused on CSS and showed the relevant code.
Media query allows querying by viewport or container size only. This allows you to have some CSS be applied only when a specific custom property has a specific value. As Kevin mentioned, in the future it will be possible to also query other styles. We might be able to detect overflow for example and apply styles if element is overflowing. We might be able to apply shadows if element is in "sticky" state without using JavaScript etc.
Yeah, I think this is best with some framework on top like Vue/React and/or Talwind, you can make it much simpler and readable combining those with this as a last resort helper for complex scenarios so you dont have to rebuild components for each layout
I’m going to make my corner of the internet just a little more responsive with this. Pure css programming, very cool stuff.
I believe using 33.33cqw within an established container would be more appropriate than 33.33%
or maybe using calc(100cqw / 3) to skip the floating point "guesswork"
I know why and how it works, but nested @rules looks so weird to me! I'm sure it'll click eventually, though. :)
I swear KPow is a sorcerer; so often it happens that he posts a video about something I’m working on or looking into and this time was no different!
This is an eye opener article, my brain hurts, so I need to try this out a few times to make it stick.
Thanks Kev
This can be used for very interesting stuff together with registered custom properties since they get computed directly.
You can for example declare styles depending on the color scheme (which is not the same as the media feature which always mirrors the system settings).
```
@property --color-scheme-check {
syntax: "";
initial-value: #fff;
inherits: true;
}
:root {
color-scheme: light dark;
--color-scheme-check: light-dark(#fff, #000);
}
@container style(--color-scheme-check: #fff) {
/* Declarations for light color scheme */
}
@container style(--color-scheme-check: #000) {
/* Declarations for dark color scheme */
}
```
Hopefully the `light-dark()` function can be used for other things than colors in the future, but until then, this solution works well enough.
Honestly I would never use this kind of css complexity in a serious product. Container queries are great but using these kind of 'switches' where some classes interdepend on some others and trying apply DRY to css should (imho) be avoided. Even if you can be extremely 'clever' with your css it does not mean you should.
Awesome! For a few months ago I was working on a component and thought: Oh why do we have no option to conditionally add some css with plain css? Now its there^^
Thank you for your nice videos and greetings from germany!
Thank you, Kevin. Always appreciate your videos 👍🙌🙏🤓
I haven't gone too crazy with this but I found a use case where the design had these boxes that were either off-white or white depending on what container they were in, and they could be nested.
Wrote a pair of queries that tested a prop called invert-box, which set the box-color to one or the other and inverted the value on the element for decendents to follow.
Sir please Minimize the cost of your courses for Asian countries ❤❤❤
Container style is a mixin in native css
yes, but you can't select the container itself, which is a shame
amazing, but i still wish we were able to select the container itself
I cannot wait for this to be fully baked 🤯🥳
can you share the figma link as well for learning
Sorry, but this one is part of my course, so it's not publicly available
IDK man. This is relatively new to me (style queries) however it's starting to feel very spaghetti code-ish. Lots of documentation required because it can be very confusing to know what is impacting what.
Hey Kevin - I apologize if what I’m about to say is silly-I’m a newbie when it comes to CSS-but wouldn’t you solve your problem with "display: contents"? in this way, you get rid of the container that has the scrolling effect and you make the smaller images part of a larger grid...
OMG that's brilliant. Thanks for all your awesome videos.
I dream the @supports come in months not years and in all browsers in same time obligatory.... We can dream always - no cost there.
I am so grateful for this channel. But i am literally at a point why i wish they would just pause for a 10 years( yes i know its not going to happen) as fast as i learn something new there is something else ..i feel like my head will explode.
I wish there was website where I could pick roughly time I was last caught up on front end stuff and it could tell me all the things to catch up quickly to today
I sometimes say I know CSS better than most developers, but this is another level.
Looking forward to your first Frontendmasters course!
진짜 자신의 일을 즐기시는 것 같습니다 멋집니다!! ❤
Interesting, but it makes reading css and therefore maintaining css a bit harder
Usually you videos are perfect to share with my junior colleagues as the code is concise and easy to understand. But this React(?) style stuff with styled components and global Sass variables (instead of the more readable module syntax) screams confusion.
I understood what you were trying to show, but I'm a Full Stack Developer for 18 years. But even I found it really busy and you really had to know where to look at to not get side tracked.
I know you want to promote your course but I don't thinks that's the best way. Most people love your videos because you make complicated topics seem easy. This one seemed like an easy topic made extremely complicated. Just so you can advertise your course?
To be honest not sure why this was so different to you compared to his other content? He usually also has HTML in his videos because you need that to show some CSS. So showing Astro/JSX here doesn't make it that different in my opinion. Other "noise" is there no matter how you look at it. He appropriately focused on CSS and showed the relevant code.
What is the name of the theme you use in vscode?
Very nice video. Thank you Kevin!
I watched the whole video but couldn't grasp the point that why this won't be just easier using a media query. Am I missing something here?
Media query allows querying by viewport or container size only. This allows you to have some CSS be applied only when a specific custom property has a specific value.
As Kevin mentioned, in the future it will be possible to also query other styles. We might be able to detect overflow for example and apply styles if element is overflowing. We might be able to apply shadows if element is in "sticky" state without using JavaScript etc.
Is this Astro?
Excellent!!!
Awesome
First
I would prefer to change classes in JS. What you showing is nice to have, but it's code smell and not maintainable.
Yeah, I think this is best with some framework on top like Vue/React and/or Talwind, you can make it much simpler and readable combining those with this as a last resort helper for complex scenarios so you dont have to rebuild components for each layout
Good, but => overcoding....
the frameworks and libraries you use are the result of overcoding
For this it is, but if the var is red then make textcoloe white etc. this can be handy
@@exceed.charge the frameworks we use allow us to use simple code because they are complex. This is us having to write complex code.