A way to react to Media Queries

[Superpat]

Here's a first idea:

<p data-media-query="{large: `(min-width: ${mySignal.value}px)`}">
  Hello 
    <span data-show="large.value">Large</span>
    <span data-show="!large.value">Small</span>
</p>

This could be combined with a signal watcher to run an expression when the value of the media query changes, though I cant remember if we have an easy way to do that.

[Superpat]

My main use case is toggling the open attribute on <details> and <dialog> elements, but I'm sure people will find other uses.

[Superpat]

This page would probably be useful for whomever attempting an implementation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries

The screen change event might be a good way to do it too: https://developer.mozilla.org/en-US/docs/Web/API/Screen/change_event but it would require a polyfill on firefox and ios.

[bencroker]

This feels like it would make a good third-party plugin? I’m not sure such a niche requirement should be a core feature.

[Superpat]

Is allowing responsive design a niche feature ? Since that's really what it's about. I'm not against it being third party, but I think there's value in this.

Independently of where it's implemented, a discussion about how it could be implemented is interesting.

[bencroker]

When I think of responsive design I think of CSS media queries. Requiring JS features for responsive design feels niche, at least to me. Can you explain your use-case in some more detail? Maybe I haven’t fully understood it.

[Superpat]

Well I worked on a website recently that made use of

, on a large screen it made sense for it to be opened by default, but not on a small screen. Currently there's no way to open them via css, you can only do so with javascript.

And I know you can set them to open by default in html, but it's an on or off thing, you cant make it dependent on the screen size.

[bencroker]

So just detect the screen size and decide whether to open or close the details element on page load. I personally don't see any practical need to drive this behaviour using signals.

[Superpat]

Media queries also handle orientation changes, which can happen after load.

[Superpat]

And screen size changes are rarer after load time, but they can also happen

[bencroker]

Sure, but I'd find it strange if I rotated my device and the details I had open was suddenly closed (and vice versa).

[Superpat]

That's a good point, but I still think there's value in supporting a basic browser api like media queries. Even if it's not a std plugin, it's still interesting to have a conversation about a possible interface for it.

[bencroker]

If there’s more to discuss, please take the lead on it.

[bencroker]

Maybe. I’ll convert this to a discussion and you can take the lead on it.

[bencroker]

Closing due to inactivity.