[mediaqueries] Accessing elements' properties in media queries

Introduction

Hello. I would like to open an issue for discussing adding the expressiveness for accessing elements' properties in media queries.

element-width and element-height

One idea is adding element-specific features to media queries, e.g., element-width and element-height.

As broached here, in a discussion about reflowable video content, such 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:

<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:

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

style() Function

Looking at media queries interoperability with CSS functions, e.g., calc(), var(), env(), and attr(), another idea is based on CSS functions, per:

<picture id="p123">
  <source media="(style(p123, width) > 800px)" src="wide.png" />
  <source media="(style(p123, width) <= 800px)" src="normal.png" />
</picture>

When the element identifier is omitted, it could be specified to refer to the containing element, per:

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

Developers might want a means of accessing the style properties of the root element. This might be expressed:

<picture id="p123">
  <source media="(style(:root, width) > 800px)" src="wide.png" />
  <source media="(style(:root, width) <= 800px)" src="normal.png" />
</picture>

Also possible is that, perhaps resembling more the syntax of attr(), the arguments to a style() function could be such as to have the style property name first and optional identifier second:

<picture id="p123">
  <source media="(style(width, p123) > 800px)" src="wide.png" />
  <source media="(style(width, p123) <= 800px)" src="normal.png" />
</picture>

<picture id="p123">
  <source media="(style(width, :root) > 800px)" src="wide.png" />
  <source media="(style(width, :root) <= 800px)" src="normal.png" />
</picture>

Conclusion

While related approaches include the srcset attribute, more complex and descriptive expressions could be formed and utilized with media queries capable of referring to elements' properties, e.g., width and height.

Thank you. I look forward to discussing these topics and any other approaches to the desired functionality with you.

This is an open-ended proposal about accessing element properties in media queries, with examples for and and references to the linked W3C discussion and srcset specification. Start by reading those references and the proposed element-width, element-height, and style() approaches. Done would require an agreed specification direction and defined interoperability and implementation work; no repository file or test is identified.