Re: [csswg-drafts] [mediaqueries] Accessing elements' properties in media queries (#9211)

The origin of these ideas traces back to some exploration of new features for video, e.g., [reflowable video](https://github.com/w3c/media-and-entertainment/issues/102) where videos could, when resized, seamlessly switch between video tracks. Presently, videos can make use of multiple tracks to provide scaled versions of the _same_ content when resized and the gist of reflowable video is that content could be varied per the dynamic size of the video. I was watching [Bloomberg TV (US BTV+ stream)](https://www.bloomberg.com/live/us), specifically, and thought about how layouts of video-based content could be varied per dynamic media queries, essentially.

@LeaVerou, thank you for the hyperlink to more information about [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries).

With respect to `<picture>` and `<source>` elements, adding some more use cases makes sense. For starters, we could consider a Web-based store.

### Use Case 1: A Web-based Store

Let us consider a Web-based store with a set of items with each having a thumbnail displayed in a vertically scrollable panel.

When end-users hover over an item's thumbnail, it is desired for it to resize to twice its size or more. When end-users click on, or select, an item's thumbnail or its hover-scaled version, it is desired for the item to glide to a prominent position on screen so that hypertext content specific to the item could be loaded and displayed elsewhere on screen. The gist, here, is envisioning a seamless item browsing experience with smooth animations and transitions.

This first use case appears to involve CSS animations, transitions, and varying the source of a `<picture>` element based on its properties, in this case its width and/or height. Imagining this combination, the image would be scaled and then visually sharpen, for example, as it blended into a new `<source>` image selected based on a dynamic media query.

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


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

Received on Sunday, 27 August 2023 17:20:59 UTC