[css-mediaqueries] expose user left/right hand preference

Usually, an app/website design will place main CTAs at a place that can be reached easily on a smartphone using the thumb. Usually on the bottom right, however, this could be problematic for left-handed people.

Idea

It would be nice to have the possiblity to adapt websites/apps depending on left/right handed user preference @media prefers-hand: right/left/no-preference (default), which would allow to easily customize interfaces.

Example

.mySuperCTA {
  position: fixed;
  right: 0;
  bottom: 0;
}

@media prefers-hand: right {
  .mySuperCTA {
    right: auto;
    left: 0;
  }
}

Ressources

• https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/ (also source for images)

Start with the proposed @media syntax and examples, then review the linked mobile-design resource and the issue discussion. Done would require an agreed standard for exposing left/right/no-preference and a defined CSSWG implementation path; the payload names no file or test.