Re: [csswg-drafts] [mediaqueries] Consider exposing "mobileness" as a media query (#7696)

In working on this further for `<selectlist>` (it got renamed), it occured to me that what we really want is a `@media` query that means "this is a small screen", without having to haggle on an exact value for what "small" means. For example, we'd like a `<selectlist>` to present a different interface when on a "phone" sized screen: larger tap targets, more padding, take over more of the screen with the menu. Much like native `<select>` pickers do today on iOS and Android. The media query that currently encapsulates that is something like:

```css
@media (pointer: coarse) and (max-width: 10cm) {
```

The `pointer:coarse` is important because you need larger touch targets when using a coarse pointer like a finger. The `max-width:10cm` is important because on such a small screen, the users needs to have things de-cluttered to focus on the picker. On a larger screen such as a tablet, it isn't appropriate to take over the entire screen, since the user has a lot of real estate to work with.

The above CSS is functional and achieves the use case. However, `max-width: 10cm` isn't great. Why 10cm? Why not 8 or 12? There's no exact breakpoint that can be identified to define the difference between "small screen" and "large screen".

What would be great is something like:

```css
@media (pointer: coarse) and (screen-size: medium) {
```

I said `screen-size: medium` because I want to leave room for ultra-small screens like watch faces, which could be `screen-size: small`. These need better names, but I think it's a feature, and not a bug, that they're not strictly defined. It'll be up to the UA, and changing technology, to define what screen sizes count as large vs. medium vs. small. But that frees developers from having to worry about exact values, and avoids the standards debate about a standardized value being memorialized in the spec.

Is that something the CSSWG would be interested in thinking about?

-- 
GitHub Notification of comment by mfreed7
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7696#issuecomment-1692412433 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 August 2023 21:08:43 UTC