What's the right way to support mobile screens in the UA stylesheet?

[mfreed7]

For some historical context, see https://github.com/whatwg/html/issues/624 which is about a media query that used to be in the spec for the <dialog> element. The original purpose was to support mobile screens by "going full-screen" for dialogs on small screen devices.

This issue will be coming back as we work to introduce the <selectmenu> element. On most browsers, the existing <select> element goes into a full-screen, mobile-specific mode on small screen devices. This is intuitive and generally helpful for users - it makes selecting an option less tedious on these devices. Since the <selectmenu> element is fully-developer stylable, we would expect developers to do something similar. But we'd also like to have good default (interoperable, standardized) styles for the <selectmenu> element. For that purpose, it would seem (to me at least) to make sense to have a screen size media query included in the default styles, which renders the dropdown list in something like a full-screen mode.

Since it sounds like the only precedent for this type of UA stylesheet addition was the old <dialog> rule, I thought it'd be good to discuss the right way to approach this.

@dandclark @domenic @zcorpan @foolip @Hixie @annevk

[sefeng211]

@emilio Emilio, do you have thoughts about this since in the past we had tried to done something similar for <dialog>?

[zcorpan]

Mobileness is exposed in navigator.userAgentData.mobile: https://wicg.github.io/ua-client-hints/#getters

Would it be appropriate to switch from "mobileness" to instead use pointer: coarse media query for <select> and <selectmenu>?

Also see https://github.com/whatwg/html/issues/8189

[mfreed7]

Mobileness is exposed in navigator.userAgentData.mobile: https://wicg.github.io/ua-client-hints/#getters

Right, but that's not exposed as a media query, right? Perhaps the best solution would be to expose mobileness in a media query? I'm sure there's some context for why that's not already there, but I don't know what it is.

Would it be appropriate to switch from "mobileness" to instead use pointer: coarse media query for <select> and <selectmenu>?

The problem with that is that it'll match for tablets, and the real context for the question is "small screens". On a tablet, current behavior (in my quick testing) for <select> is to show the same view as desktop.

Edit: after thinking about it for a second, perhaps the context really is "coarse pointers". I.e. the point of the special screen on mobile is that it's hard to pick small options with your finger. Existing browser behavior is to only do that on small screens, but perhaps the discussion really should be about the pointer type? I just know that people (me) get annoyed when a desktop site does something different on a tablet screen, and this may be one of those things.

Also see #8189

Interesting issue! I did not know we had some hack to allow <hr> inside select, that pains me.

[zcorpan]

Right, but that's not exposed as a media query, right?

Indeed. It could be; filed https://github.com/w3c/csswg-drafts/issues/7696.

The problem with that is that it'll match for tablets, and the real context for the question is "small screens". On a tablet, current behavior (in my quick testing) for <select> is to show the same view as desktop.

I tested Safari on iPad and Chrome on Galaxy Tab with BrowserStack, and it's not quite the same as desktop but also not the same as mobile.

select multiple is in an element-anchored popup instead of a screen-anchored popup in Safari. select is a dropdown in tablet Chrome but a screen-anchored popup on mobile, but select multiple has the same behavior in mobile Chrome as tablet Chrome.