Re: [csswg-drafts] [mediaqueries-5] `prefers-interaction-direction` media query & `interaction-direction` property (#10244)

@ByteEater-pl The problem this solves is less about the flow of content and more about which side of each axis a user prefers interactive elements to be on.

There would be no difference between `top right` and `right top`.

Here are some examples, one per axis:

* X (left/right) — login form on left vs. right side
   
   ![](https://github.com/w3c/csswg-drafts/assets/5913254/af806c5c-a339-404f-8ace-a0decfe2beb1)
   https://twitter.com/AdamFard_/status/1782733978786484237

* Y (top/bottom) — search bar on top vs. bottom side
   
   ![](https://github.com/w3c/csswg-drafts/assets/5913254/e8745fb3-07ce-431a-9230-3ea44e8ac73a)
   https://www.reddit.com/r/browsers/comments/1753u9h/top_search_bar_vs_bottom_search_bar_which_are_you/

There are rare instances I can think of where someone may want to query both axes together, so it may be more confusing to allow those to be queried together. This is certainly something I would like to collect more feedback on.

One example of why querying both together could be problematic is if someone queries both together to try to set up a corner-specific element without accounting for a use case where someone has no preference set on only one axis, which would be extremely common.

```css
.corner-element {
  position: fixed;
  @media (prefers-interaction-direction: no-preference) { inset: auto 0 0 auto; }
  @media (prefers-interaction-direction: top left)      { inset: 0 auto auto 0; }
  @media (prefers-interaction-direction: top right)     { inset: 0 0 auto auto; }
  @media (prefers-interaction-direction: bottom left)   { inset: auto auto 0 0; }
  @media (prefers-interaction-direction: bottom right)  { inset: auto 0 auto 0; }
}
```

This is a non-issue if—like with `prefers-color-scheme`— we don't include a `no-preference` option, but I think including `no-preference` might be more valuable for `prefers-interaction-direction` as it may be considered a more impactful accessibility setting.

If the system default were `bottom` and `right`, apps might all start aligning content to cater to `bottom` and `right` preferences when, in most cases, this is not needed. With that in mind, users would enable this preference on a purely opt-in basis, and each axis would be set to `no-preference` by default.

In cases like the example above, it might be simpler to use one rule per axis:

```css
.corner-element {
  position: fixed;
  @media (prefers-interaction-y: no-preference) or (prefers-interaction-y: bottom) {
    bottom: 0;
  }
  @media (prefers-interaction-y: top) {
    top: 0;
  }
  @media (prefers-interaction-x: no-preference) or (prefers-interaction-x: right) {
    right: 0;
  }
  @media (prefers-interaction-x: left) {
    left: 0;
  }
}
```

We can simplify further by setting defaults on the element styles itself, outside the queries:

```css
.corner-element {
  position: fixed;
  bottom: 0;
  right: 0;
  @media (prefers-interaction-y: top) {
    top: 0;
    bottom: auto;
  }
  @media (prefers-interaction-x: left) {
    left: 0;
    right: auto;
  }
}
```

I anticipate most developers using `prefers-interaction-direction` this way.

It would still be vital to include `no-preference` as an option here, as it is very different from `prefers-color-scheme,` which deprecated the `no-preference` option.

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


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

Received on Thursday, 25 April 2024 17:21:46 UTC