- From: Rune Lillesveen via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 28 Oct 2011 16:18:39 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-device-adapt
In directory hutz:/tmp/cvs-serv28762
Modified Files:
Overview.html Overview.src.html
Log Message:
Changes:
- Removed FPWD from status.
- Added DOM Interfaces.
- Added semi-colon as separator in meta viewport.
- Created UA stylesheets section.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-device-adapt/Overview.html,v
retrieving revision 1.11
retrieving revision 1.12
diff -u -d -r1.11 -r1.12
--- Overview.html 13 Sep 2011 12:41:34 -0000 1.11
+++ Overview.html 28 Oct 2011 16:18:37 -0000 1.12
@@ -16,20 +16,20 @@
<h1>CSS Device Adaptation</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 September
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 28 October
2011</h2>
<dl>
<dt>This version:
<dd>$date$ (editor's draft)
- <!--<dd><a href="http://www.w3.org/TR/2011/ED-css-device-adapt-20110913/">http://www.w3.org/TR/2011/WD-css-device-adapt-20110913/</a></dd>-->
+ <!--<dd><a href="http://www.w3.org/TR/2011/ED-css-device-adapt-20111028/">http://www.w3.org/TR/2011/WD-css-device-adapt-20111028/</a></dd>-->
<dt>Latest version:
<dd><a
- href="http://www.w3.org/TR/css-device-adapt">http://www.w3.org/TR/css-device-adapt</a>
+ href="http://www.w3.org/TR/css-device-adapt/">http://www.w3.org/TR/css-device-adapt/</a>
<dt>Previous version:
@@ -45,13 +45,13 @@
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2011 <a
- href="http://www.w3.org/"><acronym title="World Wide Web
- Consortium">W3C</acronym></a><sup>®</sup> (<a
- href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
- of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
- title="European Research Consortium for Informatics and
- Mathematics">ERCIM</acronym></a>, <a
- href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
+ href="http://www.w3.org/"><acronym
+ title="World Wide Web Consortium">W3C</acronym></a><sup>®</sup> (<a
+ href="http://www.csail.mit.edu/"><acronym
+ title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
+ href="http://www.ercim.eu/"><acronym
+ title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
+ <a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
@@ -104,9 +104,6 @@
W3C Patent Policy</a>.</p>
<!--end-status-->
- <p>This is the first public Working Draft of the CSS Device Adaptation
- Module.
-
<h2 class="no-num no-toc" id=table-of-contents>Table of Contents</h2>
<!--begin-toc-->
@@ -184,30 +181,40 @@
<li><a href="#cssom"><span class=secno>8. </span>CSSOM</a>
- <li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
+ <li><a href="#dom-interfaces"><span class=secno>9. </span>DOM
+ Interfaces</a>
- <li><a href="#viewport-meta-element"><span class=secno>10. </span>Viewport
- <code class=html>META</code> element</a>
- <ul class=toc>
- <li><a href="#ua-stylesheet"><span class=secno>10.1. </span>UA
- stylesheet</a>
+ <li><a href="#conformance"><span class=secno>10. </span>Conformance</a>
- <li><a href="#meta-properties"><span class=secno>10.2.
+ <li><a href="#viewport-meta"><span class=secno>11. </span>Viewport <code
+ class=html>META</code> element</a>
+ <ul class=toc>
+ <li><a href="#meta-properties"><span class=secno>11.1.
</span>Properties</a>
- <li><a href="#parsing-algorithm"><span class=secno>10.3. </span>Parsing
+ <li><a href="#parsing-algorithm"><span class=secno>11.2. </span>Parsing
algorithm</a>
<li><a href="#translation-into-viewport-properties"><span
- class=secno>10.4. </span>Translation into <code
+ class=secno>11.3. </span>Translation into <code
class=css>@viewport</code> properties</a>
</ul>
- <li><a href="#handling-auto-zoom"><span class=secno>11. </span>Handling
+ <li><a href="#handling-auto-zoom"><span class=secno>12. </span>Handling
‘<code class=css title="auto!!zoom">auto</code>’ for
‘<code class=property title="zoom!!property">zoom</code>’</a>
+ <li><a href="#ua-stylesheets"><span class=secno>13. </span>UA stylesheets
+ </a>
+ <ul class=toc>
+ <li><a href="#desktop-ua-styles"><span class=secno>13.1. </span>Desktop
+ UA styles</a>
+
+ <li><a href="#small-screen-ua-styles"><span class=secno>13.2.
+ </span>Small screen UA styles</a>
+ </ul>
+
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
@@ -1604,7 +1611,70 @@
<p class=issue>Standardize window.devicePixelRatio? Should be done in the
CSSOM View spec perhaps?
- <h2 id=conformance><span class=secno>9. </span>Conformance</h2>
+ <h2 id=dom-interfaces><span class=secno>9. </span>DOM Interfaces</h2>
+
+ <p>The <code class=css>@viewport</code> rule is exposed to the CSSOM
+ through a new CSSRule interface
+
+ <dl>
+ <dt> <b>Interface <i><a id=DOM-CSSRule
+ name=DOM-CSSRule>CSSRule</a></i></b>
+
+ <dd>
+ <p>The following rule type is added to the <code>CSSRule</code>
+ interface. It provides identification for the new viewport rule.</p>
+
+ <dl>
+ <dt> <b>IDL Definition</b>
+
+ <dd>
+ <div class=idl-code>
+ <pre><!--
+ -->interface CSSRule {
+<!-- --> ...
+<!-- --> const unsigned short VIEWPORT_RULE = 15;
+<!-- --> ...
+<!-- -->};<!--
+ --></pre>
+ </div>
+ </dl>
+
+ <dt> <b>Interface <i><a id=DOM-CSSViewportRule
+ name=DOM-CSSViewportRule>CSSViewportRule</a></i></b>
+
+ <dd>
+ <p>The <code>CSSViewportRule</code> interface represents the style rule
+ for an <code class=css>@viewport</code> rules</p>
+
+ <dl>
+ <dt> <b>IDL Definition</b>
+
+ <dd>
+ <div class=idl-code>
+ <pre><!--
+ -->interface CSSViewportRule : CSSRule {
+<!-- --> readonly attribute CSSStyleDeclaration style;
+<!-- -->};<!--
+ --></pre>
+ </div>
+
+ <dt> <b>Attributes</b>
+
+ <dd>
+ <dl>
+ <dt> <code class=attribute-name><a id=DOM-CSSViewportRule-style
+ name=DOM-CSSViewportRule-style>style</a></code> of type
+ <code>CSSStyleDeclaration</code>
+
+ <dd> This attribute represents the viewport properties associated with
+ this <code class=css>@viewport</code> rule.
+ </dl>
+
+ <dt> <b>No Methods</b>
+ </dl>
+ </dl>
+
+ <h2 id=conformance><span class=secno>10. </span>Conformance</h2>
<p>Requirements for a conforming UA:
@@ -1647,7 +1717,7 @@
<p class=issue>Need to say something about the resolution property if it is
kept.
- <h2 id=viewport-meta-element><span class=secno>10. </span>Viewport <code
+ <h2 id=viewport-meta><span class=secno>11. </span>Viewport <code
class=html>META</code> element</h2>
<p><em>This section is not normative.</em>
@@ -1657,10 +1727,10 @@
in the iPhone Safari browser, to the properties of the <code
class=css>@viewport</code> rule described in this specification.
- <h3 id=ua-stylesheet><span class=secno>10.1. </span>UA stylesheet</h3>
-
<p>In order to match the Safari implementation, the following parsing
- algorithm and translation rules rely on the UA stylesheet below.
+ algorithm and translation rules rely on the UA stylesheet below. See the
+ section on <a href="#ua-stylesheets">UA stylesheets</a> for an elaborate
+ description.
<pre><!--
-->@viewport {
@@ -1675,7 +1745,7 @@
of the document inside the window for widths up to 1280px on a 320px wide
device like the iPhone, but only 960px if you have 240px display.
- <h3 id=meta-properties><span class=secno>10.2. </span>Properties</h3>
+ <h3 id=meta-properties><span class=secno>11.1. </span>Properties</h3>
<p>The recognized properties in the viewport <code class=html>META</code>
element are:
@@ -1683,8 +1753,8 @@
<ul>
<li><code class=index id=width1 title="width!!viewport META">width</code>
- <li><code class=index id=height1 title="height!!viewport
- META">height</code>
+ <li><code class=index id=height1
+ title="height!!viewport META">height</code>
<li><code class=index id=initial-scale>initial-scale</code>
@@ -1699,7 +1769,7 @@
class=property>resolution</code></a>’ is at risk.</span>
</ul>
- <h3 id=parsing-algorithm><span class=secno>10.3. </span>Parsing algorithm</h3>
+ <h3 id=parsing-algorithm><span class=secno>11.2. </span>Parsing algorithm</h3>
<p>Below is an algorithm for parsing the <code class=html>content</code>
attribute of the <code class=html>META</code> tag produced from testing
@@ -1709,8 +1779,9 @@
AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293
Safari/6531.22.7"</code>.</span> The pseudo code notation used is based on
the notation used in <a href="#Algorithms"
- rel=biblioentry>[Algorithms]</a>. The white-space class contains the
- following characters (ascii):
+ rel=biblioentry>[Algorithms]</a>.
+
+ <p>The whitespace class contains the following characters (ascii):
<ul>
<li>Horizontal tab (0x09)
@@ -1722,36 +1793,130 @@
<li>Space (0x20)
</ul>
+ <p>The recognized separator between property/value pairs is comma for the
+ Safari implementation. Some implementations have supported both commas and
+ semicolons. Because of that, existing content use semicolons instead of
+ commas. Authors should be using comma in order to ensure content works as
+ expected in all UAs, but implementors may add support for both to ensure
+ interoperability for existing content.
+
+ <p>The separator class contains the following characters (ascii), with
+ comma as the preferred separator and semicolon as optional:
+
+ <ul>
+ <li>Comma (0x2c)
+
+ <li>Semicolon (0x3b)
+ </ul>
+
<pre class=algorithm><!--
- --><span class=method><span class=method-name>Parse-Content</span>(<span class=variable>S</span>)</span>
-<!----><span class=statement><span class=variable>i</span> ← 1</span>
-<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>]</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] in [white-space, ',', '=']</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
-<!----><span class=statement> <span class=keyword>if</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>]</span>
-<!----><span class=statement> <span class=keyword>then</span> <span class=variable>i</span> ← <span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
+ --><span class=method><span
+ class=method-name>Parse-Content</span>(<span
+ class=variable>S</span>)</span>
+<!----><span class=statement><span
+ class=variable>i</span> ← 1</span>
+<!----><span
+ class=statement><span class=keyword>while</span> <span
+ class=variable>i</span> ≤ <span class=op>length</span>[<span
+ class=variable>S</span>]</span>
+<!----><span class=statement> <span
+ class=keyword>do</span> <span class=keyword>while</span> <span
+ class=variable>i</span> ≤ <span class=op>length</span>[<span
+ class=variable>S</span>] and <span class=variable>S</span>[<span
+ class=variable>i</span>] in [whitespace, separator, '=']</span>
+<!----><span
+ class=statement> <span class=keyword>do</span> <span
+ class=variable>i</span> ← <span class=variable>i</span> + 1</span>
+<!----><span
+ class=statement> <span class=keyword>if</span> <span
+ class=variable>i</span> ≤ <span class=op>length</span>[<span
+ class=variable>S</span>]</span>
+<!----><span
+ class=statement> <span class=keyword>then</span> <span
+ class=variable>i</span> ← <span
+ class=method-name>Parse-Property</span>(<span
+ class=variable>S</span>, <span class=variable>i</span>)</span>
<!---->
-<!----><span class=method><span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
-<!----><span class=statement><span class=variable>start</span> ← <span class=variable>i</span></span>
-<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [white-space, ',', '=']</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
-<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
-<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
-<!----><span class=statement><span class=variable>property-name</span> ← <span class=variable>S</span>[<span class=variable>start</span> .. (<span class=variable>i</span> - 1)]</span>
-<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [',', '=']</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
-<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
-<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
-<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] in [white-space, '=']</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
-<!----><span class=statement><span class=keyword>if</span> <span class=variable>i</span> > <span class=op>length</span>[<span class=variable>S</span>] or <span class=variable>S</span>[<span class=variable>i</span>] = ','</span>
-<!----><span class=statement> <span class=keyword>then</span> <span class=keyword>return</span> <span class=variable>i</span></span>
-<!----><span class=statement><span class=variable>start</span> ← <span class=variable>i</span></span>
-<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> ≤ <span class=op>length</span>[<span class=variable>S</span>] and <span class=variable>S</span>[<span class=variable>i</span>] <span class=keyword>not</span> in [white-space, ',', '=']</span>
-<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> ← <span class=variable>i</span> + 1</span>
-<!----><span class=statement><span class=variable>property-value</span> ← <span class=variable>S</span>[<span class=variable>start</span> .. (<span class=variable>i</span> - 1)]</span>
-<!----><span class=statement><span class=method-name>Set-Property</span>(<span class=variable>property-name</span>, <span class=variable>property-value</span>)</span>
-<!----><span class=statement><span class=keyword>return</span> <span class=variable>i</span></span><!--
+<!----><span
+ class=method><span class=method-name>Parse-Property</span>(<span
+ class=variable>S</span>, <span class=variable>i</span>)</span>
+<!----><span
+ class=statement><span class=variable>start</span> ← <span
+ class=variable>i</span></span>
+<!----><span class=statement><span
+ class=keyword>while</span> <span class=variable>i</span> ≤ <span
+ class=op>length</span>[<span class=variable>S</span>] and <span
+ class=variable>S</span>[<span class=variable>i</span>] <span
+ class=keyword>not</span> in [whitespace, separator, '=']</span>
+<!----><span
+ class=statement> <span class=keyword>do</span> <span
+ class=variable>i</span> ← <span class=variable>i</span> + 1</span>
+<!----><span
+ class=statement><span class=keyword>if</span> <span
+ class=variable>i</span> > <span class=op>length</span>[<span
+ class=variable>S</span>] or <span class=variable>S</span>[<span
+ class=variable>i</span>] in [separator]</span>
+<!----><span
+ class=statement> <span class=keyword>then</span> <span
+ class=keyword>return</span> <span class=variable>i</span></span>
+<!----><span
+ class=statement><span class=variable>property-name</span> ← <span
+ class=variable>S</span>[<span class=variable>start</span> .. (<span
+ class=variable>i</span> - 1)]</span>
+<!----><span class=statement><span
+ class=keyword>while</span> <span class=variable>i</span> ≤ <span
+ class=op>length</span>[<span class=variable>S</span>] and <span
+ class=variable>S</span>[<span class=variable>i</span>] <span
+ class=keyword>not</span> in [separator, '=']</span>
+<!----><span
+ class=statement> <span class=keyword>do</span> <span
+ class=variable>i</span> ← <span class=variable>i</span> + 1</span>
+<!----><span
+ class=statement><span class=keyword>if</span> <span
+ class=variable>i</span> > <span class=op>length</span>[<span
+ class=variable>S</span>] or <span class=variable>S</span>[<span
+ class=variable>i</span>] in [separator]</span>
+<!----><span
+ class=statement> <span class=keyword>then</span> <span
+ class=keyword>return</span> <span class=variable>i</span></span>
+<!----><span
+ class=statement><span class=keyword>while</span> <span
+ class=variable>i</span> ≤ <span class=op>length</span>[<span
+ class=variable>S</span>] and <span class=variable>S</span>[<span
+ class=variable>i</span>] in [whitespace, '=']</span>
+<!----><span
+ class=statement> <span class=keyword>do</span> <span
+ class=variable>i</span> ← <span class=variable>i</span> + 1</span>
+<!----><span
+ class=statement><span class=keyword>if</span> <span
+ class=variable>i</span> > <span class=op>length</span>[<span
+ class=variable>S</span>] or <span class=variable>S</span>[<span
+ class=variable>i</span>] in [separator]</span>
+<!----><span
+ class=statement> <span class=keyword>then</span> <span
+ class=keyword>return</span> <span class=variable>i</span></span>
+<!----><span
+ class=statement><span class=variable>start</span> ← <span
+ class=variable>i</span></span>
+<!----><span class=statement><span
+ class=keyword>while</span> <span class=variable>i</span> ≤ <span
+ class=op>length</span>[<span class=variable>S</span>] and <span
+ class=variable>S</span>[<span class=variable>i</span>] <span
+ class=keyword>not</span> in [whitespace, separator, '=']</span>
+<!----><span
+ class=statement> <span class=keyword>do</span> <span
+ class=variable>i</span> ← <span class=variable>i</span> + 1</span>
+<!----><span
+ class=statement><span class=variable>property-value</span> ← <span
+ class=variable>S</span>[<span class=variable>start</span> .. (<span
+ class=variable>i</span> - 1)]</span>
+<!----><span class=statement><span
+ class=method-name>Set-Property</span>(<span
+ class=variable>property-name</span>, <span
+ class=variable>property-value</span>)</span>
+<!----><span
+ class=statement><span class=keyword>return</span> <span
+ class=variable>i</span></span><!--
--></pre>
<p> <span class=method-name>Set-Property</span> matches the <a
@@ -1769,14 +1934,14 @@
with the following strings case-insensitively: <code class=index
id=yes>yes</code>, <code class=index id=no>no</code>, <code class=index
id=device-width0 title="device-width!!viewport META">device-width</code>,
- <code class=index id=device-height0 title="device-height!!viewport
- META">device-height</code>
+ <code class=index id=device-height0
+ title="device-height!!viewport META">device-height</code>
<li>If the string did not match any of the known strings, the value is
unknown.
</ol>
- <h3 id=translation-into-viewport-properties><span class=secno>10.4.
+ <h3 id=translation-into-viewport-properties><span class=secno>11.3.
</span>Translation into <code class=css>@viewport</code> properties</h3>
<p>The Viewport <code class=html>META</code> element is placed in the
@@ -1796,8 +1961,8 @@
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
+ <p>The <code class=index id=width3
+ title="width!!viewport META">width</code> and <code class=index id=height3
title="height!!viewport META">height</code> viewport <code
class=html>META</code> properties are translated into ‘<a
href="#width"><code class=property>width</code></a>’ and ‘<a
@@ -1811,8 +1976,9 @@
<li>Negative number values are dropped
- <li><code class=index id=device-width1 title="device-width!!viewport
- META">device-width</code> and <code class=index id=device-height1
+ <li><code class=index id=device-width1
+ title="device-width!!viewport META">device-width</code> and <code
+ class=index id=device-height1
title="device-height!!viewport META">device-height</code> are used as
keywords
@@ -1866,8 +2032,9 @@
<li><code class=index id=yes0>yes</code> is translated to 1
- <li><code class=index id=device-width2 title="device-width!!viewport
- META">device-width</code> and <code class=index id=device-height2
+ <li><code class=index id=device-width2
+ title="device-width!!viewport META">device-width</code> and <code
+ class=index id=device-height2
title="device-height!!viewport META">device-height</code> are translated
to 10
@@ -1902,9 +2069,10 @@
<li>Numbers ≥ 1, numbers ≤ -1, <code class=index id=device-width3
title="device-width!!viewport META">device-width</code> and <code
- class=index id=device-height3 title="device-height!!viewport
- META">device-height</code> are mapped to ‘<a href="#zoom0"><code
- class=css title="zoom!!value">zoom</code></a>’
+ class=index id=device-height3
+ title="device-height!!viewport META">device-height</code> are mapped to
+ ‘<a href="#zoom0"><code class=css
+ title="zoom!!value">zoom</code></a>’
<li>Numbers in the range <code><-1, 1></code>, and unknown values,
are mapped to ‘<a href="#fixed"><code
@@ -1958,7 +2126,7 @@
<li>Other values are dropped
</ol>
- <h2 id=handling-auto-zoom><span class=secno>11. </span>Handling ‘<a
+ <h2 id=handling-auto-zoom><span class=secno>12. </span>Handling ‘<a
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>’
for ‘<a href="#zoom"><code class=property
title="zoom!!property">zoom</code></a>’</h2>
@@ -1990,6 +2158,47 @@
<p>The actual zoom factor should also be further limited by the [min-zoom,
max-zoom] range.
+ <h2 id=ua-stylesheets><span class=secno>13. </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.
+
+ <h3 id=desktop-ua-styles><span class=secno>13.1. </span>Desktop UA styles</h3>
+
+ <p>For a desktop browser, the recommendation is to have no UA styles. That
+ means that it will have all properties initially set to ‘<code
+ class=css>auto</code>’, and behave as it would have without support
+ for viewport properties if there are no viewport properties in the user or
+ author styles.
+
+ <h3 id=small-screen-ua-styles><span class=secno>13.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.
+
+ <div class=example>
+ <pre><!--
+ -->@viewport {
+<!-- --> min-width: 980px;
+<!-- -->}<!--
+ --></pre>
+ </div>
+
+ <p>It is recommended that limitations in zooming capabilities are not
+ reflected in the UA styles but rather only affect the used values for
+ zoom. The min-zoom/max-zoom UA styles mentioned in the <a
+ href="#viewport-meta">Viewport META section</a> are there to give an
+ accurate description of how the Safari browser behaves, not as part of a
+ recommended UA stylesheet.
+
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
<h2 class=no-num id=references>References</h2>
@@ -2024,11 +2233,11 @@
<dt id=CSS3VAL>[CSS3VAL]
- <dd>Håkon Wium Lie; Chris Lilley. <a
- href="http://www.w3.org/TR/2006/WD-css3-values-20060919"><cite>CSS3
- Values and Units.</cite></a> 19 September 2006. W3C Working Draft. (Work
- in progress.) URL: <a
- href="http://www.w3.org/TR/2006/WD-css3-values-20060919">http://www.w3.org/TR/2006/WD-css3-values-20060919</a>
+ <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
+ href="http://www.w3.org/TR/2011/WD-css3-values-20110906/"><cite>CSS
+ Values and Units Module Level 3.</cite></a> 6 September 2011. W3C Working
+ Draft. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2011/WD-css3-values-20110906/">http://www.w3.org/TR/2011/WD-css3-values-20110906/</a>
</dd>
<!---->
@@ -2260,25 +2469,25 @@
<!--begin-index-->
<ul class=indexlist>
- <li>actual viewport, <a href="#actual-viewport" title="actual
- viewport"><strong>3.</strong></a>
+ <li>actual viewport, <a href="#actual-viewport"
+ title="actual viewport"><strong>3.</strong></a>
<li>auto
<ul>
- <li>length, <a href="#auto" title="auto,
- length"><strong>5.1.</strong></a>
+ <li>length, <a href="#auto"
+ title="auto, length"><strong>5.1.</strong></a>
- <li>max-zoom, <a href="#auto2" title="auto,
- max-zoom"><strong>5.7.</strong></a>
+ <li>max-zoom, <a href="#auto2"
+ title="auto, max-zoom"><strong>5.7.</strong></a>
- <li>min-zoom, <a href="#auto1" title="auto,
- min-zoom"><strong>5.6.</strong></a>
+ <li>min-zoom, <a href="#auto1"
+ title="auto, min-zoom"><strong>5.6.</strong></a>
- <li>orientation, <a href="#auto3" title="auto,
- orientation"><strong>5.9.</strong></a>
+ <li>orientation, <a href="#auto3"
+ title="auto, orientation"><strong>5.9.</strong></a>
- <li>resolution, <a href="#auto4" title="auto,
- resolution"><strong>5.10.</strong></a>
+ <li>resolution, <a href="#auto4"
+ title="auto, resolution"><strong>5.10.</strong></a>
<li>zoom, <a href="#auto0" title="auto, zoom"><strong>5.5.</strong></a>
</ul>
@@ -2290,21 +2499,21 @@
<li>device-height, <a href="#device-height"
title=device-height><strong>5.1.</strong></a>
<ul>
- <li>viewport META, <a href="#device-height0" title="device-height,
- viewport META">10.3.</a>, <a href="#device-height1"
- title="device-height, viewport META">#</a>, <a href="#device-height2"
- title="device-height, viewport META">#</a>, <a href="#device-height3"
- title="device-height, viewport META">#</a>
+ <li>viewport META, <a href="#device-height0"
+ title="device-height, viewport META">11.2.</a>, <a
+ href="#device-height1" title="device-height, viewport META">#</a>, <a
+ href="#device-height2" title="device-height, viewport META">#</a>, <a
+ href="#device-height3" title="device-height, viewport META">#</a>
</ul>
<li>device-width, <a href="#device-width"
title=device-width><strong>5.1.</strong></a>
<ul>
- <li>viewport META, <a href="#device-width0" title="device-width,
- viewport META">10.3.</a>, <a href="#device-width1" title="device-width,
- viewport META">#</a>, <a href="#device-width2" title="device-width,
- viewport META">#</a>, <a href="#device-width3" title="device-width,
- viewport META">#</a>
+ <li>viewport META, <a href="#device-width0"
+ title="device-width, viewport META">11.2.</a>, <a href="#device-width1"
+ title="device-width, viewport META">#</a>, <a href="#device-width2"
+ title="device-width, viewport META">#</a>, <a href="#device-width3"
+ title="device-width, viewport META">#</a>
</ul>
<li>fixed, <a href="#fixed" title=fixed><strong>5.8.</strong></a>
@@ -2315,18 +2524,19 @@
<li>resolved, <a href="#height0" title="height, resolved">6.1.</a>
- <li>viewport META, <a href="#height1" title="height, viewport
- META">10.2.</a>, <a href="#height2" title="height, viewport
- META">#</a>, <a href="#height3" title="height, viewport META">#</a>
+ <li>viewport META, <a href="#height1"
+ title="height, viewport META">11.1.</a>, <a href="#height2"
+ title="height, viewport META">#</a>, <a href="#height3"
+ title="height, viewport META">#</a>
</ul>
<li>high-dpi, <a href="#high-dpi" title=high-dpi>#</a>
- <li>initial-scale, <a href="#initial-scale" title=initial-scale>10.2.</a>,
+ <li>initial-scale, <a href="#initial-scale" title=initial-scale>11.1.</a>,
<a href="#initial-scale0" title=initial-scale>#</a>
- <li>initial viewport, <a href="#initial-viewport" title="initial
- viewport"><strong>3.</strong></a>
+ <li>initial viewport, <a href="#initial-viewport"
+ title="initial viewport"><strong>3.</strong></a>
<li>landscape, <a href="#landscape"
title=landscape><strong>5.9.</strong></a>
@@ -2336,7 +2546,7 @@
<li>max-height, <a href="#max-height"
title=max-height><strong>5.3.</strong></a>
- <li>maximum-scale, <a href="#maximum-scale" title=maximum-scale>10.2.</a>,
+ <li>maximum-scale, <a href="#maximum-scale" title=maximum-scale>11.1.</a>,
<a href="#maximum-scale0" title=maximum-scale>#</a>
<li>max-width, <a href="#max-width"
@@ -2350,7 +2560,7 @@
<li>min-height, <a href="#min-height"
title=min-height><strong>5.3.</strong></a>
- <li>minimum-scale, <a href="#minimum-scale" title=minimum-scale>10.2.</a>,
+ <li>minimum-scale, <a href="#minimum-scale" title=minimum-scale>11.1.</a>,
<a href="#minimum-scale0" title=minimum-scale>#</a>
<li>min-width, <a href="#min-width"
@@ -2359,7 +2569,7 @@
<li>min-zoom, <a href="#min-zoom" title=min-zoom><strong>5.6.</strong></a>
- <li>no, <a href="#no" title=no>10.3.</a>, <a href="#no0" title=no>#</a>,
+ <li>no, <a href="#no" title=no>11.2.</a>, <a href="#no0" title=no>#</a>,
<a href="#no1" title=no>#</a>
<li>orientation, <a href="#orientation"
@@ -2375,11 +2585,11 @@
title="<resolution>"><strong>5.10.</strong></a>
<li>target-densityDpi, <a href="#target-densitydpi"
- title=target-densityDpi>10.2.</a>, <a href="#target-densitydpi0"
+ title=target-densityDpi>11.1.</a>, <a href="#target-densitydpi0"
title=target-densityDpi>#</a>, <a href="#target-densitydpi1"
title=target-densityDpi>#</a>
- <li>user-scalable, <a href="#user-scalable" title=user-scalable>10.2.</a>,
+ <li>user-scalable, <a href="#user-scalable" title=user-scalable>11.1.</a>,
<a href="#user-scalable0" title=user-scalable>#</a>, <a
href="#user-scalable1" title=user-scalable>#</a>
@@ -2395,21 +2605,22 @@
<li>resolved, <a href="#width0" title="width, resolved">6.1.</a>
- <li>viewport META, <a href="#width1" title="width, viewport
- META">10.2.</a>, <a href="#width2" title="width, viewport META">#</a>,
- <a href="#width3" title="width, viewport META">#</a>
+ <li>viewport META, <a href="#width1"
+ title="width, viewport META">11.1.</a>, <a href="#width2"
+ title="width, viewport META">#</a>, <a href="#width3"
+ title="width, viewport META">#</a>
</ul>
- <li>yes, <a href="#yes" title=yes>10.3.</a>, <a href="#yes0"
+ <li>yes, <a href="#yes" title=yes>11.2.</a>, <a href="#yes0"
title=yes>#</a>, <a href="#yes1" title=yes>#</a>
<li>zoom
<ul>
- <li>property, <a href="#zoom" title="zoom,
- property"><strong>5.5.</strong></a>
+ <li>property, <a href="#zoom"
+ title="zoom, property"><strong>5.5.</strong></a>
- <li>value, <a href="#zoom0" title="zoom,
- value"><strong>5.8.</strong></a>
+ <li>value, <a href="#zoom0"
+ title="zoom, value"><strong>5.8.</strong></a>
</ul>
</ul>
<!--end-index-->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-device-adapt/Overview.src.html,v
retrieving revision 1.13
retrieving revision 1.14
diff -u -d -r1.13 -r1.14
--- Overview.src.html 14 Sep 2011 17:27:16 -0000 1.13
+++ Overview.src.html 28 Oct 2011 16:18:37 -0000 1.14
@@ -44,8 +44,6 @@
<h2 class="no-num no-toc">Status of this document</h2>
<!--status-->
- <p>This is the first public Working Draft of the CSS Device Adaptation Module.</p>
-
<h2 class="no-num no-toc">Table of Contents</h2>
<!--toc-->
@@ -1350,6 +1348,78 @@
<p class="issue">Standardize window.devicePixelRatio? Should be done in the
CSSOM View spec perhaps?</p>
+
+ <h2>DOM Interfaces</h2>
+
+ <p>The <code class="css">@viewport</code> rule is exposed to the CSSOM
+ through a new CSSRule interface</p>
+
+ <dl>
+ <dt>
+ <b>Interface <i><a id="DOM-CSSRule" name="DOM-CSSRule">CSSRule</a></i></b>
+ </dt>
+ <dd>
+ <p>The following rule type is added to the <code>CSSRule</code>
+ interface. It provides identification for the new viewport rule.</p>
+ <dl>
+ <dt>
+ <b>IDL Definition</b>
+ </dt>
+ <dd>
+ <div class="idl-code">
+ <pre><!--
+ -->interface CSSRule {
+<!-- --> ...
+<!-- --> const unsigned short VIEWPORT_RULE = 15;
+<!-- --> ...
+<!-- -->};<!--
+ --></pre>
+ </div>
+ </dd>
+ </dl>
+ </dd>
+
+ <dt>
+ <b>Interface <i><a id="DOM-CSSViewportRule" name="DOM-CSSViewportRule">CSSViewportRule</a></i></b>
+ </dt>
+ <dd>
+ <p>The <code>CSSViewportRule</code> interface represents the style rule
+ for an <code class="css">@viewport</code> rules</p>
+ <dl>
+ <dt>
+ <b>IDL Definition</b>
+ </dt>
+ <dd>
+ <div class="idl-code">
+ <pre><!--
+ -->interface CSSViewportRule : CSSRule {
+<!-- --> readonly attribute CSSStyleDeclaration style;
+<!-- -->};<!--
+ --></pre>
+ </div>
+ </dd>
+ <dt>
+ <b>Attributes</b>
+ </dt>
+ <dd>
+ <dl>
+ <dt>
+ <code class="attribute-name"><a id="DOM-CSSViewportRule-style" name="DOM-CSSViewportRule-style">style</a></code> of type <code>CSSStyleDeclaration</code>
+ </dt>
+ <dd>
+ This attribute represents the viewport properties associated
+ with this <code class="css">@viewport</code> rule.
+ </dd>
+ </dl>
+ </dd>
+ <dt>
+ <b>No Methods</b>
+ </dt>
+ </dl>
+ </dd>
+ </dl>
+
+
<h2>Conformance</h2>
<p>Requirements for a conforming UA:</p>
@@ -1380,7 +1450,7 @@
<p class="issue">Need to say something about the resolution property if it
is kept.</p>
- <h2>Viewport <code class="html">META</code> element</h2>
+ <h2 id="viewport-meta">Viewport <code class="html">META</code> element</h2>
<p><em>This section is not normative.</em></p>
@@ -1390,10 +1460,10 @@
<code class="css">@viewport</code> rule described in this
specification.</p>
- <h3 id="ua-stylesheet">UA stylesheet</h3>
-
<p>In order to match the Safari implementation, the following parsing
- algorithm and translation rules rely on the UA stylesheet below.</p>
+ algorithm and translation rules rely on the UA stylesheet below. See the
+ section on <a href="#ua-stylesheets">UA stylesheets</a> for an elaborate
+ description.</p>
<pre><!--
-->@viewport {
@@ -1434,41 +1504,53 @@
iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko)
Version/4.0.5 Mobile/8A293 Safari/6531.22.7"</code>.</span> The pseudo
code notation used is based on the notation used in <a href="#Algorithms"
- rel="biblioentry">[Algorithms]</a>. The white-space
- class contains the following characters (ascii):</p>
+ rel="biblioentry">[Algorithms]</a>.</p>
+ <p>The whitespace class contains the following characters (ascii):</p>
<ul>
<li>Horizontal tab (0x09)</li>
<li>Line feed (0x0a)</li>
<li>Carriage return (0x0d)</li>
<li>Space (0x20)</li>
</ul>
+ <p>The recognized separator between property/value pairs is comma for the
+ Safari implementation. Some implementations have supported both commas
+ and semicolons. Because of that, existing content use semicolons instead
+ of commas. Authors should be using comma in order to ensure content works
+ as expected in all UAs, but implementors may add support for both to ensure
+ interoperability for existing content.</p>
+ <p>The separator class contains the following characters (ascii), with comma
+ as the preferred separator and semicolon as optional:</p>
+ <ul>
+ <li>Comma (0x2c)</li>
+ <li>Semicolon (0x3b)</li>
+ </ul>
<pre class="algorithm"><!--
--><span class="method"><span class="method-name">Parse-Content</span>(<span class="variable">S</span>)</span>
<!----><span class="statement"><span class="variable">i</span> ← 1</span>
<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>]</span>
-<!----><span class="statement"> <span class="keyword">do</span> <span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] in [white-space, ',', '=']</span>
+<!----><span class="statement"> <span class="keyword">do</span> <span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] in [whitespace, separator, '=']</span>
<!----><span class="statement"> <span class="keyword">do</span> <span class="variable">i</span> ← <span class="variable">i</span> + 1</span>
<!----><span class="statement"> <span class="keyword">if</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>]</span>
<!----><span class="statement"> <span class="keyword">then</span> <span class="variable">i</span> ← <span class="method-name">Parse-Property</span>(<span class="variable">S</span>, <span class="variable">i</span>)</span>
<!---->
<!----><span class="method"><span class="method-name">Parse-Property</span>(<span class="variable">S</span>, <span class="variable">i</span>)</span>
<!----><span class="statement"><span class="variable">start</span> ← <span class="variable">i</span></span>
-<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [white-space, ',', '=']</span>
+<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [whitespace, separator, '=']</span>
<!----><span class="statement"> <span class="keyword">do</span> <span class="variable">i</span> ← <span class="variable">i</span> + 1</span>
-<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] = ','</span>
+<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] in [separator]</span>
<!----><span class="statement"> <span class="keyword">then</span> <span class="keyword">return</span> <span class="variable">i</span></span>
<!----><span class="statement"><span class="variable">property-name</span> ← <span class="variable">S</span>[<span class="variable">start</span> .. (<span class="variable">i</span> - 1)]</span>
-<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [',', '=']</span>
+<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [separator, '=']</span>
<!----><span class="statement"> <span class="keyword">do</span> <span class="variable">i</span> ← <span class="variable">i</span> + 1</span>
-<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] = ','</span>
+<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] in [separator]</span>
<!----><span class="statement"> <span class="keyword">then</span> <span class="keyword">return</span> <span class="variable">i</span></span>
-<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] in [white-space, '=']</span>
+<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] in [whitespace, '=']</span>
<!----><span class="statement"> <span class="keyword">do</span> <span class="variable">i</span> ← <span class="variable">i</span> + 1</span>
-<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] = ','</span>
+<!----><span class="statement"><span class="keyword">if</span> <span class="variable">i</span> > <span class="op">length</span>[<span class="variable">S</span>] or <span class="variable">S</span>[<span class="variable">i</span>] in [separator]</span>
<!----><span class="statement"> <span class="keyword">then</span> <span class="keyword">return</span> <span class="variable">i</span></span>
<!----><span class="statement"><span class="variable">start</span> ← <span class="variable">i</span></span>
-<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [white-space, ',', '=']</span>
+<!----><span class="statement"><span class="keyword">while</span> <span class="variable">i</span> ≤ <span class="op">length</span>[<span class="variable">S</span>] and <span class="variable">S</span>[<span class="variable">i</span>] <span class="keyword">not</span> in [whitespace, separator, '=']</span>
<!----><span class="statement"> <span class="keyword">do</span> <span class="variable">i</span> ← <span class="variable">i</span> + 1</span>
<!----><span class="statement"><span class="variable">property-value</span> ← <span class="variable">S</span>[<span class="variable">start</span> .. (<span class="variable">i</span> - 1)]</span>
<!----><span class="statement"><span class="method-name">Set-Property</span>(<span class="variable">property-name</span>, <span class="variable">property-value</span>)</span>
@@ -1673,6 +1755,46 @@
max-zoom] range.</p>
+ <h2 id="ua-stylesheets">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>
+
+ <h3>Desktop UA styles</h3>
+
+ <p>For a desktop browser, the recommendation is to have no UA styles. That
+ means that it will have all properties initially set to
+ ‘<code class="css">auto</code>’, and behave as it would have
+ without support for viewport properties if there are no viewport properties
+ in the user or author styles.</p>
+
+ <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>
+
+ <div class="example">
+ <pre><!--
+ -->@viewport {
+<!-- --> min-width: 980px;
+<!-- -->}<!--
+ --></pre>
+ </div>
+
+ <p>It is recommended that limitations in zooming capabilities are not
+ reflected in the UA styles but rather only affect the used values for
+ zoom. The min-zoom/max-zoom UA styles mentioned in the
+ <a href="#viewport-meta">Viewport META section</a> are there to give an
+ accurate description of how the Safari browser behaves, not as part of a
+ recommended UA stylesheet.</p>
+
+
<h2 class="no-num">Acknowledgments</h2>
<h2 class="no-num">References</h2>
Received on Friday, 28 October 2011 16:18:44 UTC