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

> The initial layout is fast if the relevant CSS is fast to arrive. Can we simply advise developers to make sure the layout structure of their initial viewport is laid out by inline styles? Is that a reasonable thing to ask?

I don't think it's reasonable. Maintaining an accurate set of inline styles for the initial viewport is a very hard task and I've never met a team who does it well. (Sidenote: it is very annoying to see this recommandation in performance tooling as it is quite unrealistic)

***

Currently, responsive images can be fetched before the external CSS has been parsed. Changing this behaviour because of the introduction of container queries seems like a breaking change to me. I think browsers could keep the existing behaviour if no condition in sizes targets a container. Using the draft syntax:

```html
<!-- Starts fetching with only HTML known -->
<img srcset="elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="elva-fairy-800w.jpg"
     alt="Elva dressed as a fairy">
```

```html
<!-- Waits for external CSS to choose an image to fetch -->
<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">
```

-- 
GitHub Notification of comment by rik
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5889#issuecomment-780908870 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 17 February 2021 22:55:45 UTC