[csswg-drafts] [mediaqueries] Element-specific features (#9211)

AdamSobieski has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries] Element-specific features ==
For envisioned uses with the `media` attributes on those `<source>` elements contained by either `<picture>` and `<video>` elements, I would like to propose the addition of element-specific features to CSS Media Queries, e.g., `element-width` and `element-height`.

As broached [here](https://github.com/w3c/media-and-entertainment/issues/102), in a discussion about reflowable video content, such CSS Media Queries functionality would enable resizable `<picture>` and `<video>` elements to have their sources dynamically selected based on their instantaneous widths and heights rather than those of their containing viewports.

For `<picture>` elements, this would resemble:

```xml
<picture id="p123">
  <source media="(element-width > 800px)" src="wide.png" />
  <source media="(element-width <= 800px)" src="normal.png" />
</picture>
```

For `<video>` elements, this would resemble:

```xml
<video id="v123">
  <source media="(element-width > 800px)" src="wide.mp4" />
  <source media="(element-width <= 800px)" src="normal.mp4" />
</video>
```

While related approaches include the [`srcset`](https://html.spec.whatwg.org/multipage/images.html#srcset-attribute) attribute, more complex and descriptive expressions could be formed and utilized with CSS Media Queries capable of referring to elements' properties, e.g., width and height.

Thank you. I look forward to discussing these topics with you.

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


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

Received on Monday, 21 August 2023 11:00:08 UTC