I propose adding a new media query to detect user handedness preference, similar to existing `prefers-*` queries like `prefers-reduced-motion` and `prefers-color-scheme`.
Proposed syntax:
```css
@media(prefers-handedness: left) {
/* Styles for left-handed users */
}
@media(prefers-handedness: right) {
/* Styles for right-handed users */
}
```
Use case:
Handedness significantly affects UI interaction, particularly on mobile devices where touch targets and navigation controls should ideally be positioned for comfortable thumb reach. Approximately 10% of the population is left-handed, yet most mobile UIs default to right-hand optimization.
Practical applications:
Positioning floating action buttons and navigation controls on the appropriate side
Mirroring toolbar layouts for thumb accessibility
Mirroring toolbar layouts for thumb accessibility
Adapting swipe gesture directions
Optimizing one-handed mobile interface layouts
Current situation:
Developers currently have no way to detect handedness preferences without building custom in-app settings. This forces users to adapt to right-handed defaults or requires each app to implement individual solutions.
Precedent:
This follows the established pattern of existing accessibility and preference media queries (`prefers-reduced-motion`, `prefers-contrast`, `prefers-color-scheme`, etc.) that expose OS-level user preferences to web content.
OS integration:
Many mobile operating systems already have handedness settings (particularly for keyboard placement). This media query would expose that existing preference to web applications.
This seems like a straightforward accessibility improvement that would benefit a significant portion of users with minimal implementation burden.
... View more