-
Notifications
You must be signed in to change notification settings - Fork 639
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[mediaqueries] temporary doc to hold features deferred to MQ5.
- Loading branch information
Showing
1 changed file
with
97 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
|
||
|
||
|
||
<!-- | ||
████████ ██ ██ ██ ██ | ||
██ ███ ██ ██ ██ | ||
██ ████ ██ ██ ██ | ||
██████ ██ ██ ██ ██ ██ | ||
██ ██ ████ ██ ██ | ||
██ ██ ███ ██ ██ | ||
████████ ██ ██ ███ | ||
--> | ||
|
||
<h2 id='mf-environment'> | ||
Environment Media Features</h2> | ||
|
||
<h3 id="light-level"> | ||
light-level</h3> | ||
|
||
<pre class='descdef mq'> | ||
Name: light-level | ||
Value: dim | normal | washed | ||
For: @media | ||
Type: discrete | ||
</pre> | ||
|
||
The 'light-level' media feature is used to query about the ambient light-level in which the device is used, | ||
to allow the author to adjust style of the document in response. | ||
The following values are valid: | ||
|
||
<dl dfn-type=value dfn-for="@media/light-level"> | ||
<dt><dfn>dim</dfn> | ||
<dd> | ||
The device is used in a dim environment, | ||
where excessive contrast and brightness would be distracting or uncomfortable to the reader. | ||
For example: night time, or a dimly illuminated indoor environment. | ||
|
||
<dt><dfn>normal</dfn> | ||
<dd> | ||
The device is used in a environment with a light level in the ideal range for the screen, | ||
and which does not necessitate any particular adjustment. | ||
|
||
<dt><dfn>washed</dfn> | ||
<dd> | ||
The device is used in an exceptionally bright environment, | ||
causing the screen to be washed out and difficult to read. | ||
For example: bright daylight. | ||
</dl> | ||
|
||
User agents should set the thresholds between the three levels | ||
in a way that takes into account the characteristics of the device. | ||
|
||
<div class="note"> | ||
Even though it is expected that User Agents will adjust the value of this media feature | ||
based on ambient light sensors, | ||
this specification intentionally refrains from defining the three levels in terms of a measurement in lux, | ||
for several reasons: | ||
|
||
<ul> | ||
<li> | ||
Devices equipped with a light sensor usually adjust the brightness of the screen automatically. | ||
Depending on the level of adjustment, | ||
the thresholds for needing a low contrast or hight contrast content may vary. | ||
|
||
<li> | ||
Different screen technologies wash out at very different ambient light levels; | ||
e-ink displays remain readable in bright daylight, | ||
while liquid crystal displays do not. | ||
|
||
<li> | ||
Many embedded light sensors are inaccurately calibrated, | ||
making it difficult to establish useful thresholds valid across devices. | ||
</ul> | ||
</div> | ||
|
||
For accessibility purposes, user agents may offer manual controls | ||
allowing the user to switch between the three levels of independently of the ambient light level, | ||
as high contrast or low contrast styles may be more suitable for users with visual disabilities. | ||
|
||
<p class="issue"> | ||
Using this media feature for accessibility purposes overlaps a lot with <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx">the high-contrast media feature proposed by Microsoft</a>. | ||
Can we adjust this so that it covers all use cases for both, | ||
or somehow modify them to work in an orthogonal, rather than overlapping, fashion? | ||
|
||
<div class="example"> | ||
<pre> | ||
@media (light-level: normal) { | ||
p { background: url("texture.jpg"); color: #333 } | ||
} | ||
@media (light-level: dim) { | ||
p { background: #222; color: #ccc } | ||
} | ||
@media (light-level: washed) { | ||
p { background: white; color: black; font-size: 2em; } | ||
} | ||
</pre> | ||
</div> |