Hey Chris, thank you so much for doing this AMA. Just wanna start off by saying that I admire your work a lot and thank you for your part in CodePen and CSS-Tricks. I feel that being a part of both of these platforms is what got me into learning front-end development in the first place so thank you so much.
My question is what is something that you wish we could add in CSS? and what has been inspiring you these days?
what is something that you wish we could add in CSS?
I feel like we all should take every opportunity someone asks this and scream Container Queries! until we get them.
The idea is that we should be able to write CSS that says "When this element is this wide, this CSS should take effect" (and not just width, but whatever media queries we have at the page level already).
I want to write a card component that shuffles itself around based on how wide it is, not how wide the page is, because there isn't always a direct connection between those two things (e.g. a card component can show up in a narrow sidebar on a large screen, but be full-width on a tablet or something).
EVERY component can be in a situation like that, so for the love of CSS, let me write media queries scoped to those components. I echo a lot of other people when I saw that if we had this, the vast majority of media queries we write would be these, not page-level.
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hey Chris, thank you so much for doing this AMA. Just wanna start off by saying that I admire your work a lot and thank you for your part in CodePen and CSS-Tricks. I feel that being a part of both of these platforms is what got me into learning front-end development in the first place so thank you so much.
My question is what is something that you wish we could add in CSS? and what has been inspiring you these days?
I feel like we all should take every opportunity someone asks this and scream Container Queries! until we get them.
The idea is that we should be able to write CSS that says "When this element is this wide, this CSS should take effect" (and not just width, but whatever media queries we have at the page level already).
The best use-case demo out there is Philip Walton's page.
I want to write a card component that shuffles itself around based on how wide it is, not how wide the page is, because there isn't always a direct connection between those two things (e.g. a card component can show up in a narrow sidebar on a large screen, but be full-width on a tablet or something).
EVERY component can be in a situation like that, so for the love of CSS, let me write media queries scoped to those components. I echo a lot of other people when I saw that if we had this, the vast majority of media queries we write would be these, not page-level.