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

Added the first proposal for a 'environment-blending' keyword. #2719

Merged
merged 4 commits into from
Jun 27, 2018
Merged

Added the first proposal for a 'environment-blending' keyword. #2719

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70dce99
Added the first proposal for a 'reality' keyword.
May 30, 2018
1a34320
Renamed from reality to environment-blending
Jun 7, 2018
370af9a
Incorporated fantasai's comments
Jun 10, 2018
df1ead7
Included @frivoal's comment
Jun 13, 2018
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
53 changes: 53 additions & 0 deletions mediaqueries-5/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,59 @@ Detecting the ambient light level: the 'light-level' feature</h3>
</pre>
</div>

<h3 id="environment-blending">
Detecting the display technology: the 'environment-blending' feature</h3>

<pre class='descdef mq'>
Name: environment-blending
Value: opaque | additive | subtractive
For: @media
Type: discrete
</pre>

The 'environment-blending' media feature is used to query the characteristics of the user's display
so the author can adjust the style of the document.
An author might choose to adjust the visuals and/or layout of the page depending on the display
technology to increase the appeal or improve legibility.

The following values are valid:

<dl dfn-type=value dfn-for="@media/environment-blending">
<dt><dfn>opaque</dfn>
<dd>
The document is rendered on an opaque medium, such as a traditional monitor or paper.
Black is dark and white is 100% light.

<dt><dfn>additive</dfn>
<dd>
The display blends the colors of the canvas with the real world using additive mixing.
Black is fully transparent and white is 100% light.

For example: a head-up display in a car.

<dt><dfn>subtractive</dfn>
<dd>
The display blends the colors of the canvas with the real world using subtractive mixing.
White is fully transparent and dark colors have the most contrast.

For example: an LCD display embedded in a bathroom mirror.
</dl>

Issue: Is there a need for the 'subtractive' value?

<div class="example">
<pre>
body { background-color: white; }
p { color: black; }

@media(environment-blending: additive) {
body { background-color: black; }
p { color: white; font-size: 16px; font-weight: 1000; }
}
</pre>
</div>



<!--
██████ ██████ ████████ ████ ████████ ████████ ████ ██ ██ ██████
Expand Down