8000 [mediaqueries] Describe the scan media query properly. · w3c/csswg-drafts@1ef8d91 · GitHub
Skip to content

Commit 1ef8d91

Browse files
tabatkinstabatkins
committed
[mediaqueries] Describe the scan media query properly.
--HG-- extra : rebase_source : 0eb12be76660a24e8cdf2d7f20d2b19d1e7fb327
1 parent e6172c8 commit 1ef8d91

2 files changed

Lines changed: 67 additions & 25 deletions

File tree

‎mediaqueries/Overview.html‎

Lines changed: 44 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
</p>
5555
<h1 class="p-name no-ref" id=title>Media Queries Level 4</h1>
5656
<h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
57-
<span class=dt-updated><span class=value-title title=20131114>14 November 2013</span></span></span></h2>
57+
<span class=dt-updated><span class=value-title title=20131116>16 November 2013</span></span></span></h2>
5858
<div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/mediaqueries4/>http://dev.w3.org/csswg/mediaqueries4/</a>
5959
<dt>Feedback:</dt>
6060
<dd><a href="mailto:www-style@w3.org?subject=%5Bmediaqueries%5D%20feedback">www-style@w3.org</a>
@@ -238,7 +238,7 @@ <h3 class="heading settled heading" data-level=1.2 id=values><span class=secno>1
238238
<a class="production css-code" data-link-type=type href=#typedef-ratio title="<ratio>">&lt;ratio&gt;</a>s can be ordered or compared by transforming them into the number
239239
obtained by dividing their first <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a> by their second <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>.
240240

241-
<p class=issue id=issue-c2c00837><a class=self-link href=#issue-c2c00837></a>
241+
<p class=issue id=issue-2ae5b8ca><a class=self-link href=#issue-2ae5b8ca></a>
242242
Reasonable to restrict <a class="production css-code" data-link-type=type href=#typedef-ratio title="<ratio>">&lt;ratio&gt;</a> to <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>s?
243243
I’ve seen aspect ratios written with decimal points in real life.
244244

@@ -1341,7 +1341,7 @@ <h3 class="heading settled heading" data-level=5.1 id=resolution><span class=sec
13411341
(the resolution for printing dots of arbitrary color).
13421342
Printers might have a different resolution for grayscale printing.
13431343

1344-
<p class=issue id=issue-f5f73c8d><a class=self-link href=#issue-f5f73c8d></a>
1344+
<p class=issue id=issue-7ddcf400><a class=self-link href=#issue-7ddcf400></a>
13451345
Another media feature should probably be added to deal with the type of resolution authors want to know to deal with monochrome printing.
13461346

13471347
<div class=example>
@@ -1362,9 +1362,29 @@ <h3 class="heading settled heading" data-level=5.1 id=resolution><span class=sec
13621362
<h3 class="heading settled heading" data-level=5.2 id=scan><span class=secno>5.2 </span><span class=content>
13631363
scan</span><a class=self-link href=#scan></a></h3>
13641364

1365-
<table class="definition descdef mq" data-dfn-for=@media><tr><th>Name:<td><dfn class=css-code data-dfn-for=@media data-dfn-type=descriptor data-export="" id=descdef-scan>scan<a class=self-link href=#descdef-scan></a></dfn><tr><th>For:<td><a class=css-code data-link-type=at-rule href=http://dev.w3.org/csswg/css-conditional-3/#at-ruledef-media title=@media>@media</a><tr><th>Value:<td>progressive | interlace<tr><th>Type:<td>discrete</table>
1366-
<p> The 'scan media feature describes the scanning process of "tv"
1367-
output devices.
1365+
<table class="definition descdef mq" data-dfn-for=@media><tr><th>Name:<td><dfn class=css-code data-dfn-for=@media data-dfn-type=descriptor data-export="" id=descdef-scan>scan<a class=self-link href=#descdef-scan></a></dfn><tr><th>For:<td><a class=css-code data-link-type=at-rule href=http://dev.w3.org/csswg/css-conditional-3/#at-ruledef-media title=@media>@media</a><tr><th>Value:<td>interlace | progressive<tr><th>Type:<td>discrete</table>
1366+
<p> The <a class=property data-link-type=propdesc href=#descdef-scan title=scan>scan</a> media feature describes the scanning process of some output devices.
1367+
1368+
<dl data-dfn-for=@media/scan data-dfn-type=value>
1369+
<dt><dfn class=css-code data-dfn-for=@media/scan data-dfn-type=value data-export="" id=valuedef-interlace>interlace<a class=self-link href=#valuedef-interlace></a></dfn>
1370+
<dd>
1371+
CRT and some types of plasma TV screens used “interlaced” rendering,
1372+
where video frames alternated between specifying only the “even” lines on the screen
1373+
and only the “odd” lines,
1374+
exploiting various automatic mental image-correction abilities to produce smooth motion.
1375+
This allowed them to simulate a higher FPS broadcast at half the bandwidth cost.
1376+
1377+
<p> When displaying on interlaced screens,
1378+
authors should avoid very fast movement across the screen to avoid “combing”,
1379+
and should ensure that details on the screen are greater than <span class=css data-link-type=maybe title=1px>1px</span> wide to avoid <a href=https://en.wikipedia.org/wiki/Interlaced_video#Interline_twitter>“twitter”</a>.
1380+
1381+
<dt><dfn class=css-code data-dfn-for=@media/scan data-dfn-type=value data-export="" id=valuedef-progressive>progressive<a class=self-link href=#valuedef-progressive></a></dfn>
1382+
<dd>
1383+
A screen using “progressive” rendering displays each screen fully,
1384+
and needs no special treatment.
1385+
1386+
<p> Most modern screens, and all computer screens, use progressive rendering.
1387+
</dl>
13681388

13691389
<div class=example>
13701390
For example, this media query expresses that a style sheet is
@@ -1619,7 +1639,7 @@ <h3 class="heading settled heading" data-level=7.2 id=hover><span class=secno>7.
16191639
but they should design layouts that do not depend on hovering to be fully usable.
16201640
</div>
16211641

1622-
<p class=issue id=issue-d8ce9763><a class=self-link href=#issue-d8ce9763></a>
1642+
<p class=issue id=issue-4e5f4bb5><a class=self-link href=#issue-4e5f4bb5></a>
16231643
Rob Coulburn points out that Mac devices turn off scrollbars when you plug in a mouse,
16241644
which means that it *does* react to changing input devices.
16251645
But is this just because it considers a plugged-in mouse to be "primary"?
@@ -1693,7 +1713,7 @@ <h3 class="heading settled heading" data-level=8.1 id=luminosity><span class=sec
16931713
luminosity, as high contrast or low contrast styles may be more suitable for
16941714
users with visual disabilities.
16951715

1696-
<p class=issue id=issue-5e4da4ff><a class=self-link href=#issue-5e4da4ff></a>
1716+
<p class=issue id=issue-f24d4b3a><a class=self-link href=#issue-f24d4b3a></a>
16971717
Using this media feature for accessibility purposes overlaps
16981718
a lot with the high-contrast media feature proposed by Microsoft:
16991719
<a href=http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx>http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx</a>.
@@ -1747,7 +1767,7 @@ <h3 class="heading settled heading" data-level=9.1 id=script><span class=secno>9
17471767

17481768
<p class=note> Note: A future level of CSS may extend this media feature to allow fine-grained detection of which script is allowed to run.
17491769

1750-
<div class=issue id=issue-157a6731><a class=self-link href=#issue-157a6731></a>
1770+
<div class=issue id=issue-b62c35ca><a class=self-link href=#issue-b62c35ca></a>
17511771
We need a media feature (or set of media features) to detect the type of keyboard available.
17521772
It should be able to distinguish between full computer keyboards, phone dial pads, tv remotes, or virtual keyboards.
17531773
As an attempt at an exhaustive list is likely to fail,
@@ -1763,7 +1783,7 @@ <h3 class="heading settled heading" data-level=9.1 id=script><span class=secno>9
17631783
<p> How much is actually useful for styling?
17641784
</div>
17651785

1766-
<div class=issue id=issue-91784903><a class=self-link href=#issue-91784903></a>
1786+
<div class=issue id=issue-5c007706><a class=self-link href=#issue-5c007706></a>
17671787
RESPONSIBLE DEVICE DISCRIMINATION WITH MEDIA QUERIES
17681788

17691789
<p> <ul>
@@ -1778,7 +1798,7 @@ <h3 class="heading settled heading" data-level=9.1 id=script><span class=secno>9
17781798
</ul>
17791799
</div>
17801800

1781-
<div class=issue id=issue-7a715894><a class=self-link href=#issue-7a715894></a>
1801+
<div class=issue id=issue-05516495><a class=self-link href=#issue-05516495></a>
17821802
Feature for update speed:
17831803

17841804
<pre>updates: none | slow | fast</pre>
@@ -1789,7 +1809,7 @@ <h3 class="heading settled heading" data-level=9.1 id=script><span class=secno>9
17891809
and normal screens.
17901810
</div>
17911811

1792-
<div class=issue id=issue-7d408cb4><a class=self-link href=#issue-7d408cb4></a>
1812+
<div class=issue id=issue-1fdc4653><a class=self-link href=#issue-1fdc4653></a>
17931813
Pagination control:
17941814

17951815
<pre>pagination: none | roll | pages</pre>
@@ -2007,7 +2027,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
20072027
<li>height, <a href=#descdef-height title="section 4.2">4.2</a>
20082028
<li>hover<ul><li>descriptor for @media, <a href=#descdef-hover title="section 7.2">7.2</a>
20092029
<li>value for @media/hover, <a href=#valuedef-hover title="section 7.2">7.2</a>
2010-
</ul><li>luminosity, <a href=#descdef-luminosity title="section 8.1">8.1</a>
2030+
</ul><li>interlace, <a href=#valuedef-interlace title="section 5.2">5.2</a>
2031+
<li>luminosity, <a href=#descdef-luminosity title="section 8.1">8.1</a>
20112032
<li>&lt;media-feature&gt;, <a href=#typedef-media-feature title="section 3">3</a>
20122033
<li>media feature, <a href=#media-feature title="section 2.4">2.4</a>
20132034
<li>media query, <a href=#media-query title="section 2">2</a>
@@ -2034,6 +2055,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
20342055
<li>orientation, <a href=#descdef-orientation title="section 4.4">4.4</a>
20352056
<li>pointer, <a href=#descdef-pointer title="section 7.1">7.1</a>
20362057
<li>print, <a href=#valuedef-print title="section 2.3">2.3</a>
2058+
<li>progressive, <a href=#valuedef-progressive title="section 5.2">5.2</a>
20372059
<li>projection, <a href=#valuedef-projection title="section 2.3">2.3</a>
20382060
<li>range context, <a href=#range-context title="section 2.4.3">2.4.3</a>
20392061
<li>&lt;ratio&gt;, <a href=#typedef-ratio title="section 1.2">1.2</a>
@@ -2059,7 +2081,7 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
20592081
<tr><th scope-row=""><a data-property="">device-height</a><td>&lt;length&gt;<td><td>range
20602082
<tr><th scope-row=""><a data-property="">device-aspect-ratio</a><td>&lt;ratio&gt;<td><td>range
20612083
<tr><th scope-row=""><a data-property="">resolution</a><td>&lt;resolution&gt;<td><td>range
2062-
<tr><th scope-row=""><a data-property="">scan</a><td>progressive | interlace<td><td>discrete
2084+
<tr><th scope-row=""><a data-property="">scan</a><td>interlace | progressive<td><td>discrete
20632085
<tr><th scope-row=""><a data-property="">grid</a><td>&lt;mq-boolean&gt;<td><td>discrete
20642086
<tr><th scope-row=""><a data-property="">color</a><td>&lt;integer&gt;<td><td>range
20652087
<tr><th scope-row=""><a data-property="">color-index</a><td>&lt;integer&gt;<td><td>range
@@ -2074,23 +2096,23 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
20742096
Reasonable to restrict <a class="production css-code" data-link-type=type href=#typedef-ratio title="<ratio>">&lt;ratio&gt;</a> to <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-syntax-3/#typedef-integer title="<integer>">&lt;integer&gt;</a>s?
20752097
I’ve seen aspect ratios written with decimal points in real life.
20762098

2077-
<a href=#issue-c2c00837> ↵ </a></div><div class=issue>
2099+
<a href=#issue-2ae5b8ca> ↵ </a></div><div class=issue>
20782100
Another media feature should probably be added to deal with the type of resolution authors want to know to deal with monochrome printing.
20792101

2080-
<a href=#issue-f5f73c8d> ↵ </a></div><div class=issue>
2102+
<a href=#issue-7ddcf400> ↵ </a></div><div class=issue>
20812103
Rob Coulburn points out that Mac devices turn off scrollbars when you plug in a mouse,
20822104
which means that it *does* react to changing input devices.
20832105
But is this just because it considers a plugged-in mouse to be "primary"?
20842106

2085-
<a href=#issue-d8ce9763> ↵ </a></div><div class=issue>
2107+
<a href=#issue-4e5f4bb5> ↵ </a></div><div class=issue>
20862108
Using this media feature for accessibility purposes overlaps
20872109
a lot with the high-contrast media feature proposed by Microsoft:
20882110
<a href=http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx>http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx</a>.
20892111
Can we adjust this so that it covers all use cases for both, or somehow
20902112
modify them to work in an orthogonal, rather than overlapping,
20912113
fashion?
20922114

2093-
<a href=#issue-5e4da4ff> ↵ </a></div><div class=issue>
2115+
<a href=#issue-f24d4b3a> ↵ </a></div><div class=issue>
20942116
We need a media feature (or set of media features) to detect the type of keyboard available.
20952117
It should be able to distinguish between full computer keyboards, phone dial pads, tv remotes, or virtual keyboards.
20962118
As an attempt at an exhaustive list is likely to fail,
@@ -2104,7 +2126,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
21042126
</ul>
21052127

21062128
<p> How much is actually useful for styling?
2107-
</p><a href=#issue-157a6731> ↵ </a></div>
2129+
</p><a href=#issue-b62c35ca> ↵ </a></div>
21082130

21092131
<div class=issue>
21102132
RESPONSIBLE DEVICE DISCRIMINATION WITH MEDIA QUERIES
@@ -2119,7 +2141,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
21192141
<li>Glass: updates: fast, scroll: none?, pointer: coarse? or none?, hover: none, pagination: none
21202142
<li>XTERM: updates: fast: scroll: vertical: pointer:none hover:none, pagination:roll, grid:1
21212143
</ul>
2122-
<a href=#issue-91784903> ↵ </a></div>
2144+
<a href=#issue-5c007706> ↵ </a></div>
21232145

21242146
<div class=issue>
21252147
Feature for update speed:
@@ -2130,7 +2152,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
21302152
<p> Discriminates between static printing,
21312153
e-ink and similar that can handle updates but not animations,
21322154
and normal screens.
2133-
</p><a href=#issue-7a715894> ↵ </a></div>
2155+
</p><a href=#issue-05516495> ↵ </a></div>
21342156

21352157
<div class=issue>
21362158
Pagination control:
@@ -2142,6 +2164,6 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
21422164

21432165
<p> Any need to discriminate between things that just throw away paged overflow not in the paging dimension,
21442166
and things that put it on the next page?
2145-
</p><a href=#issue-7d408cb4> ↵ </a></div>
2167+
</p><a href=#issue-1fdc4653> ↵ </a></div>
21462168

21472169
</div>

‎mediaqueries/Overview.src.html‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -974,13 +974,33 @@ <h3 id="scan">
974974

975975
<pre class='descdef mq'>
976976
Name: scan
977-
Value: progressive | interlace
977+
Value: interlace | progressive
978978
For: @media
979979
Type: discrete
980980
</pre>
981981

982-
The 'scan media feature describes the scanning process of "tv"
983-
output devices.
982+
The 'scan' media feature describes the scanning process of some output devices.
983+
984+
<dl dfn-type=value dfn-for="@media/scan">
985+
<dt><dfn>interlace</dfn>
986+
<dd>
987+
CRT and some types of plasma TV screens used “interlaced” rendering,
988+
where video frames alternated between specifying only the “even” lines on the screen
989+
and only the “odd” lines,
990+
exploiting various automatic mental image-correction abilities to produce smooth motion.
991+
This allowed them to simulate a higher FPS broadcast at half the bandwidth cost.
992+
993+
When displaying on interlaced screens,
994+
authors should avoid very fast movement across the screen to avoid “combing”,
995+
and should ensure that details on the screen are greater than ''1px'' wide to avoid <a href="https://en.wikipedia.org/wiki/Interlaced_video#Interline_twitter">“twitter”</a>.
996+
997+
<dt><dfn>progressive</dfn>
998+
<dd>
999+
A screen using “progressive” rendering displays each screen fully,
1000+
and needs no special treatment.
1001+
1002+
Most modern screens, and all computer screens, use progressive rendering.
1003+
</dl>
9841004

9851005
<div class="example">
9861006
For example, this media query expresses that a style sheet is

0 commit comments

Comments
 (0)