[mediaqueries] Accessing elements' properties in media queries #9211
Description
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.