Add `prefers-handedness` media query for left/right-handed users

[slafleche]

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.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.