17 votes

CSS container queries - An upcoming CSS feature that will enable style changes based on the size of the containing element

5 comments

  1. [2]
    aphoenix
    Link
    Any time something moves from "a solution you do with javascript" to "vanilla CSS" then that's great. I'm really looking forward to this addition to CSS - I see a lot of uses for it, and the card...

    Any time something moves from "a solution you do with javascript" to "vanilla CSS" then that's great. I'm really looking forward to this addition to CSS - I see a lot of uses for it, and the card in the example is an especially easy to follow one.

    9 votes
    1. userexec
      Link Parent
      Even as a primarily JS developer I'm 100% with you on that one. I want styles to be in CSS, because that's where I expect styles to be. Doesn't matter if they're Sass or Less or whatever, I just...

      Even as a primarily JS developer I'm 100% with you on that one. I want styles to be in CSS, because that's where I expect styles to be. Doesn't matter if they're Sass or Less or whatever, I just don't want to get hit with a JavaScript drive-by when something could have been handled within a normal, accessible separation of concerns.

      4 votes
  2. Deimos
    Link
    Lots more info in this explainer by Miriam Suzanne, the author of the proposal: https://css.oddbird.net/rwd/query/explainer/

    Lots more info in this explainer by Miriam Suzanne, the author of the proposal: https://css.oddbird.net/rwd/query/explainer/

    4 votes
  3. Wes
    Link
    Cool. This is one of those features that only seems obvious in hindsight. I'm sure it will pair very well with grid layouts. For me that feature is :has(). I've been waiting for a parent selector...

    Cool. This is one of those features that only seems obvious in hindsight. I'm sure it will pair very well with grid layouts.

    I haven’t been more excited for a CSS feature like I’m now in the past six years I spent as a front-end developer.

    For me that feature is :has(). I've been waiting for a parent selector for over a decade, and this is the closest we've gotten.

    It's not my preferred syntax. I saw one proposal that used an exclamation mark to choose the selected element. So article! > h2 would style the article, not the h2. I thought that was a really nice approach. It would probably break a lot of CSS parsers though, and it doesn't have the same function() syntax of today's more programmatic features.

    Anyway, didn't mean to derail. The intro just got me thinking about this old feature. I might end up writing a post just like this if :has() ever comes into existence.

    4 votes
  4. Apos
    Link
    I've been wishing for this feature for such a long time!

    I've been wishing for this feature for such a long time!

    3 votes