w3c
diff --git a/‎css3-mediaqueries/Overview.html‎
Lines changed: 66 additions & 54 deletions b/‎css3-mediaqueries/Overview.html‎
Lines changed: 66 additions & 54 deletions
@@ -24,13 +24,13 @@
 
    <h1 id=media-queries>Media Queries</h1>
 
-   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 29 March 2008</h2>
+   <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 4 April 2008</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2008/ED-css3-mediaqueries-20080329/">http://www.w3.org/TR/2008/ED-css3-mediaqueries-20080329/</a>
+     href="http://www.w3.org/TR/2008/ED-css3-mediaqueries-20080404/">http://www.w3.org/TR/2008/ED-css3-mediaqueries-20080404/</a>
 
     <dt>Latest version:
 
@@ -85,17 +85,17 @@ <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 29 March 2008</h2>
 
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
 
-  <p>HTML4 and CSS 2.1 currently support media-dependent style sheets
-   tailored for different <em>media types</em>. For example, a document may
-   use sans-serif fonts when displayed on a screen and serif fonts when
-   printed. "Screen" and "print" are two media types that have been defined.
-   <em>Media Queries</em> extend the functionality of media types by allowing
-   more precise labeling of style sheets.
+  <p>HTML4 and CSS2 currently support media-dependent style sheets tailored
+   for different <em>media types</em>. For example, a document may use
+   sans-serif fonts when displayed on a screen and serif fonts when printed.
+   "Screen" and "print" are two media types that have been defined. <em>Media
+   queries</em> extend the functionality of media types by allowing more
+   precise labeling of style sheets.
 
-  <p>A Media Query consists of a media type and one or more expressions to
+  <p>A media query consists of a media type and one or more expressions to
    limit the scope of style sheets. Among the <em>media features</em> that
    can be used in media queries are "width", "height", and "color". By using
-   Media Queries, presentations can be tailored to a specific range of output
+   media queries, presentations can be tailored to a specific range of output
    devices without changing the content itself.
 
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
@@ -237,7 +237,7 @@ <h2 id=background><span class=secno>1. </span>Background</h2>
   <p>(This section is not normative.)
 
   <p>HTML4 <a href="#HTML401" rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>
-   and CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+   and CSS2 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
    currently support media-dependent style sheets tailored for different
    media types. For example, a document may use different style sheets for
    screen and print. In HTML4, this can be written as:
@@ -262,11 +262,9 @@ <h2 id=background><span class=secno>1. </span>Background</h2>
 
   <p>The "print" and "screen" media types are defined in HTML4. The complete
    list of media types in HTML4 is: "aural", "braille", "handheld", "print",
-   "projection", "screen", "tty", "tv". CSS 2.1 defines the same list with
-   the addition of "embossed" to differentiate between braille tactile
-   feedback devices and braille printers. CSS 2.1 uses "speech" instead of
-   "aural". Also, "all" is used to indicate that the style sheet applies to
-   all media types.
+   "projection", "screen", "tty", "tv". CSS2 defines the same list, removes
+   "aural" and adds "embossed" and "speech". Also, "all" is used to indicate
+   that the style sheet 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".
@@ -313,17 +311,23 @@ <h2 id=background><span class=secno>1. </span>Background</h2>
    </ol>
   </blockquote>
 
-  <p>Media Queries, as described in this specification, build on the
-   mechanism outlined in HTML4. The syntax of Media Queries fit into the
+  <p>Media queries, as described in this specification, build on the
+   mechanism outlined in HTML4. The syntax of media queries fit into the
    media type syntax reserved in HTML4. The <code class=html>media</code>
    attribute of HTML4 also exists in XHTML and generic XML. The same syntax
    can also be used inside in the ''@media'' and ''@import'' rules of CSS.
 
+  <p>However, the parsing rules for media queries are incompatible with those
+   of HTML4 so that they are consistent with those of media queries used in
+   CSS. It is expected that future versions of HTML refer to the media
+   queries specification directly so that this difference is resolved.
+
   <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
 
-  <p>A Media Query consists of a media type and one or more <span class=index
+  <p>A media query consists of a media type and one or more <span class=index
    id=expressions>expressions</span> involving <span class=index
-   id=media>media features</span>.
+   id=media>media features</span>. If the media type is omitted it is assumed
+   to be "all".
 
   <div class=example>
    <p>Here is a simple example written in HTML:</p>
@@ -335,6 +339,12 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
    <p>This example expresses that a certain style sheet
     (<code>example.css</code>) applies to devices of a certain media type
     (''screen'') with certain feature (it must be a color screen).</p>
+
+   <p>Here is a simple example written in HTML that applies to all devices
+    that support colors:</p>
+
+   <pre><span class=html-example>&lt;link rel="stylesheet" media="(color)" href="example.css" /&gt;</span>
+</pre>
   </div>
 
   <div class=example>
@@ -345,17 +355,17 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
 </pre>
   </div>
 
-  <p>A Media Query is a logical expression that is either true or false. A
-   Media Query is true if the media type of the Media Query matches the media
+  <p>A media query is a logical expression that is either true or 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, and all expressions in
-   the Media Query are true. Also, a Media Query which is otherwise false
+   the media query are true. Also, a media query which is otherwise false
    becomes true if the "not" keyword is present.
 
-  <p>When a Media Query is true, the corresponding style sheet is applied as
+  <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
+  <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.
 
@@ -368,7 +378,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
 </pre>
   </div>
 
-  <p>In the Media Queries syntax, the comma expresses a logical OR, while the
+  <p>In the media queries syntax, the comma expresses a logical OR, while the
    ''and'' keyword expresses a logical AND.
 
   <p>The logical NOT can be expressed through the ''not'' keyword.
@@ -380,7 +390,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
   </div>
 
   <p>The presence of the keyword ''not'' at the beginning of the query
-   negates the result. I.e., if the Media Query had been true without the
+   negates the result. I.e., if the media query had been true without the
    ''not'' keyword it will become false, and vice versa. User agents that
    only support media types (as described in HTML4) will not recognize the
    ''not'' keyword and the associated style sheet is therefore not applied.
@@ -395,7 +405,7 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
 </pre>
   </div>
 
-  <p>The Media Queries syntax can be used with HTML, XHTML, XML <a
+  <p>The media queries syntax can be used with HTML, XHTML, XML <a
    href="#XMLSTYLE" rel=biblioentry>[XMLSTYLE]<!--{{XMLSTYLE}}--></a> and the
    @import and @media rules of CSS.
 
@@ -481,9 +491,10 @@ <h2 id=media0><span class=secno>2. </span>Media Queries</h2>
   <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
 
   <p>The media query syntax is described in terms of the <a
-   href="http://www.w3.org/TR/CSS21/grammar.html">CSS 2.1 grammar</a>. The
+   href="http://www.w3.org/TR/CSS21/grammar.html">CSS2 grammar</a> and <a
+   href="http://www.w3.org/TR/CSS21/syndata.html#syntax">CSS2 syntax</a>. The
    <code>media_query_list</code> production defined below replaces the
-   <code>medium</code> production from CSS 2.1. <a href="#CSS21"
+   <code>medium</code> production from CSS2. <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
   <pre>media_query_list
@@ -497,13 +508,13 @@ <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
  : IDENT S*
  ;
 expression
- : '(' S* media_feature [':' S* expr]? ')' S*
+ : '(' S* media_feature [':' S* value]? ')' S*
  ;
 media_feature
  : IDENT S*
  ;</pre>
 
-  <p>the following new definitions are introduced:
+  <p>The following new definitions are introduced:
 
   <pre>
 L  l|\\0{0,4}(4c|6c)(\r\n|[ \t\r\n\f])?|\\l
@@ -518,13 +529,14 @@ <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
 {num}{D}{P}{I}    {return RESOLUTION;}
 {num}{D}{P}{C}{M} {return RESOLUTION;}</pre>
 
-  <p><code>RESOLUTION</code> is to be added to the CSS 2.1 <code>term</code>
+  <p><code>RESOLUTION</code> is to be added to the CSS2 <code>term</code>
    production equivalently to other units.
 
   <p>CSS style sheets are generally case-insensitive, and this is also the
-   case for Media Queries.
+   case for media queries.
 
-  <p>Media queries involving unknown media types are ignored.
+  <p>Media queries involving unknown media types are always false, even when
+   negated.
 
   <div class=example>
    <p>Both these examples involve unknown media types and they are therefore
@@ -535,12 +547,12 @@ <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
 <span class=html-example>&lt;link rel="stylesheet" media="<em>not 3d and (color)</em>" href="example.css" /&gt;</span>
 </pre>
 
-   <p>Because "3d" is an unknown type, the media query is ignored and the
+   <p>Because "3d" is an unknown type, the media query is false and the
     associated style sheet will not be applied.</p>
   </div>
   <!--
 <div class="example">
-<p>In a comma-separated list of Media Queries, only those Media
+<p>In a comma-separated list of media queries, only those Media
 Queries that involve unknown media types are ignored. In this example,
 the first media query is ignored, but the second is not::</p>
 
@@ -577,7 +589,7 @@ <h2 id=syntax><span class=secno>3. </span>Syntax</h2>
     as if the first had not been specified.</p>
   </div>
   <!--
-<p>For a definition of values used in Media Queries, see <a href=
+<p>For a definition of values used in media queries, see <a href=
 "http://www.w3.org/TR/REC-CSS2/syndata.html#values">CSS2, section
 4.3: Values and Units</a> {{!CSS21}}.</p>
 -->
@@ -629,13 +641,13 @@ <h3 id=width><span class=secno>4.1 </span>width</h3>
 
   <p>The ''width'' media feature describes the width of the rendering surface
    of the output device. For continuous media, this is the width of the
-   viewport (as described by CSS 2.1, section 9.1.1 <a href="#CSS21"
+   viewport (as described by CSS2, section 9.1.1 <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>). For paged media, this is
-   the width of the page box (as described by CSS 2.1, section 13.2 <a
+   the width of the page box (as described by CSS2, section 13.2 <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>).
 
   <div class=example>
-   <p>For example, this Media Query expresses that the style sheet is usable
+   <p>For example, this media query expresses that the style sheet is usable
     on printed output wider than 25cm:</p>
 
    <pre>
@@ -644,7 +656,7 @@ <h3 id=width><span class=secno>4.1 </span>width</h3>
   </div>
 
   <div class=example>
-   <p>This Media Query expresses that the style sheet is usable on devices
+   <p>This media query expresses that the style sheet is usable on devices
     with viewport (the part of the screen/paper where the document is
     rendered) widths between 400 and 700 pixels:</p>
 
@@ -654,7 +666,7 @@ <h3 id=width><span class=secno>4.1 </span>width</h3>
   </div>
 
   <div class=example>
-   <p>This Media Query expresses that style sheet is usable on screen and
+   <p>This media query expresses that style sheet is usable on screen and
     handheld devices if the width of the viewport is greater than 20em.</p>
 
    <pre>
@@ -831,7 +843,7 @@ <h3 id=color><span class=secno>4.8 </span>color</h3>
   </div>
 
   <div class=example>
-   <p>This Media Query expresses that a style sheet applies to color devices
+   <p>This media query expresses that a style sheet applies to color devices
     with 2 or more bits per color component:</p>
 
    <pre>
@@ -880,7 +892,7 @@ <h3 id=color-index><span class=secno>4.9 </span>color-index</h3>
   </div>
 
   <div class=example>
-   <p>This Media Query expresses that a style sheet applies to a color index
+   <p>This media query expresses that a style sheet applies to a color index
     device with 256 or more entries:</p>
 
    <pre>
@@ -947,7 +959,7 @@ <h3 id=resolution><span class=secno>4.11 </span>resolution</h3>
    non-square pixels.
 
   <div class=example>
-   <p>For example, this Media Query expresses that a style sheet is usable on
+   <p>For example, this media query expresses that a style sheet is usable on
     devices with resolution greater than 300 dots per inch:</p>
 
    <pre>
@@ -956,7 +968,7 @@ <h3 id=resolution><span class=secno>4.11 </span>resolution</h3>
   </div>
 
   <div class=example>
-   <p>This Media Query expresses that a style sheet is usable on devices with
+   <p>This media query expresses that a style sheet is usable on devices with
     resolution greater than 118 dots per centimeter:</p>
 
    <pre>
@@ -976,7 +988,7 @@ <h3 id=scan><span class=secno>4.12 </span>scan</h3>
    devices.
 
   <div class=example>
-   <p>For example, this Media Query expresses that a style sheet is usable on
+   <p>For example, this media query expresses that a style sheet is usable on
     tv devices with progressive scanning:</p>
 
    <pre>
@@ -1013,13 +1025,13 @@ <h3 id=grid><span class=secno>4.13 </span>grid</h3>
 
   <h2 id=units><span class=secno>5. </span>Units</h2>
 
-  <p>The units used in Media Queries are the same as in other parts of CSS.
+  <p>The units used in media queries are the same as in other parts of CSS.
    For example, the pixel unit represents CSS pixels and not physical pixels.
 
   <p>Note, however, that the ''em'' unit has a special meaning on grid output
    devices, as discussed above.
 
-  <p>Relative units in Media Queries are based on the initial value. For
+  <p>Relative units in media queries are based on the initial value. For
    example, in HTML, the ''em'' unit is relative to the initial value of
    'font-size'.
 
@@ -1047,9 +1059,9 @@ <h2 class=no-num id=acknowledgments>Acknowledgments</h2>
    Style Sheets.
 
   <p>Comments from Christoph P&auml;per, Simon Pieters, Rijk van Geijtenbeek,
-   Anne van Kesteren, Sigurd Lerstad, Arve Bersvendsen, Susan Lesch, Philipp
-   Hoschka, Roger Gimson, Steven Pemberton, Simon Kissane, Melinda Grant, and
-   L. David Baron improved this specification.
+   Sigurd Lerstad, Arve Bersvendsen, Susan Lesch, Philipp Hoschka, Roger
+   Gimson, Steven Pemberton, Simon Kissane, Melinda Grant, and L. David Baron
+   improved this specification.
 
   <h2 class=no-num id=references>References</h2>