Skip to content

Commit a55fb91

Browse files
frivoalfrivoal
committed
[mediaqueries-5] Reorganize ToC to regroup related features
1 parent f5b663c commit a55fb91

File tree

1 file changed

+122
-135
lines changed

1 file changed

+122
-135
lines changed

‎mediaqueries-5/Overview.bs‎

Lines changed: 122 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1065,8 +1065,8 @@ Error Handling</h3>
10651065
████████ ████ ██ ██ ████████ ██ ██ ██████ ████ ███████ ██ ██ ██████
10661066
-->
10671067

1068-
<h2 id="mf-dimensions">
1069-
Viewport/Page Dimensions Media Features</h2>
1068+
<h2 id=mf-viewport-characteristics oldids="mf-dimensions">
1069+
Viewport/Page Characteristics Media Features</h2>
10701070

10711071
<h3 id="width">
10721072
Width: the '@media/width' feature</h3>
@@ -1170,6 +1170,84 @@ Orientation: the 'orientation' feature</h3>
11701170
<pre>@media (orientation:portrait) { … }</pre>
11711171
</div>
11721172

1173+
<h3 id='mf-overflow-block'>
1174+
Block-Axis Overflow: the '@media/overflow-block' feature</h3>
1175+
1176+
<pre class='descdef mq'>
1177+
Name: overflow-block
1178+
Value: none | scroll | paged
1179+
For: @media
1180+
Type: discrete
1181+
</pre>
1182+
1183+
The '@media/overflow-block' media feature describes the behavior of the device
1184+
when content overflows the initial containing block in the <a status=TR>block axis</a>.
1185+
1186+
<dl dfn-type=value dfn-for="@media/overflow-block">
1187+
<dt><dfn>none</dfn>
1188+
<dd>
1189+
There is no affordance for overflow in the <a status=TR>block axis</a>;
1190+
any overflowing content is simply not displayed.
1191+
Examples: billboards
1192+
1193+
<dt><dfn>scroll</dfn>
1194+
<dd>
1195+
Overflowing content in the <a status=TR>block axis</a> is exposed by allowing users to scroll to it.
1196+
Examples: computer screens
1197+
1198+
<dt><dfn>paged</dfn>
1199+
<dd>
1200+
Content is broken up into discrete pages;
1201+
content that overflows one page in the <a status=TR>block axis</a>
1202+
is displayed on the following page.
1203+
Examples: printers, ebook readers
1204+
</dl>
1205+
1206+
Media that match ''overflow-block/none'' or ''overflow-block/scroll'' are said to be <dfn export>continuous media</dfn>,
1207+
while those that match ''overflow-block/paged'' are said to be <dfn export>paged media</dfn>
1208+
1209+
Note: Additional values for this media feature may be added in the future
1210+
to describe classes of user agents with a hybrid behavior combining
1211+
aspects of [=continuous media|continuous=] and [=paged media=].
1212+
For example, the Presto layout engine (now discontinued) shipped with
1213+
a semi-paginated presentation-mode behavior similar to ''continuous''
1214+
except that it honored forced page breaks.
1215+
Not knowing of any currently-shipping user agent with this type of behavior,
1216+
the Working Group has decided not to add such a value in this level
1217+
to avoid miscaracterizing any such user agent.
1218+
Anyone implementing a user agent not adequately described
1219+
by any of the values specified above
1220+
is encouraged to contact the Working Group
1221+
so that extensions to this media feature may be considered.
1222+
1223+
<h3 id='mf-overflow-inline'>
1224+
Inline-Axis Overflow: the '@media/overflow-inline' feature</h3>
1225+
1226+
<pre class="descdef mq">
1227+
Name: overflow-inline
1228+
Value: none | scroll
1229+
For: @media
1230+
Type: discrete
1231+
</pre>
1232+
1233+
The '@media/overflow-inline' media feature describes the behavior of the device
1234+
when content overflows the initial containing block in the <a status=TR>inline axis</a>.
1235+
1236+
<dl dfn-type=value dfn-for="@media/overflow-inline">
1237+
<dt><dfn>none</dfn>
1238+
<dd>
1239+
There is no affordance for overflow in the <a status=TR>inline axis</a>;
1240+
any overflowing content is simply not displayed.
1241+
1242+
<dt><dfn>scroll</dfn>
1243+
<dd>
1244+
Overflowing content in the <a status=TR>inline axis</a> is exposed by allowing users to scroll to it.
1245+
</dl>
1246+
1247+
Note: There are no known implementations of paged overflow of inline-overflowing content,
1248+
and the very concept doesn't seem to make much sense,
1249+
so there is intentionally no ''paged'' value for '@media/overflow-inline'.
1250+
11731251
<!--
11741252
████████ ████ ██████ ████████ ███████ ██ ██ ███ ██ ████ ████████ ██ ██
11751253
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
@@ -1375,83 +1453,57 @@ Display Update Frequency: the 'update' feature</h3>
13751453
</pre>
13761454
</div>
13771455

1378-
<h3 id='mf-overflow-block'>
1379-
Block-Axis Overflow: the '@media/overflow-block' feature</h3>
1380-
1381-
<pre class='descdef mq'>
1382-
Name: overflow-block
1383-
Value: none | scroll | paged
1384-
For: @media
1385-
Type: discrete
1386-
</pre>
1387-
1388-
The '@media/overflow-block' media feature describes the behavior of the device
1389-
when content overflows the initial containing block in the <a status=TR>block axis</a>.
1456+
<h3 id="environment-blending" oldids="mf-environment">
1457+
Detecting the display technology: the 'environment-blending' feature</h3>
13901458

1391-
<dl dfn-type=value dfn-for="@media/overflow-block">
1392-
<dt><dfn>none</dfn>
1393-
<dd>
1394-
There is no affordance for overflow in the <a status=TR>block axis</a>;
1395-
any overflowing content is simply not displayed.
1396-
Examples: billboards
1459+
<pre class='descdef mq'>
1460+
Name: environment-blending
1461+
Value: opaque | additive | subtractive
1462+
For: @media
1463+
Type: discrete
1464+
</pre>
13971465

1398-
<dt><dfn>scroll</dfn>
1399-
<dd>
1400-
Overflowing content in the <a status=TR>block axis</a> is exposed by allowing users to scroll to it.
1401-
Examples: computer screens
1466+
The 'environment-blending' media feature is used to query the characteristics of the user's display
1467+
so the author can adjust the style of the document.
1468+
An author might choose to adjust the visuals and/or layout of the page depending on the display
1469+
technology to increase the appeal or improve legibility.
14021470

1403-
<dt><dfn>paged</dfn>
1404-
<dd>
1405-
Content is broken up into discrete pages;
1406-
content that overflows one page in the <a status=TR>block axis</a>
1407-
is displayed on the following page.
1408-
Examples: printers, ebook readers
1409-
</dl>
1471+
The following values are valid:
14101472

1411-
Media that match ''overflow-block/none'' or ''overflow-block/scroll'' are said to be <dfn export>continuous media</dfn>,
1412-
while those that match ''overflow-block/paged'' are said to be <dfn export>paged media</dfn>
1473+
<dl dfn-type=value dfn-for="@media/environment-blending">
1474+
<dt><dfn>opaque</dfn>
1475+
<dd>
1476+
The document is rendered on an opaque medium, such as a traditional monitor or paper.
1477+
Black is dark and white is 100% light.
14131478

1414-
Note: Additional values for this media feature may be added in the future
1415-
to describe classes of user agents with a hybrid behavior combining
1416-
aspects of [=continuous media|continuous=] and [=paged media=].
1417-
For example, the Presto layout engine (now discontinued) shipped with
1418-
a semi-paginated presentation-mode behavior similar to ''continuous''
1419-
except that it honored forced page breaks.
1420-
Not knowing of any currently-shipping user agent with this type of behavior,
1421-
the Working Group has decided not to add such a value in this level
1422-
to avoid miscaracterizing any such user agent.
1423-
Anyone implementing a user agent not adequately described
1424-
by any of the values specified above
1425-
is encouraged to contact the Working Group
1426-
so that extensions to this media feature may be considered.
1479+
<dt><dfn>additive</dfn>
1480+
<dd>
1481+
The display blends the colors of the canvas with the real world using additive mixing.
1482+
Black is fully transparent and white is 100% light.
14271483

1428-
<h3 id='mf-overflow-inline'>
1429-
Inline-Axis Overflow: the '@media/overflow-inline' feature</h3>
1484+
For example: a head-up display in a car.
14301485

1431-
<pre class="descdef mq">
1432-
Name: overflow-inline
1433-
Value: none | scroll
1434-
For: @media
1435-
Type: discrete
1436-
</pre>
1486+
<dt><dfn>subtractive</dfn>
1487+
<dd>
1488+
The display blends the colors of the canvas with the real world using subtractive mixing.
1489+
White is fully transparent and dark colors have the most contrast.
14371490

1438-
The '@media/overflow-inline' media feature describes the behavior of the device
1439-
when content overflows the initial containing block in the <a status=TR>inline axis</a>.
1491+
For example: an LCD display embedded in a bathroom mirror.
1492+
</dl>
14401493

1441-
<dl dfn-type=value dfn-for="@media/overflow-inline">
1442-
<dt><dfn>none</dfn>
1443-
<dd>
1444-
There is no affordance for overflow in the <a status=TR>inline axis</a>;
1445-
any overflowing content is simply not displayed.
1494+
Issue: Is there a need for the ''subtractive'' value?
14461495

1447-
<dt><dfn>scroll</dfn>
1448-
<dd>
1449-
Overflowing content in the <a status=TR>inline axis</a> is exposed by allowing users to scroll to it.
1450-
</dl>
1496+
<div class="example">
1497+
<pre>
1498+
body { background-color: white; }
1499+
p { color: black; }
14511500

1452-
Note: There are no known implementations of paged overflow of inline-overflowing content,
1453-
and the very concept doesn't seem to make much sense,
1454-
so there is intentionally no ''paged'' value for '@media/overflow-inline'.
1501+
@media(environment-blending: additive) {
1502+
body { background-color: black; }
1503+
p { color: white; font-size: 16px; font-weight: 1000; }
1504+
}
1505+
</pre>
1506+
</div>
14551507

14561508
<!--
14571509
██████ ███████ ██ ███████ ████████
@@ -1710,8 +1762,8 @@ color depth, and contrast ratio that are supported by the UA and output device.
17101762
is not fulfilled.
17111763
</dl>
17121764

1713-
<h3 id="contrast-brightness-of-display">
1714-
Determining contrast and brightness of display</h3>
1765+
<h4 id="contrast-brightness-of-display">
1766+
Determining contrast and brightness of display</h4>
17151767

17161768
<dfn export>Peak brightness</dfn> refers to how bright the brightest point
17171769
a light-emitting device such as an LCD screen can produce,
@@ -2259,71 +2311,6 @@ Video Display Resolution: the 'video-resolution' feature</h3>
22592311

22602312
The 'video-resolution' media feature is [=false in the negative range=].
22612313

2262-
<!--
2263-
████████ ██ ██ ██ ██
2264-
██ ███ ██ ██ ██
2265-
██ ████ ██ ██ ██
2266-
██████ ██ ██ ██ ██ ██
2267-
██ ██ ████ ██ ██
2268-
██ ██ ███ ██ ██
2269-
████████ ██ ██ ███
2270-
-->
2271-
2272-
<h2 id='mf-environment'>
2273-
Environment Media Features</h2>
2274-
2275-
<h3 id="environment-blending">
2276-
Detecting the display technology: the 'environment-blending' feature</h3>
2277-
2278-
<pre class='descdef mq'>
2279-
Name: environment-blending
2280-
Value: opaque | additive | subtractive
2281-
For: @media
2282-
Type: discrete
2283-
</pre>
2284-
2285-
The 'environment-blending' media feature is used to query the characteristics of the user's display
2286-
so the author can adjust the style of the document.
2287-
An author might choose to adjust the visuals and/or layout of the page depending on the display
2288-
technology to increase the appeal or improve legibility.
2289-
2290-
The following values are valid:
2291-
2292-
<dl dfn-type=value dfn-for="@media/environment-blending">
2293-
<dt><dfn>opaque</dfn>
2294-
<dd>
2295-
The document is rendered on an opaque medium, such as a traditional monitor or paper.
2296-
Black is dark and white is 100% light.
2297-
2298-
<dt><dfn>additive</dfn>
2299-
<dd>
2300-
The display blends the colors of the canvas with the real world using additive mixing.
2301-
Black is fully transparent and white is 100% light.
2302-
2303-
For example: a head-up display in a car.
2304-
2305-
<dt><dfn>subtractive</dfn>
2306-
<dd>
2307-
The display blends the colors of the canvas with the real world using subtractive mixing.
2308-
White is fully transparent and dark colors have the most contrast.
2309-
2310-
For example: an LCD display embedded in a bathroom mirror.
2311-
</dl>
2312-
2313-
Issue: Is there a need for the ''subtractive'' value?
2314-
2315-
<div class="example">
2316-
<pre>
2317-
body { background-color: white; }
2318-
p { color: black; }
2319-
2320-
@media(environment-blending: additive) {
2321-
body { background-color: black; }
2322-
p { color: white; font-size: 16px; font-weight: 1000; }
2323-
}
2324-
</pre>
2325-
</div>
2326-
23272314
<!--
23282315
██████ ██████ ████████ ████ ████████ ████████ ████ ██ ██ ██████
23292316
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██

0 commit comments

Comments
 (0)