empty media query list per comment 7 / 20 in disposition; min-orientation example (invalid); resolution is in device pixels

Author: annevk

css3-mediaqueries/Overview.html

@@ -322,7 +322,9 @@ <h2 id=background><span class=secno>1. </span>Background</h2>
    applies to all media types.
 
   <p>Media-specific style sheets are supported by several user agents. The
-   most commonly used feature is to distinguish between "screen" and "print".
+   most commonly used feature is to distinguish between &lsquo;<code
+   class=css>screen</code>&rsquo; and &lsquo;<code
+   class=css>print</code>&rsquo;.
 
   <p>There have been requests for ways to describe in more detail what type
    of output devices a style sheet applies to. Fortunately HTML4 foresaw
@@ -410,16 +412,17 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
    media query is true if the media type of the media query matches the media
    type of the device where the user agent is running (as defined in the
    "Applies to" line), and all expressions in the media query are true. Also,
-   a media query which is otherwise false becomes true if the "not" keyword
-   is present.
+   a media query which is otherwise false becomes true if the &lsquo;<code
+   class=css>not</code>&rsquo; keyword is present.
 
   <p>When a media query is true, the corresponding style sheet is applied as
    per the normal cascading rules.
 
   <p>Several media queries can be combined in a comma-separated list. If one
    or more of the media queries in the comma-separated list is true, the
    associated style sheet is applied, otherwise the associated style sheet is
-   ignored.
+   ignored. If the comma-separated list is the emtpy list it is assumed to
+   specify the media query &lsquo;<code class=css>all</code>&rsquo;.
 
   <div class=example>
    <p>Here is an example of several media queries in a comma-separated list
@@ -430,6 +433,15 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
 </pre>
   </div>
 
+  <div class=example>
+   <p>Here are two examples of the empty media query list in HTML:</p>
+
+   <pre>
+<span class=html-example>&lt;link rel="stylesheet" href="example.css" media=""/></span>
+<span class=html-example>&lt;link rel="stylesheet" href="example.css" media=" "/></span>
+</pre>
+  </div>
+
   <p>In the media queries syntax, the comma expresses a logical OR, while the
    &lsquo;<code class=css>and</code>&rsquo; keyword expresses a logical AND.
 
@@ -549,7 +561,7 @@ <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
   <pre>media_query_list
- : S* media_query [ ',' S* media_query]*
+ : S* media_query [ ',' S* media_query]* | S*
  ;
 media_query
  : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
@@ -635,6 +647,14 @@ <h3 id=error><span class=secno>3.1 </span>Error Handling</h3>
       evaluated as if the first had not been specified.</p>
     </div>
 
+    <div class=example>
+     <pre>@media (min-orientation:portrait) { ... }</pre>
+
+     <p>Is dropped because the &lsquo;<code
+      class=css>orientation</code>&rsquo; feature does not accept the
+      &lsquo;<code class=css>min-</code>&rsquo; prefix.</p>
+    </div>
+
    <li>
     <p><strong>Unknown media feature values.</strong> As with unknown media
      features, user agents are to ignore a media query when one of the
@@ -668,8 +688,8 @@ <h3 id=error><span class=secno>3.1 </span>Error Handling</h3>
 
     <div class=example>
      <p>The following is an malformed media query because having no space
-      between "and" and the expression is not allowed. (That is reserved for
-      the functional notation syntax.)</p>
+      between &lsquo;<code class=css>and</code>&rsquo; and the expression is
+      not allowed. (That is reserved for the functional notation syntax.)</p>
 
      <pre>@media all and(color) { ... }</pre>
     </div>
@@ -700,11 +720,13 @@ <h2 id=media1><span class=secno>4. </span>Media features</h2>
     how to present a document. Media features are used in
     <em>expressions</em> to describe requirements of the output device.
 
-   <li>Most media features accept optional "min-" or "max-" prefixes to
-    express "greater or equal to" and "smaller or equal to" constraints. This
-    syntax is used to avoid "&lt;" and "&gt;" characters which may conflict
-    with HTML and XML. Those media features that accept prefixes will most
-    often be used with prefixes, but can also be used alone.
+   <li>Most media features accept optional &lsquo;<code
+    class=css>min-</code>&rsquo; or &lsquo;<code class=css>max-</code>&rsquo;
+    prefixes to express "greater or equal to" and "smaller or equal to"
+    constraints. This syntax is used to avoid "&lt;" and "&gt;" characters
+    which may conflict with HTML and XML. Those media features that accept
+    prefixes will most often be used with prefixes, but can also be used
+    alone.
 
    <li>Properties always require a value to form a declaration. Media
     features, on the other hand, can also be used without a value. For a
@@ -1174,7 +1196,8 @@ <h3 id=resolution0><span class=secno>5.1 </span>Resolution</h3>
 
   <p>The &lsquo;<code class=css>dpi</code>&rsquo; and &lsquo;<code
    class=css>dpcm</code>&rsquo; units describe the resolution of an output
-   device, i.e., the density of pixels. Resolution unit identifiers are:
+   device, i.e., the density of device pixels. Resolution unit identifiers
+   are:
 
   <dl>
    <dt>dpi

css3-mediaqueries/Overview.src.html

@@ -189,7 +189,7 @@ <h2>Background</h2>
 
 <p>Media-specific style sheets are supported by several user
 agents. The most commonly used feature is to distinguish between
-"screen" and "print".</p>
+''screen'' and ''print''.</p>
 
 <p>There have been requests for ways to describe in more detail
 what type of output devices a style sheet applies to. Fortunately
@@ -281,7 +281,7 @@ <h2 id="media0">Media Queries</h2>
 false. A media query is true if the media type of the media query
 matches the media type of the device where the user agent is running (as defined in the "Applies to" line),
 and all expressions in the media query are true. Also, a media query
-which is otherwise false becomes true if the "not" keyword is
+which is otherwise false becomes true if the ''not'' keyword is
 present.</p>
 
 <p>When a media query is true, the corresponding style sheet is
@@ -290,7 +290,8 @@ <h2 id="media0">Media Queries</h2>
 <p>Several media queries can be combined in a comma-separated list.
 If one or more of the media queries in the comma-separated list is
 true, the associated style sheet is applied, otherwise the
-associated style sheet is ignored. </p>
+associated style sheet is ignored. If the comma-separated list is the emtpy
+list it is assumed to specify the media query ''all''.</p>
 
 <div class="example">
 
@@ -303,8 +304,19 @@ <h2 id="media0">Media Queries</h2>
 
 </div>
 
-<p>In the media queries syntax, the comma expresses a logical OR, while the ''and'' keyword
-expresses a logical AND.</p>
+<div class="example">
+
+<p>Here are two examples of the empty media query list in HTML:</p>
+
+<pre>
+<span class="html-example">&lt;link rel="stylesheet" href="example.css" media=""/></span>
+<span class="html-example">&lt;link rel="stylesheet" href="example.css" media=" "/></span>
+</pre>
+
+</div>
+
+<p>In the media queries syntax, the comma expresses a logical OR, while the
+''and'' keyword expresses a logical AND.</p>
 
 <p>The logical NOT can be expressed through the ''not'' keyword. </p>
 
@@ -412,7 +424,7 @@ <h2>Syntax</h2>
 <code>medium</code> production from CSS2. [[!CSS21]]</p>
 
 <pre>media_query_list
- : S* media_query [ ',' S* media_query]*
+ : S* media_query [ ',' S* media_query]* | S*
  ;
 media_query
  : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
@@ -495,6 +507,13 @@ <h3>Error Handling</h3>
    media feature and unknown value, but the second media query is evaluated
    as if the first had not been specified.</p>
   </div>
+  
+  <div class="example">
+   <pre>@media (min-orientation:portrait) { ... }</pre>
+   
+   <p>Is dropped because the ''orientation'' feature does not accept the
+   ''min-'' prefix.
+  </div>
 
  <li>
   <p><strong>Unknown media feature values.</strong> As with unknown media
@@ -528,7 +547,7 @@ <h3>Error Handling</h3>
 
   <div class="example">
    <p>The following is an malformed media query because having no space
-   between "and" and the expression is not allowed. (That is reserved for
+   between ''and'' and the expression is not allowed. (That is reserved for
    the functional notation syntax.)</p>
    <pre>@media all and(color) { ... }</pre>
   </div>
@@ -560,7 +579,7 @@ <h2 id="media1">Media features</h2>
 used in <em>expressions</em> to describe requirements of the output
 device.</li>
 
-<li>Most media features accept optional "min-" or "max-" prefixes
+<li>Most media features accept optional ''min-'' or ''max-'' prefixes
 to express "greater or equal to" and "smaller or equal to"
 constraints. This syntax is used to avoid "&lt;" and "&gt;"
 characters which may conflict with HTML and XML. Those media features
@@ -587,8 +606,8 @@ <h2 id="media1">Media features</h2>
 </ul>
 
 <div class="example">
-<p>For example, the ''color'' media feature can form expressions without a value
-(''(color)''), or with a value (''(min-color: 1)'').</p>
+<p>For example, the ''color'' media feature can form expressions without a
+value (''(color)''), or with a value (''(min-color: 1)'').</p>
 </div>
 
 
@@ -1069,7 +1088,8 @@ <h2 id="units">Units</h2>
 <h3>Resolution</h3>
 
 <p>The ''dpi'' and ''dpcm'' units describe the resolution of an output
-device, i.e., the density of pixels. Resolution unit identifiers are:</p>
+device, i.e., the density of device pixels. Resolution unit identifiers
+are:</p>
 
 <dl>
 <dt>dpi</dt>