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.

Sign up for GitHub

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

[mediaqueries-5] Add initial versions of prefers-contrast and color-scheme #2930

Merged
merged 1 commit into from
Jul 19, 2018
Merged

[mediaqueries-5] Add initial versions of prefers-contrast and color-scheme #2930

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 79 additions & 1 deletion mediaqueries-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,6 +561,78 @@ Detecting the desire for reduced transparency on the page: the 'prefers-reduced-

</dl>

<h3 id="prefers-contrast">
Detecting the desire for increased or decreased color contrast from elements on the page: the 'prefers-contrast' feature</h3>

<pre class='descdef mq'>
Name: prefers-contrast
Value: no-preference | high | low
For: @media
Type: discrete
</pre>

The 'prefers-contrast' media feature is used to detect if the user
has requested the system increase or decrease the amount of contrast
between adjacent colors. For example, many users have difficulty
reading text that has a small difference in contrast to the text
background and would prefer a larger contrast.

<dl dfn-type=value dfn-for="@media/prefers-contrast">
<dt><dfn>no-preference</dfn>
<dd>
Indicates that the user has made no preference known
to the system. This keyword value evaluates as false
in the <a>boolean context</a>.

<dt><dfn>high</dfn>
<dd>
Indicates that user has notified the system that they
prefer an interface that has a higher level of contrast.

<dt><dfn>low</dfn>
<dd>
Indicates that user has notified the system that they
prefer an interface that has a lower level of contrast.

</dl>

Issue: Should we include 'forced-low' and 'forced-high' values? We don't necessarily want the
page to try to undo what the system might be enforcing.

<h3 id="prefers-color-scheme">
Detecting the desire for increased or decreased color contrast from elements on the page: the 'prefers-color-scheme' feature</h3>

<pre class='descdef mq'>
Name: prefers-color-scheme
Value: no-preference | light | dark
For: @media
Type: discrete
</pre>

The 'prefers-color-scheme' media feature is used to detect if the user
has requested the system use a light or dark color theme.

<dl dfn-type=value dfn-for="@media/prefers-color-scheme">
<dt><dfn>no-preference</dfn>
<dd>
Indicates that the user has made no preference known
to the system. This keyword value evaluates as false
in the <a>boolean context</a>.

<dt><dfn>light</dfn>
<dd>
Indicates that user has notified the system that they
prefer an interface that has a light theme.

<dt><dfn>dark</dfn>
<dd>
Indicates that user has notified the system that they
prefer an interface that has a dark theme.

</dl>

Issue: Should we include 'forced-light' and 'forced-dark' values? We don't necessarily want the
page to try to undo what the system might be enforcing.

<h2 id="changes" class="no-num">
Changes</h2>
Expand All @@ -579,7 +651,13 @@ The following changes were made to this specification since the
Add 'prefers-reduced-motion' media feature.

<li>
Add 'prefers-reduced-transparency' media feature.
Add 'prefers-reduced-transparency' media feature.

<li>
Add 'prefers-contrast' media feature.

<li>
Add 'prefers-color-scheme' media feature.

</ul>

Expand Down