Re: [mediaqueries] Accessing elements' properties in media queries

Hi Adam,

Please note we don't use this list for technical discussion anymore, that has all moved to GitHub. I replied to you in the issue. :)

Cheers,
Lea

--
Lea Verou
👩🏽 (she/her)

Web standards (W3C TAG, CSS WG), HCI research at MIT CSAIL, Open Source

🔗 https://lea.verou.me
🐦 @leaverou





> On Aug 27, 2023, at 05:25, Adam Sobieski <adamsobieski@hotmail.com> wrote:
> 
> 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.