MediaQuery for component instead of whole screen size

[tostein]

It would be nice to have a MediaQuery component which does not use the whole screen width to match but only a specific component width which i can relate to with an ID property.

Something like
<MediaQuery Media="@Breakpoints.OnlyMedium" ID="my-div" @bind-Matches="IsMedium" />

Would that be an interesting feature request?

[EdCharbeneau]

It's a great idea, however there's no native support for this in the browser. The reason BlazorSize is possible is because the browser has an API called matchMedia which provides events and data for screen size changes.

[tostein]

You're right. It is already great to have these events available for Blazor.

Maybe at some point in time the @container queries are established and supported by the browsers: w3c/csswg-drafts#5796.

[ApacheTech]

Container Queries are now over 90% supported. This would be a really nice feature to add.

https://caniuse.com/css-container-queries

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

[EdCharbeneau]

There is no Browser API to support this 😞