search

EdCharbeneau / BlazorSize

Blazor browser size interop for matchMedia and browser window size at runtime.
336 stars 39 forks source link

MediaQuery for component instead of whole screen size #74

Open tostein opened 2 years ago

tostein commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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: https://github.com/w3c/csswg-drafts/issues/5796.

ApacheTech commented 3 months ago

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 commented 3 months ago

There is no Browser API to support this 😞