[mediaqueries] Accessing elements' properties in media queries

[AdamSobieski]

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.

[LeaVerou]

Looking beyond the proposed syntax, I think what is actually being proposed here is to be able to use container queries in addition to media queries as a criterion to select <source>, which is actually quite reasonable. It may make sense to expand this to other CSS conditionals beyond media queries (e.g. I can think of use cases that would benefit from @supports too).

@AdamSobieski it would be very productive to share the use cases that led you to propose this. What did you need to do that required picking <source> based on element width? We tend to start from that when designing new CSS features, we need to be clear on what problem we're solving before designing a solution. You mention reflowable video content, could you expand on that? Is that the only use case you've come across?

[romainmenke]

Looking beyond the proposed syntax, I think what is actually being proposed here is to be able to use container queries in addition to media queries as a criterion to select , which is actually quite reasonable.

I think this is also discussed here : #5889

[AdamSobieski]

@LeaVerou, thank you for the hyperlink to more information about container queries.

The origin of these ideas traces back to some exploration of new features for video, e.g., reflowable video content where videos could, when resized, seamlessly switch between video tracks. Presently, videos can make use of multiple video tracks to provide differently scaled versions of the same content when resized. The gist of reflowable video content is that videos' contents and layouts thereof could be varied as the videos were resized. I was watching Bloomberg TV (US BTV+ stream) and thought about how that video's contents and layouts thereof could be varied as it were resized and using other dynamic media queries.

I am also thinking about reflowable video content in combination with compositable video content where multiple layers of video content could be streamed for client-side compositing. An example, here, is a news broadcast where background video content, a news anchor speaking, could be streamed at a variable bitrate and a foreground layer, a scrolling news ticker, could be streamed at a constant bitrate. In this example, the foreground layer could also be HTML5 or otherwise accessible hypervideo content.

You mention reflowable video content, could you expand on that? Is that the only use case you've come across?

Brainstorming, here are some more discussion points and use cases:

Responsive Video

Responsive video can be considered as a natural extension of the ideas and principles of responsive design and responsive images.

Charts, Diagrams, Figures, Graphs, Infographics, Maps, Plots, Tables, and Visualizations

Responsive images and video could be useful for charts, diagrams, figures, graphs, infographics, maps, plots, tables, and visualizations. The capability to dynamically select from multiple different image sources or video tracks can be useful for efficiently communicating desired information as best possible using available regions of display devices. Responsive infographics could gracefully degrade when downscaled, for instance, by providing fewer data points or by using abstraction.

With artificial intelligence (see, for example, here), multiple output visualizations could be automatically generated for a set of input data, each image source or video track efficiently communicating for a different range of display sizes.

Resizable and Dockable Panels

We can consider resizable panels (see, for example, here, demos here, e.g., this one) where such panels could have <video> elements in them. As envisioned, videos would be desired to resize as panels were resized by end-users. With reflowable video content, <video> elements' sources or video tracks could be dynamically selected for various configurations and dynamic layouts of resizable panels.

We can also consider dockable panels (see, for example, here, demo here) where resizable and dockable panels could have <video> elements in them. As these video elements were resized, video tracks could be selected based on the widths and heights of the <video> elements.

As envisioned, reflowable videos, potentially synchronized to one another, would each contribute to and combine together to provide resultant user experiences.

Dashboards and Collaborative Dashboards

With reflowable video content, new possibilities can be envisioned and delivered for dashboard-related user experiences. These possibilities include enabling end-users to stream reflowable videos into resizable and/or dockable panels.

End-users could communicate and collaborate while using dashboards (e.g., via WebRTC). End-users could, for instance, highlight contents on one another's dashboards to draw attention, discuss data visualized in shared panels, suggest layouts of panels for one another, create new panels with reflowable video content, and recommend adding panels from their dashboards to other end-users' dashboards.

Education

Video is a component of digital educational materials, e.g., digital textbooks. With video, educators can stream live or recorded lectures and can provide dynamic charts, diagrams, figures, graphs, infographics, maps, plots, tables, and visualizations. Reflowable video content, responsive video, can enhance digital educational materials across a variety of devices.

Entertainment

<video> elements could select video tracks based on the widths, heights, and/or aspect ratios of the elements. Video content could be produced with multiple intended aspect ratios and end-users could resize <video> elements to select which one to make use of, e.g., while multitasking with multiple panels in a window or multiple windows on a desktop. Video producers could format contents for multiple sizes or aspect ratios using techniques beyond simple cropping or rescaling.

Shopping

We can consider a Web-based store with a set of items, each item having a video thumbnail. When end-users hover over an item's video thumbnail, it might be desired for it to play. When end-users click on, or select, an item's video thumbnail, it might be desired for the video thumbnail to glide to a more prominent position on-screen while also increasing significantly in size such that hypertext content specific to the item could be loaded and displayed elsewhere on-screen. The gist, here, is envisioning a seamless item browsing experience with reflowable video content and smooth animations and transitions.

Mobile Computing

Web developers might want to be able to declare <video> elements which could, before or while playing, switch video tracks in response to end-users' mobile devices being switched between portrait and landscape orientations.

[AdamSobieski]

A 2020 article (https://css-tricks.com/fluid-width-video/) indicates some of the reasons why, historically and contemporarily, fluidly scaling, responsive, and reflowable video content have been and remain complex for Web scenarios.

In addition to potential uses of markup and media queries to switch video sources based on (container) media query properties, under discussion (here and elsewhere) are technologies to enable video streams to be able to switch time-synchronized video tracks as a result of those videos being resized.

Some existing video streaming technologies support alternative renditions. These have traditionally been interpreted as different scalings of the same content. Under discussion are videos which could switch between time-synchronized video tracks with different content, layouts of content, or otherwise reflowed versions of content.