[wanda]

What's the use case though?

@container queries have been discussed/proposed before, but I've never really experienced a time where I wished they were a thing.

For different screen resolutions and orientations, you have media queries, and I find if you build for mobile first and expand the UI for tablet and desktop with min-width media queries, it's generally pretty straightforward. It may seem like an ugly hack but generally speaking the main question is what device is being used. Most users don't resize their windows on desktop all that much like we do.

With image sizing for containers that may change size, you can abuse background-image and background-size: cover for a quick solution, and for a long term solution you can use an image element and a parent element.

  .img-responsive-cell {
    /*
      this is a div or something
      parent element to the img.
      you would size this 
      according to a grid 
      system containing 
      element for width and 
      you could sort the 
      height out with 
      %padding or something 
      else depending on what 
      you're making
    */
    position: relative;
    overflow: hidden; 
    /* 
      overflow hidden will 
      make sense in a moment 
    */
  }

  .img-responsive {
    /*
      the img element
    */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;

    \*
      or more recently you 
      can do ->

      width: 100%;
      height: 100%;
      object-fit: cover;
    *\
  }

This lets the image grow to fill the containing element, maintain aspect ratio so it will essentially be zoomed, centered with left/top and transform, and this also makes for easy hover effects, like so:

  .img-responsive:hover {
    transform: translate(-50%,-50%) scale(1.2);
  }

Now yes, this isn't attractive and it doesn't give you fine control over what image you're loading, but CSS is ugly anyway and it's a way to achieve a one-size-fits-all solution for the sake of getting something working responsively early in the lifespan. Optimise the hell out of the images and it'll be ok for a minimum viable product.

----

I think the problem with container queries as a concept is that JavaScript is a naturally better tool for the job when it comes to loading media dynamically -- after all you probably want to lazy load images anyway, especially below the fold or if you have a lot of dynamic views.

As someone who has tried to browse the internet on public transport in the UK, I'm a big advocate of lazy loading.

If your website lazy loads images, it's pretty simple to build in a little extra logic to load particular images for particular container element size-ranges.

----

Also, bit off topic but related: in the absence of container queries, we use media queries and srcset, but maybe background-image + media queries might seem like a good plan?

However if I recall correctly as soon as the stylesheet is loaded it downloads all the images referenced in it, so it doesn't achieve much except to reduce strain on painting I guess.

That's why I just keep things simple to begin with.

[extra88]

FYI, a container queries implementation is in the Chrome testing browser.

> Most users don't resize their windows on desktop all that much like we do.

No, but their windows do start out at wildly different sizes. It's not like everyone who's not a web dev leaves their browser maximized all the time.

Container queries are for making micro layouts. Sometimes a layout alternative can benefit from loading different media but that's not the primary purpose.

> maybe background-image + media queries might seem like a good plan?

If an image is content and not purely decorative, it belongs in the document, the HTML, where it has an 'alt' attribute for a text alternative.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Contain...