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

brandonmcconnell has just created a new issue for https://github.com/w3c/csswg-drafts:

== [mediaqueries-6] `prefers-interaction-direction` media query & `interaction-direction` property ==
## Introduction
This proposal introduces a new media query, `prefers-interaction-direction`, which allows web developers to adapt their layouts and user interfaces based on the user's preferred interaction direction. The media query informs the website about the optimal placement of interactive elements, such as login forms and navigation bars, to enhance user experience and accessibility.

This could be very helpful to users for several reasons:
* accessibility, supporting less able users
* right/left handedness-based preference/ability
* general/stylistic/usability preference

## Syntax
The `prefers-interaction-direction` media query accepts the following values:
- `left`
- `right`
- `top`
- `bottom`

The media query can be used as follows:

```css
@media (prefers-interaction-direction: left) {
  /* Styles for left-side interaction preference */
}

@media (prefers-interaction-direction: right) {
  /* Styles for right-side interaction preference */
}

@media (prefers-interaction-direction: top) {
  /* Styles for top-side interaction preference */
}

@media (prefers-interaction-direction: bottom) {
  /* Styles for bottom-side interaction preference */
}
```

## Combining Interaction Directions
The `prefers-interaction-direction` media query allows for combining interaction directions to target specific user preferences. For example:

```css
@media (prefers-interaction-direction: top right) {
  /* Styles for top-side and right-side interaction preference (independent, not corner-specific) */
}

/* same as this: */

@media (prefers-interaction-direction: top) and @media (prefers-interaction-direction: right) {
  /* Styles for top-side and right-side interaction preference (independent, not corner-specific) */
}
```

This feature enables web developers to create more tailored user experiences based on the combination of the user's preferred interaction directions.

## Logical Equivalents
⚠️ I am not sure if logical equivalents would be needed here, but I wanted to call it out for further discussion.

To ensure consistency with other CSS features and to support internationalization, the `prefers-interaction-direction` media query could also be extended to support logical equivalents, allowing developers to create layouts that adapt to different writing modes and directions.

**I would defer to the CSSWG to determine the usefulness and practicality of logical equivalents for this feature.**

```css
@media (prefers-interaction-direction: block-start) {
  /* Styles for block-start interaction preference */
}

@media (prefers-interaction-direction: inline-end) {
  /* Styles for inline-end interaction preference */
}

@media (prefers-interaction-direction: block-start inline-end) {
  /* Styles for block-start and inline-end interaction preference (independent, not corner-specific) */
}
```

## Overriding the User Preference
To provide flexibility and control to web developers, a new CSS property, `interaction-direction`, is introduced to override the user's preferred interaction direction. This property functions similarly to the `color-scheme` property, which overrides the `prefers-color-scheme` media query.

```css
.login-form {
  interaction-direction: right;
}

.login-form {
  /* Prevents the user agent from overriding the interaction direction for the element. */
  interaction-direction: only right;
}
```

The `interaction-direction` property accepts the same values as the `prefers-interaction-direction` media query, allowing web developers to explicitly set the interaction direction for specific elements.

```css
/* Default value */
interaction-direction: normal;

/* Single-direction values */
interaction-direction: top;
interaction-direction: bottom;
interaction-direction: left;
interaction-direction: right;

/* Direction-paired values */
interaction-direction: top left;
interaction-direction: top right;
interaction-direction: bottom left;
interaction-direction: bottom right;

/* Global values */
interaction-direction: inherit;
interaction-direction: initial;
interaction-direction: revert;
interaction-direction: revert-layer;
interaction-direction: unset;
```

Any of the "Single-direction values" or "Direction-paired values" listed above could also be used with `only` to override default UA behavior.

One consideration is whether "Direction-paired values" should support `only` used once for both values (e.g. `interaction-direction: only top left;`) or if it should be used per value as needed (e.g. `interaction-direction: only top only left;`).

## Conclusion
The introduction of the `prefers-interaction-direction` media query and the `interaction-direction` property would empower developers to create more dynamically responsive and accessible user interfaces. By adapting to the user's preferred interaction direction, websites can enhance the user experience and cater to diverse user preferences and needs.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10244 using your GitHub account


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

Received on Tuesday, 23 April 2024 19:47:03 UTC