Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Which preferences should be included? #29

Open
lukewarlow opened this issue Sep 18, 2023 · 6 comments
Open

Which preferences should be included? #29

lukewarlow opened this issue Sep 18, 2023 · 6 comments

Comments

@lukewarlow
Copy link
Collaborator

lukewarlow commented Sep 18, 2023

The current spec includes all of the MQ5 preference media queries except for forced-colors (see #15 )

This was mainly just for completeness. But questions have been raised in discussions with the CSSWG as to whether we truly need all of them, so this issue is here to discuss that.

Imo they all have valid use cases aside from potentially reducedData that one I struggle to see particularly strong use cases for.

  • colorScheme speaks for itself.
  • reducedMotion It's not uncommon for sites to be over the top with their animations in a way that annoys people who aren't effected bad enough to disable animation system wide. It would be nice if sites were able to honour the preference and also provide a way to reduce animation.
  • contrast isn't an uncommon setting for sites to have, especially ones focussed on accessibility. Not all operating systems have an explicit setting for contrast, and all except for Windows are missing a "low" contrast preference option, because of this it's not unreasonable to assume users may not be able to set their preference correctly and this API would allow the site to step in.
  • reducedTransparency like contrast this doesn't have an explicit OS setting on multiple operating systems (Android, ChromeOS and Linux) so it would be nice to give sites the option to let users control this, especially those that are focussed on accessibility.
  • reducedData aside from completeness I don't see as strong a case for this option as others. Potentially useful for sites that are particularly heavy on data usage that want the option to offer a "lite" mode, even for users who otherwise don't mind data usage?
@lukewarlow
Copy link
Collaborator Author

lukewarlow commented Oct 6, 2023

GitHub has a number of settings that could utilise this API.

In accessibility settings they have a UI that would be replaceable^ with this API making use of the reducedMotion preference.

image

^ Currently the "Enabled" option wouldn't be possible as "no-preference" values are rejected. See #30

In appearance settings they have a UI for picking themes, this includes both light and dark as well as high contrast versions (along with others).

This could be partially implemented using the contrast and colorScheme preferences.

image

@lukewarlow
Copy link
Collaborator Author

lukewarlow commented Oct 20, 2023

Twitter (x) has various settings that could benefit from this API. Unfortunately they currently don't use the system values at all (afaict).

They have an accessibility settings page which could make use of prefersContrast and reducedMotion from this API.

image

They also have a theme setting on their display page which could use colorScheme (would need something additional for the Dim vs Lights Out dark mode)

image

They also have a data saver setting which could use reducedData

Screenshot_20240517-140232.png

@lukewarlow
Copy link
Collaborator Author

Slack has two settings that could benefit from this API.

Firstly in themes they have a color mode setting which could use colorScheme

image

Secondly in accessibility they have an animation setting which could use reducedMotion (though it's would potentially require a "no-preference" value or to change to be System or Reduce)
image

@lukewarlow
Copy link
Collaborator Author

Google Search could benefit from colorScheme

image

@lukewarlow
Copy link
Collaborator Author

Gmail's themes settings could partially make use of colorScheme and contrast

image

@lukewarlow
Copy link
Collaborator Author

MDN is another example of a large site that could use colorScheme.

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant