E84D [mediaqueries-4] Change the handling of some negative values · w3c/csswg-drafts@e922b42 · GitHub
Skip to content

Commit e922b42

Browse files
frivoalfrivoal
committed
[mediaqueries-4] Change the handling of some negative values
In range features where the negative values are meaningless but can be parsed, change from a parse error to evaluating to false, as resolved here: #1454 (comment) Within the currently defined range queries, the only ones unaffected are aspect-ratio and the deprecated device-aspect-ratio, since CSS does not have a syntax for negative aspect ratios we could accept, and it does not seem to make sense to introduce one just for this purpose. Closes #1454
1 parent af19d7e commit e922b42

3 files changed

Lines changed: 81 additions & 13 deletions

File tree

‎mediaqueries/Overview.bs‎

Lines changed: 62 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,51 @@ Evaluating Media Features in a Range Context</h4>
635635
(but not equal to either).
636636
</div>
637637

638+
Some media features with a "range" type are said to be <dfn>false in the negative range</dfn>.
639+
This means that negative values are valid and must be parsed, and that
640+
querying whether the media feature is equal to, less than, or less or equal than
641+
any such negative value must evaluate to false.
642+
Querying whether the media feature is greater, or greater or equal, than a negative
643+
value evaluates to true if the relationship is true.
644+
645+
Note: If negative values had been rejected at parse time instead,
646+
they would be treated as ''unknown'' based on the error handling rules.
647+
However, in reality,
648+
whether a device's '@media/resolution' is ''-300dpi'' is not unknown, it is known to be false.
649+
Similarly, for any visual device, the '@media/width' of the targeted display area is known to be greater than ''-200px''
650+
The above rule reflects that,
651+
making intuition match what UAs do.
652+
653+
<div class=example>
654+
The following examples result in a green background on all visual devices:
655+
<pre><code class=lang-css>
656+
@media not (width <= -100px) {
657+
body { background: green; }
658+
}
659+
</code></pre>
660+
<pre><code class=lang-css>
661+
@media (height > -100px) {
662+
body { background: green; }
663+
}
664+
</code></pre>
665+
<pre><code class=lang-css>
666+
@media not (resolution: -300dpi) {
667+
body { background: green; }
668+
}
669+
</code></pre>
670+
</div>
671+
672+
<div class=advisement>
673+
This is a behavior change compared to Media Queries Level 3 [[MEDIAQ]],
674+
where negative values on these properties caused a syntax error.
675+
In level 3, syntax errors—including forbidden values—resulted in the entire <a>media query</a> being false,
676+
rather than the ''unknown'' treatment defined in this level.
677+
Implementations updating from level 3 should make sure
678+
to change the handling of negative values for the relevant properties
679+
when they add support for the richer syntax defined in [[#media-conditions]],
680+
to avoid introducing unintended semantics.
681+
</div>
682+
638683
<!--
639684
██ ██ ████ ██ ██ ██ ██ ██ ███ ██ ██
640685
███ ███ ██ ███ ██ ██ ███ ███ ██ ██ ██ ██
@@ -979,12 +1024,6 @@ Error Handling</h3>
9791024
and is therefore turned into ''not all''.
9801025
</div>
9811026

982-
<div class="example">
983-
This media query is turned into ''not all'' because negative lengths are not allowed for the '@media/width' media feature:
984-
985-
<pre>@media (min-width: -100px) { … }</pre>
986-
</div>
987-
9881027
<div class='note'>
9891028
Note that <a>media queries</a> are also subject to the parsing rules of the host language.
9901029
For example, take the following CSS snippet:
@@ -1032,7 +1071,7 @@ Width: the '@media/width' feature</h3>
10321071

10331072
<<length>>s are interpreted according to [[#units]].
10341073

1035-
Negative <<length>>s are invalid.
1074+
'@media/width' is <a>false in the negative range</a>.
10361075

10371076
<div class="example">
10381077
For example, this media query expresses that the style sheet is used on printed output wider than 25cm:
@@ -1073,7 +1112,7 @@ Height: the '@media/height' feature</h3>
10731112

10741113
<<length>>s are interpreted according to [[#units]].
10751114

1076-
Negative <<length>>s are invalid.
1115+
'@media/height' is <a>false in the negative range</a>.
10771116

10781117
<h3 id='aspect-ratio'>
10791118
Aspect-Ratio: the 'aspect-ratio' feature</h3>
@@ -1148,6 +1187,8 @@ Display Resolution: the 'resolution' feature</h3>
11481187
device, i.e. the density of the pixels, taking into account the <a spec=cssom-view>page zoom</a>
11491188
but assuming a <a spec=cssom-view>pinch zoom</a> of 1.0.
11501189

1190+
The 'resolution' media feature is <a>false in the negative range</a>
1191+
11511192
When querying media with non-square pixels, 'resolution' queries the density in the vertical dimension.
11521193

1153 B0A0 1194
For printers, this corresponds to the screening resolution
@@ -1418,7 +1459,7 @@ Color Depth: the '@media/color' feature</h3>
14181459
The '@media/color' media feature describes the number of bits per color component of the output device.
14191460
If the device is not a color device, the value is zero.
14201461

1421-
Negative <<integer>>s are invalid.
1462+
'@media/color' is <a>false in the negative range</a>.
14221463

14231464
<div class="example">
14241465
For example, these two media queries express that a style sheet applies to all color devices:
@@ -1467,7 +1508,7 @@ Paletted Color Screens: the 'color-index' feature</h3>
14671508
The 'color-index' media feature describes the number of entries in the color lookup table of the output device.
14681509
If the device does not use a color lookup table, the value is zero.
14691510

1470-
Negative <<integer>>s are invalid.
1511+
'@media/color-index' is <a>false in the negative range</a>.
14711512

14721513
<div class="example">
14731514
For example, here are two ways to express that a style sheet applies to all color index devices:
@@ -1502,7 +1543,7 @@ Monochrome Screens: the 'monochrome' feature</h3>
15021543
If the device is not a monochrome device,
15031544
the output device value will be 0.
15041545

1505-
Negative <<integer>>s are invalid.
1546+
'@media/monochrome' is <a>false in the negative range</a>.
15061547

15071548
<div class="example">
15081549
For example, this is how to express that a style sheet applies to all monochrome devices:
@@ -2007,7 +2048,7 @@ device-width</h3>
20072048
For continuous media, this is the width of the <a>Web-exposed screen area</a>.
20082049
For paged media, this is the width of the page sheet size.
20092050

2010-
Negative <<length>>s are invalid.
2051+
'@media/device-width' is <a>false in the negative range</a>.
20112052

20122053
<div class="example">
20132054
<pre>@media (device-width < 800px) { … }</pre>
@@ -2036,7 +2077,7 @@ device-height</h3>
20362077
For continuous media, this is the height of the <a>Web-exposed screen area</a>.
20372078
For paged media, this is the height of the page sheet size.
20382079

2039-
Negative <<length>>s are invalid.
2080+
'@media/device-height' is <a>false in the negative range</a>.
20402081

20412082
<div class="example">
20422083
<pre>&lt;link rel="stylesheet" media="(device-height > 600px)" /&gt;</pre>
@@ -2078,6 +2119,14 @@ device-aspect-ratio</h3>
20782119

20792120
<h2 id="changes" class="no-num">
20802121
Changes</h2>
2122+
<h3 id="changes-2017">
2123+
Changes since the 19 May 2017 Working Draft</h3>
2124+
The following changes were made to this specification since the
2125+
<a href="https://www.w3.org/TR/2017/WD-mediaqueries-4-20170519/">19 May 2017 Working Draft </a>:
2126+
<ul>
2127+
<li>Changed range media features to be <a>false in the negative range</a> instead of failing to parse negative values.
2128+
</ul>
2129+
20812130
<h3 id="changes-2012">
20822131
Changes Since Media Queries Level 3</h3>
20832132

‎mediaqueries/issues-wd-2016-01-26.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,15 @@ <h1>Media Queries Level 4 Disposition of Comments for 2016-01-26 WD</h1>
359359
Response: <a href='https://github.com/w3c/csswg-drafts/issues/1231#issuecomment-294632518'>https://github.com/w3c/csswg-drafts/issues/1231#issuecomment-294632518</a>
360360
Closed: Accepted
361361
Resolved: Editorial</pre>
362+
<pre class='a' id='issue-36'>
363+
Issue 36. <a href='#issue-36'>#</a>
364+
Summary: Handling of negative values for range media features
365+
From: Xidorn Quan
366+
Comment: <a href='https://github.com/w3c/csswg-drafts/issues/1454'>https://github.com/w3c/csswg-drafts/issues/1454</a>
367+
Response: <a href='https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-304202588'>https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-304202588</a>
368+
Closed: Rejected
369+
Resolved: <a href='https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306958764'>https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306958764</a>
370+
Verified: <a href='https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306986179'>https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306986179</a></pre>
362371
<script>
363372
(function () {
364373
var sheet = document.styleSheets[0];

‎mediaqueries/issues-wd-2016-01-26.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,3 +331,13 @@ Comment: https://github.com/w3c/csswg-drafts/issues/1231
331331
Response: https://github.com/w3c/csswg-drafts/issues/1231#issuecomment-294632518
332332
Closed: Accepted
333333
Resolved: Editorial
334+
335+
----
336+
Issue 36.
337+
Summary: Handling of negative values for range media features
338+
From: Xidorn Quan
339+
Comment: https://github.com/w3c/csswg-drafts/issues/1454
340+
Response: https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-304202588
341+
Closed: Rejected
342+
Resolved: https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306958764
343+
Verified: https://github.com/w3c/csswg-drafts/issues/1454#issuecomment-306986179

0 commit comments

Comments
 (0)