[css-device-adapt] Rephrased UA styles section.

Incorporated Kenneth Christiansen's proposed text changes to get rid of most
of the "desktop" terms.

Author: Rune Lillesveen

css-device-adapt/Overview.html

@@ -11,7 +11,7 @@
    rel=dcterms.rights>
   <meta content="CSS Device Adaptation" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2013-10-04 name=dcterms.date>
+  <meta content=2013-10-11 name=dcterms.date>
   <meta content="Rune Lillesveen" name=dcterms.creator>
   <meta content="Øyvind Stenhaug" name=dcterms.creator>
   <meta content="Florian Rivoal" name=dcterms.creator>
@@ -30,13 +30,13 @@
 
    <h1>CSS Device Adaptation</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2013</h2>
+   <h2 class="no-num no-toc">Editor's Draft 11 October 2013</h2>
 
    <dl>
     <dt>This version:
 
     <dd>$Date$ (editor's draft)
-     <!--<dd><a href="http://dev.w3.org/csswg/css-device-adapt/">http://www.w3.org/TR/2013/WD-css-device-adapt-20131004/</a></dd>-->
+     <!--<dd><a href="http://dev.w3.org/csswg/css-device-adapt/">http://www.w3.org/TR/2013/WD-css-device-adapt-20131011/</a></dd>-->
 
     <dt>Latest version:
 
@@ -105,14 +105,13 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 4 October 2013</h2>
    <hr title="Separator for header">
   </div>
 
-  <h2 class="no-num no-toc" id=abstract>Abstract</h2>
+  <h2 class="no-num no-toc">Abstract</h2>
 
   <p>This specification provides a way for an author to specify, in CSS, the
    size, zoom factor, and orientation of the viewport that is used as the
    base for the initial containing block.
 
-  <h2 class="no-num no-toc" id=status-of-this-document>Status of this
-   document</h2>
+  <h2 class="no-num no-toc">Status of this document</h2>
   <!--begin-status-->
 
   <p>This is a public copy of the editors' draft. It is provided for
@@ -148,7 +147,7 @@ <h2 class="no-num no-toc" id=status-of-this-document>Status of this
    6 of the W3C Patent Policy</a>.</p>
   <!--end-status-->
 
-  <h2 class="no-num no-toc" id=table-of-contents>Table of Contents</h2>
+  <h2 class="no-num no-toc">Table of Contents</h2>
   <!--begin-toc-->
 
   <ul class=toc>
@@ -243,8 +242,8 @@ <h2 class="no-num no-toc" id=table-of-contents>Table of Contents</h2>
    <li><a href="#ua-stylesheet"><span class=secno>12. </span>UA stylesheets
     </a>
     <ul class=toc>
-     <li><a href="#desktop-ua-styles-"><span class=secno>12.1. </span>Desktop
-      UA styles </a>
+     <li><a href="#large-screen-ua-styles-"><span class=secno>12.1.
+      </span>Large screen UA styles </a>
 
      <li><a href="#small-screen-ua-styles"><span class=secno>12.2.
       </span>Small screen UA styles</a>
@@ -320,8 +319,9 @@ <h2 id=the-viewport><span class=secno>3. </span>The viewport</h2>
    feature of a user agent for continuous media and used to establish the
    initial containing block for continuous media. For paged media, the
    initial containing block is based on the page area. The page area can be
-   set through @page rules. Hence, @viewport applies to continuous media, and
-   @page to paged media, and they will not interact or conflict.
+   set through @page rules. Hence, <code class=css>@viewport</code> applies
+   to continuous media, and @page to paged media, and they will not interact
+   or conflict.
 
   <p>This specification introduces a way of overriding the size of the
    viewport provided by the user agent (UA). Because of this, we need to
@@ -364,8 +364,9 @@ <h2 id=the-viewport><span class=secno>3. </span>The viewport</h2>
    browser? (And what's a desktop browser)". Need to say that a "desktop"
    browser typically have no UA styles, as opposed to the <a
    href="#ua-stylesheet">UA stylesheet</a> outlined for current mobile
-   behaviour, and that no UA styles for @viewport will give "desktop"
-   behaviour per default (actual viewport is initial viewport).
+   behaviour, and that no UA styles for <code class=css>@viewport</code> will
+   give "desktop" behaviour per default (actual viewport is initial
+   viewport).
 
   <h2 id=the-atviewport-rule><span class=secno>4. </span>The <code
    class=css>@viewport</code> rule</h2>
@@ -1139,8 +1140,8 @@ <h3 id=constraining-procedure><span class=secno>6.2. </span>The procedure</h3>
    changes in the user environment would cause them to re-evaluate Media
    Queries.
 
-  <h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
-   <code title="min-zoom!!resolved">min-zoom</code> and <code
+  <h4 class="no-num no-toc">Resolve <code
+   title="min-zoom!!resolved">min-zoom</code> and <code
    title="max-zoom!!resolved">max-zoom</code> values</h4>
 
   <ol>
@@ -1151,8 +1152,7 @@ <h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
     set <code>max-zoom = MAX(min-zoom, max-zoom)</code>
   </ol>
 
-  <h4 class="no-num no-toc"
-   id=constrain-zoom-value-to-the-min-zoom-max>Constrain <code
+  <h4 class="no-num no-toc">Constrain <code
    title="zoom!!resolved">zoom</code> value to the <code>[min-zoom,
    max-zoom]</code> range</h4>
 
@@ -1175,8 +1175,7 @@ <h4 class="no-num no-toc" id=resolve-px>Resolve non-‘<a
     descriptors.
   </ol>
 
-  <h4 class="no-num no-toc"
-   id=resolve-initial-width-and-height-from-mi>Resolve initial <code
+  <h4 class="no-num no-toc">Resolve initial <code
    title="width!!resolved">width</code> and <code
    title="height!!resolved">height</code> from min/max descriptors</h4>
 
@@ -1192,7 +1191,7 @@ <h4 class="no-num no-toc" id=resolve-px>Resolve non-‘<a
     <code>height = MAX(min-height, MIN(max-height, initial-height))</code>
   </ol>
 
-  <h4 class="no-num no-toc" id=resolve-width-value>Resolve <code
+  <h4 class="no-num no-toc">Resolve <code
    title="width!!resolved">width</code> value</h4>
 
   <ol id=ol6>
@@ -1207,7 +1206,7 @@ <h4 class="no-num no-toc" id=resolve-width-value>Resolve <code
     title="height!!initial">initial-height</code> is 0.
   </ol>
 
-  <h4 class="no-num no-toc" id=resolve-height-value>Resolve <code
+  <h4 class="no-num no-toc">Resolve <code
    title="height!!resolved">height</code> value</h4>
 
   <ol id=ol8>
@@ -1695,8 +1694,8 @@ <h3 id=lsquoextend-to-zoomrsquo><span class=secno>10.3. </span>‘<code
    the initial width is 320px, <code class=html>&lt;meta name="viewport"
    content="width=10"&gt;</code> will resolve to 64px.
 
-  <h4 class="no-num no-toc" id=resolving-lsquoextend-to-zoomrsquo>Resolving
-   ‘<code class=css title=extend-to-zoom>extend-to-zoom</code>’</h4>
+  <h4 class="no-num no-toc">Resolving ‘<code class=css
+   title=extend-to-zoom>extend-to-zoom</code>’</h4>
 
   <p>The ‘<code class=css title=extend-to-zoom>extend-to-zoom</code>’
    value is resolved to pixel or auto lengths as part of <a
@@ -1772,14 +1771,13 @@ <h3 id=translation-into-atviewport-descriptors><span class=secno>10.4.
   <p>Each of the property/value pair from the parsing in the previous section
    are translated, and added to that single at-rule as follows:
 
-  <h4 class="no-num no-toc" id=unknown-properties>Unknown properties</h4>
+  <h4 class="no-num no-toc">Unknown properties</h4>
 
   <p>Unknown properties are dropped.
 
-  <h4 class="no-num no-toc" id=the-width-and-height-properties>The <code
-   class=index id=width2 title="width!!viewport META">width</code> and <code
-   class=index id=height2 title="height!!viewport META">height</code>
-   properties</h4>
+  <h4 class="no-num no-toc">The <code class=index id=width2
+   title="width!!viewport META">width</code> and <code class=index id=height2
+   title="height!!viewport META">height</code> properties</h4>
 
   <p>The <code class=index id=width3
    title="width!!viewport META">width</code> and <code class=index id=height3
@@ -1883,9 +1881,9 @@ <h4 class="no-num no-toc" id=the-width-and-height-properties>The <code
    --></pre>
   </div>
 
-  <h4 class="no-num no-toc" id=the-initial-scale-minimum-scale-and-maxi>The
-   <code class=index id=initial-scale0>initial-scale</code>, <code
-   class=index id=minimum-scale0>minimum-scale</code>, and <code class=index
+  <h4 class="no-num no-toc">The <code class=index
+   id=initial-scale0>initial-scale</code>, <code class=index
+   id=minimum-scale0>minimum-scale</code>, and <code class=index
    id=maximum-scale0>maximum-scale</code> properties</h4>
 
   <p>The properties are translated into ‘<code class=descriptor
@@ -1923,8 +1921,8 @@ <h4 class="no-num no-toc" id=the-initial-scale-minimum-scale-and-maxi>The
    the UA stylesheet ‘<a href="#max-zoom"><code
    class=descriptor>max-zoom</code></a>’ value.
 
-  <h4 class="no-num no-toc" id=the-user-scalable-property>The <code
-   class=index id=user-scalable0>user-scalable</code> property</h4>
+  <h4 class="no-num no-toc">The <code class=index
+   id=user-scalable0>user-scalable</code> property</h4>
 
   <p>The <code class=index id=user-scalable1>user-scalable</code> property is
    translated into ‘<a href="#user-zoom"><code
@@ -1998,27 +1996,40 @@ <h2 id=ua-stylesheet><span class=secno>12. </span>UA stylesheets</h2>
 
   <p><em>This section is informative</em>
 
-  <p>With the term desktop browser below, we mean a browser which has a size
-   of the initial viewport, in CSS pixels, that is at least as large as the
-   smallest viewport or viewing area you would expect a user of a desktop
-   computer to have. In that sense, it could include tablet PC and TV
-   browsers.
+  <p>Traditional user agents, used mostly on desktop and laptop computers,
+   can easily be resized to fit most websites inside the initial viewport
+   without breaking the layout. Using the recommendations below, sites not
+   adding any <code class=css>@viewport</code> rules themselves will continue
+   to look and function like they always have.
 
-  <h3 id=desktop-ua-styles-><span class=secno>12.1. </span>Desktop UA styles</h3>
+  <h3 id=large-screen-ua-styles-><span class=secno>12.1. </span>Large screen
+   UA styles</h3>
 
-  <p>For a desktop browser, the recommendation is to have no UA styles. That
-   means that it will have all descriptors initially set to ‘<code
+  <p>For browsers with an initial viewport size large enough to fit common
+   websites without breaking the layout, or which can easily to resized to do
+   so, the recommendation is to have <em>no</em> UA styles. That means that
+   it will have all descriptors initially set to ‘<code
    class=css>auto</code>’, and behave as it would have without support for
-   viewport descriptors if there are no viewport descriptors in the user or
-   author styles.
+   viewport descriptors.
+
+  <p>For browsers which support changing orientation, and the portrait mode
+   breaks this the above, it is recommended to set a minimum layout width,
+   equal to that of the width in landscape mode.
+
+  <div class=example>
+   <pre><!--
+        -->@viewport {
+<!--    -->  min-width: 1024px;
+<!--    -->}<!--
+   --></pre>
+  </div>
 
   <h3 id=small-screen-ua-styles><span class=secno>12.2. </span>Small screen
    UA styles</h3>
 
-  <p>For smaller screen UAs like smartphone browsers, the UA could typically
-   set the minimum viewport width to something that is at least as large as
-   the narrowest width an author would expect a desktop user would use to
-   view documents.
+  <p>For smaller screen UAs, the UA could set the minimum viewport width to
+   typically used as an initial viewport width of a traditional user agent
+   (as described above).
 
   <div class=example>
    <pre><!--
@@ -2050,20 +2061,20 @@ <h3 class=no-num id=normative-references>Normative references</h3>
    <dt id=CSS21>[CSS21]
 
    <dd>Bert Bos; et al. <a
-    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607"><cite>Cascading Style
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
     2011. W3C Recommendation. URL: <a
-    href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
+    href="http://www.w3.org/TR/2011/REC-CSS2-20110607">http://www.w3.org/TR/2011/REC-CSS2-20110607</a>
    </dd>
    <!---->
 
    <dt id=CSS3SYN>[CSS3SYN]
 
-   <dd>L. David Baron. <a
-    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813"><cite>CSS3
-    module: Syntax.</cite></a> 13 August 2003. W3C Working Draft. (Work in
-    progress.) URL: <a
-    href="http://www.w3.org/TR/2003/WD-css3-syntax-20030813">http://www.w3.org/TR/2003/WD-css3-syntax-20030813</a>
+   <dd>Tab Atkins Jr.; Simon Sapin. <a
+    href="http://www.w3.org/TR/2013/WD-css-syntax-3-20130919/"><cite>CSS
+    Syntax Module Level 3.</cite></a> 19 September 2013. W3C Working Draft.
+    (Work in progress.) URL: <a
+    href="http://www.w3.org/TR/2013/WD-css-syntax-3-20130919/">http://www.w3.org/TR/2013/WD-css-syntax-3-20130919/</a>
    </dd>
    <!---->
 

css-device-adapt/Overview.src.html

@@ -116,8 +116,9 @@ <h2>The viewport</h2>
       is a feature of a user agent for continuous media and used to establish
       the initial containing block for continuous media. For paged media, the
       initial containing block is based on the page area. The page area can be
-      set through @page rules. Hence, @viewport applies to continuous media,
-      and @page to paged media, and they will not interact or conflict.</p>
+      set through @page rules. Hence, <code class="css">@viewport</code> applies
+      to continuous media, and @page to paged media, and they will not interact
+      or conflict.</p>
 
     <p>This specification introduces a way of overriding the size of the viewport
       provided by the user agent (UA). Because of this, we need to introduce the
@@ -156,8 +157,9 @@ <h2>The viewport</h2>
       browser? (And what's a desktop browser)". Need to say that a "desktop"
       browser typically have no UA styles, as opposed to the
       <a href="#ua-stylesheet">UA stylesheet</a> outlined for current mobile
-      behaviour, and that no UA styles for @viewport will give "desktop"
-      behaviour per default (actual viewport is initial viewport).</p>
+      behaviour, and that no UA styles for <code class="css">@viewport</code>
+      will give "desktop" behaviour per default (actual viewport is initial
+      viewport).</p>
 
 
     <h2>The <code class="css">@viewport</code> rule</h2>
@@ -1610,25 +1612,38 @@ <h2 id="ua-stylesheet">UA stylesheets</h3>
 
     <p><em>This section is informative</em></p>
 
-    <p>With the term desktop browser below, we mean a browser which has a size of
-      the initial viewport, in CSS pixels, that is at least as large as the
-      smallest viewport or viewing area you would expect a user of a desktop
-      computer to have. In that sense, it could include tablet PC and TV browsers.</p>
+    <p>Traditional user agents, used mostly on desktop and laptop computers, can
+      easily be resized to fit most websites inside the initial viewport without
+      breaking the layout. Using the recommendations below, sites not adding any
+      <code class="css">@viewport</code> rules themselves will continue to look
+      and function like they always have.</p>
 
-    <h3>Desktop UA styles</h2>
+    <h3>Large screen UA styles</h2>
 
-    <p>For a desktop browser, the recommendation is to have no UA styles. That
-      means that it will have all descriptors initially set to
+    <p>For browsers with an initial viewport size large enough to fit common
+      websites without breaking the layout, or which can easily to resized to do
+      so, the recommendation is to have <em>no</em> UA styles. That means that
+      it will have all descriptors initially set to
       &lsquo;<code class="css">auto</code>&rsquo;, and behave as it would have
-      without support for viewport descriptors if there are no viewport descriptors
-      in the user or author styles.</p>
+      without support for viewport descriptors.</p>
+
+    <p>For browsers which support changing orientation, and the portrait mode
+      breaks this the above, it is recommended to set a minimum layout width,
+      equal to that of the width in landscape mode.</p>
+
+    <div class="example">
+      <pre><!--
+        -->@viewport {
+<!--    -->  min-width: 1024px;
+<!--    -->}<!--
+   --></pre>
+    </div>
 
     <h3>Small screen UA styles</h3>
 
-    <p>For smaller screen UAs like smartphone browsers, the UA could typically
-      set the minimum viewport width to something that is at least as large as
-      the narrowest width an author would expect a desktop user would use to
-      view documents.</p>
+    <p>For smaller screen UAs, the UA could set the minimum viewport width to
+      typically used as an initial viewport width of a traditional user agent
+      (as described above).</p>
 
     <div class="example">
       <pre><!--