Closed Bug 1506364 Opened 6 years ago Closed 4 years ago

Implement the prefers-contrast media-query

Categories

(Core :: CSS Parsing and Computation, enhancement, P1)

Product:
Core
Component:
CSS Parsing and Computation
Version:
65 Branch
Type:
enhancement

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla80
Tracking Flags:
Tracking Status
firefox80 --- fixed

People

(Reporter: bugzilla, Assigned: zekemedley)

References

(Depends on 1 open bug, Blocks 2 open bugs,
URL
)

Details

(Keywords: dev-doc-needed, Whiteboard: [layout:backlog])

Attachments

(3 files)

Screenshot 2018-11-10 at 15.35.45.png
(deleted), image/png
Details
Bug 1506364 - Implement the prefers-contrast media-query. r=morgan,emilio
(deleted), text/x-phabricator-request
Details
Telemetry Request
(deleted), text/plain
Details
Attached image Screenshot 2018-11-10 at 15.35.45.png (deleted) —
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 Steps to reproduce: If the user set high contrast to “checked” in macOS, we can assume he or she will need high contrast in web sites as well. If we can add the feature to CSS that we can detect high contrast mode using CSS, it would be great. @media (prefers-high-contrast: true) { /* CSS code */ } Implementation could be much like prefers-reduced-motion https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
Hi Johan Ronsse, I will set this issue as an enhancement for now. Hopefully, the component is the right one, if not please feel free to add it to the right one. Thanks for the report!
Severity: normal → enhancement
Status: UNCONFIRMED → NEW
Component: Untriaged → CSS Parsing and Computation
Ever confirmed: true
Product: Firefox → Core
There's actually something resembling a spec for this: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast
URL: https://drafts.csswg.org/mediaqueries...
Priority: -- → P3
Summary: Enable interplay between macOS high contrast setting and CSS → Implement the prefers-contrast media-query.
Blocks: 1548954
Assignee: nobody → zekemedley
Severity: normal → N/A
Status: NEW → ASSIGNED
Priority: P3 → P1
Summary: Implement the prefers-contrast media-query. → Implement the prefers-contrast media-query
Whiteboard: [layout:backlog]
Attached file Telemetry Request (deleted) —
Attachment #9156424 - Attachment description: Telemitry Request → Telemetry Request

We've decided that we're not actually going to enable telemetry. The plan now is:

  1. Remove the telemetry
  2. Enable prefers-contrast by default in browser chrome for use with a high contrast theme.
  3. Enable prefers-contrast behind preference on the web.

Will this be covered by RFP? Much like prefers-reduced-motion (returns no-preference) in Bug 1479239 and prefers-color-scheme (returns light) in Bug 1494034

(In reply to Simon Mainey from comment #6)

Will this be covered by RFP?...

nvm

(In reply to Simon Mainey from comment #6)

Will this be covered by RFP? Much like prefers-reduced-motion (returns no-preference) in Bug 1479239 and prefers-color-scheme (returns light) in Bug 1494034

Our current plan is to return no-preference when RFP is enabled but still be honest about whether or not forced colors are in use. There is some discussion about this on phabricator here. This has to do with with the addition of a forced option to the media query recently.

Pushed by mreschenberg@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/eea7e31fdade Implement the prefers-contrast media-query. r=morgan,emilio

https://hg.mozilla.org/mozilla-central/rev/eea7e31fdade

Status: ASSIGNED → RESOLVED
Closed: 4 years ago
status-firefox80: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla80

Adding the intent to prototype here https://groups.google.com/g/mozilla.dev.platform/c/bTEmQxffGvA
Not yet enabled by default. Behind layout.css.prefers-contrast.enabled

No longer blocks: 1737438
Blocks: 1656363
Depends on: 1792672
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: