Intent to Ship: Media Queries: prefers-reduced-transparency feature

[Luke]

Contact emails

lukewa...@gmail.com, lu...@warlow.dev

Explainer

None

Specification

https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency

Summary

Adds the `prefers-reduced-transparency` feature, which lets authors adapt web content to user-selected preference for reduced transparency in the OS, such as the 'Reduce transparency' setting on macOS. Valid options are 'reduce' or 'no-preference'.

Blink component

Blink>CSS

Search tags

css, prefers-reduced-transparency

TAG review

None

TAG review status

Not applicable

Risks

Interoperability and Compatibility

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/851) There is a separate umbrella issue for some the preference media queries (contrast, motion, color-scheme). They have a stale PR to add an overall positive position for those preference media queries. They also have an implementation behind a flag. It's not been enabled yet due to fingerprinting concerns.

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/145) I have submitted an implementation of this feature as a PR to WebKit: https://github.com/WebKit/WebKit/pull/11560

Web developers: Positive (https://blog.logrocket.com/new-media-queries-you-need-to-know)

Other signals:

Security

This feature can be used for fingerprinting as it exposes a user preference.

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

Debuggability

This can be emulated in the Dev Tools rendering tab like other preference media queries.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes

The feature will be supported on all platforms, but whether the user will be able to signal a reduced transparency preference may depend on the OS.

Is this feature fully tested by web-platform-tests?

Yes

Flag name on chrome://flags

#enable-experimental-web-platform-features

Finch feature name

PrefersReducedTransparency

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1424879

Sample links

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency#examples

Estimated milestones

Shipping on desktop	117
DevTrial on desktop	117

Shipping on Android	117
DevTrial on Android	117

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5191066147356672

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6D62B5CD-B44D-4CB1-B85A-F73DFFD6CE85%40gmail.com

This intent message was generated by Chrome Platform Status.

[Yoav Weiss]

I'd love to hear +Mike Taylor 's thought about this from an extra fingerprinting bit perspective. Also, how would users signal their preference?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/27CA7B34-5C7E-44DE-A75D-41E6034DD833%40gmail.com.

[Luke]

> Also, how would users signal their preference?

There are currently three platforms that implement an explicit setting for this preference.

• In Windows 10/11: Settings > Accessibility > Visual effects > Transparency effects.
• In macOS: System Preferences > Accessibility > Display > Reduce transparency.
• In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.

I don't have access to Chrome OS and as such can't be sure on if there's a setting for this but based on the fact Android doesn't have one and I couldn't find documentation I've assumed there isn't.

Currently the implementation is written to follow the Windows and macOS setting, and iOS can be added trivially in future once the blink development is further along on iOS. On platforms with no explicit setting users currently cannot indicate their preference. However, I would like to see browser level control of this (and other preference media queries) in future.

[Mike Taylor]

As to the fingerprintability, we should think about the trade-offs we're making between accessibility and adding more active surfaces that give away some bits of entropy. I'd love to hear more about requests from the a11y or developer community to actually have this MQ available to them. My own take is that if it can benefit some users, and sites will use it, the incremental entropy available here is probably acceptable.

I note that https://drafts.csswg.org/mediaqueries-5/#mq-prefers-security is effectively empty, with an inline issue saying ~"TODO: figure out if these are OK". That doesn't seem super great. Do we know if there is consensus among editors on the utility vs privacy trade offs of these MQs? (Maybe Tab can chime in on this topic...).

Based on https://github.com/WebKit/standards-positions/issues/145#issuecomment-1478736469, it doesn't seem like there's a lot of appetite from Apple or Mozilla.

[Luke]

> ...effectively empty, with an inline issue saying ~"TODO: figure out if these are OK".

I've added a comment to an existing CSS spec issue regarding that issue section. 

> Based on https://github.com/WebKit/standards-positions/issues/145#issuecomment-1478736469, it doesn't seem like there's a lot of appetite from Apple or Mozilla.

There's mixed signals from Mozilla and especially Apple imo.

While Apple have added a general concerns label for all `prefers-*` media queries, they've also implemented at least 3 of them along with being the only UA to currently expose `inverted-colors` information. They've also made 1 of the two current issues regarding potential new preference media queries (namely prefers-reduced-strobing)

Mozilla likewise don't seem overly keen on prefers-reduced-transparency (a third party implemented it recently but so far it remains disabled by default) but have also exposed the 3 existing prefers media queries along with also implementing `forced-colors` (Apple has too but it always evaluates to false so isn't relavant). They also started a PR to add a supportive position for the preference media queries given their accessibility benefits.

> My own take is that if it can benefit some users, and sites will use it, the incremental entropy available here is probably acceptable.

I would agree if there's an improved accessibility experience it's worth the privacy tradeoff imo. As for how useful users and site authors would find it I'm not sure how best to go about finding that out. There's various blog posts mentioning it, and obviously there must be some benefit to exposing the settings else Microsoft and Apple wouldn't have explicit settings for it. Potentially some a11y specialists could chime in on this front?

[Luke]

Is there anything more I can do to help move this conversation forward? I would try to gather a consensus that authors would use it but I don't have a following large enough to gather anything valuable.

[David Bolter]

I agree with Mike that the incremental entropy available is probably acceptable. I don't have any data/awareness of demand for this setting but it is at least some signal that it is available on Windows, Mac, iOS (thanks Luke). I'll ping some folks and come back (or they will) if there is info to share.

[Chris Harrelson]

Hi Luke, could you file for a TAG review for this feature?

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/ffce1bda-3b46-4bd1-870b-3dbef003a8f4n%40chromium.org.

[Luke]

https://github.com/w3ctag/design-reviews/issues/881 I've filed a tag review (hopefully filled it all out correctly)

[Mike Taylor]

LGTM1

[Daniel Bratell]

LGTM2

/Daniel

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/75c64edc-098f-402f-95d4-f803a23bc1d6%40chromium.org.

[Chris Harrelson]

LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/882f3803-f44e-daf6-5ccc-b9b6e7c9a8b3%40gmail.com.