W3C home > Mailing lists > Public > public-css-archive@w3.org > January 2021

[csswg-drafts] [css-conditional] [css-contain] `srcset` and `sizes` interaction with container queries (#5889)

From: Una Kravets via GitHub <sysbot+gh@w3.org>
Date: Fri, 22 Jan 2021 20:58:38 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-792301107-1611349117-sysbot+gh@w3.org>
una has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-conditional] [css-contain] `srcset` and `sizes` interaction with container queries ==
With container queries, the way developers write responsive styles changes from querying the global page for information to querying for a parent with containment for information. This shifts responsive paradigms. One case I can forsee is the need to query the parent for sizing and placement of its children. This includes `srcset` and `sizes` for [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

See also, the need for `cw` and `ch` units: #5888

Would the following be able to work with container queries instead of global queries? (ignore syntax, just trying to show the idea):

```
<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="container(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">
```

```
<picture>
  <source container="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source container="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5889 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 22 January 2021 20:58:39 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:38 UTC