[mediaqueries] Accessing elements' properties in media queries

Cascading Style Sheets Working Group,

Hello. I recently opened a GitHub issue about accessing elements' properties in media queries. The issue broaches the options of: (1) adding new element-width and element-height features, and (2) adding a useful new style() function.

The issue is available online here: https://github.com/w3c/csswg-drafts/issues/9211 and is also copied in the postscript below.

I look forward to discussing these ideas with you on GitHub and/or in this mailing list. Thank you!


Best regards,
Adam Sobieski

P.S.:

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<https://github.com/w3c/media-and-entertainment/issues/102>, 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<https://html.spec.whatwg.org/multipage/images.html#srcset-attribute> 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.