- From: Rune Lillesveen via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 10 May 2011 08:15:31 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css-device-adapt
In directory hutz:/tmp/cvs-serv12248
Modified Files:
Overview.html Overview.src.html
Log Message:
Drafted resolution property (requiested as target-densityDpi).
Currently marked at-risk.
Added known issues to the document.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css-device-adapt/Overview.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Overview.html 3 May 2011 13:01:36 -0000 1.3
+++ Overview.html 10 May 2011 08:15:29 -0000 1.4
@@ -17,7 +17,7 @@
<h1>CSS Device Adaptation</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 May 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 May 2011</h2>
<dl>
<dt>This version:
@@ -131,6 +131,10 @@
<li><a href="#the-lsquoorientationrsquo-property"><span class=secno>5.9.
</span>The ‘<code class=property>orientation</code>’
property</a>
+
+ <li><a href="#the-lsquoresolutionrsquo-property"><span class=secno>5.10.
+ </span>The ‘<code class=property>resolution</code>’
+ property</a>
</ul>
<li><a href="#constraining-viewport-property-values"><span class=secno>6.
@@ -146,26 +150,28 @@
<li><a href="#media-queries"><span class=secno>7. </span>Media Queries</a>
- <li><a href="#conformance"><span class=secno>8. </span>Conformance</a>
+ <li><a href="#cssom"><span class=secno>8. </span>CSSOM</a>
- <li><a href="#viewport-meta-element"><span class=secno>9. </span>Viewport
+ <li><a href="#conformance"><span class=secno>9. </span>Conformance</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>9.1. </span>UA
+ <li><a href="#ua-stylesheet"><span class=secno>10.1. </span>UA
stylesheet</a>
- <li><a href="#meta-properties"><span class=secno>9.2.
+ <li><a href="#meta-properties"><span class=secno>10.2.
</span>Properties</a>
- <li><a href="#parsing-algorithm"><span class=secno>9.3. </span>Parsing
+ <li><a href="#parsing-algorithm"><span class=secno>10.3. </span>Parsing
algorithm</a>
<li><a href="#translation-into-viewport-properties"><span
- class=secno>9.4. </span>Translation into <code
+ class=secno>10.4. </span>Translation into <code
class=css>@viewport</code> properties</a>
</ul>
- <li><a href="#handling-auto-zoom"><span class=secno>10. </span>Handling
+ <li><a href="#handling-auto-zoom"><span class=secno>11. </span>Handling
‘<code class=css title="auto!!zoom">auto</code>’ for
‘<code class=property title="zoom!!property">zoom</code>’</a>
@@ -289,6 +295,9 @@
preceding rules. The declarations allow !important which will affect
cascading of properties accordingly.
+ <p class=issue>Should the @viewport rule apply to top-level documents only?
+ If not, we need to say something about different zoom factors in frames.
+
<div class=example>
<p>This example sets the viewport to fit the width of the device. Note
that it is enough to set the width as the height will be resolved from
@@ -780,9 +789,14 @@
percentage as specified.
</table>
- <p>Specifies the initial zoom factor for the window or viewing area.
+ <p>Specifies the initial zoom factor for the window or viewing area. This
+ is a magnifying glass type of zoom. Interactively changing the zoom factor
+ from the initial zoom factor does not affect the size of the initial or
+ the actual viewport.
- <p>Values have the following meanings:
+ <p>Values have the following meanings: <span class=issue>Should both
+ numbers and percentages be
+ allowed?<!-- http://lists.w3.org/Archives/Public/www-style/2010Oct/0321.html --></span>
<dl>
<dt>‘<code class=css><dfn id=auto0
@@ -1060,7 +1074,7 @@
<tr>
<td><em>Initial:</em>
- <td><a href="#auto3" title=auto-orientation>auto</a>
+ <td><a href="#auto3" title="auto!!orientation">auto</a>
<tr>
<td><em>Applies to:</em>
@@ -1086,7 +1100,7 @@
<td><em>Computed value:</em>
<td>‘<a href="#auto3"><code class=css
- title=auto-orientation>auto</code></a>’, ‘<a
+ title="auto!!orientation">auto</code></a>’, ‘<a
href="#portrait"><code class=css>portrait</code></a>’, or
‘<a href="#landscape"><code class=css>landscape</code></a>’
as specified.
@@ -1101,7 +1115,7 @@
<dl>
<dt>‘<code class=css><dfn id=auto3
- title=auto-orientation>auto</dfn></code>’
+ title="auto!!orientation">auto</dfn></code>’
<dd>The UA automatically chooses the orientation based on the device's
normal mode of operation. The UA may choose to change the orientation of
@@ -1117,6 +1131,106 @@
<dd>The document should be locked to landscape presentation.
</dl>
+ <h3 id=the-lsquoresolutionrsquo-property><span class=secno>5.10. </span>The
+ ‘<a href="#resolution"><code
+ class=property>resolution</code></a>’ property</h3>
+
+ <p class=issue>This property is at risk.</p>
+ <!-- http://lists.w3.org/Archives/Public/www-style/2010Aug/0131.html -->
+
+ <table class=propdef>
+ <tbody>
+ <tr>
+ <td><em>Name:</em>
+
+ <td><dfn id=resolution>resolution</dfn>
+
+ <tr>
+ <td><em>Value:</em>
+
+ <td>auto | device | <resolution>
+
+ <tr>
+ <td><em>Initial:</em>
+
+ <td><a href="#auto4" title="auto!!resolution">auto</a>
+
+ <tr>
+ <td><em>Applies to:</em>
+
+ <td>N/A
+
+ <tr>
+ <td><em>Inherited:</em>
+
+ <td>N/A
+
+ <tr>
+ <td><em>Percentages:</em>
+
+ <td>N/A
+
+ <tr>
+ <td><em>Media:</em>
+
+ <td>visual, continuous
+
+ <tr>
+ <td><em>Computed value:</em>
+
+ <td>‘<a href="#auto4"><code class=css
+ title="auto!!resolution">auto</code></a>’, ‘<a
+ href="#device"><code class=css>device</code></a>’, or a
+ resolution value as specified.
+ </table>
+
+ <p>The UA relates the CSS pixel to the <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#x40">reference pixel</a> or
+ the physical <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#length-units">length
+ units</a> as described in CSS 2.1 <a href="#CSS21"
+ rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. The resolution property can
+ be used to override the CSS pixel size chosen by the UA by setting a CSS
+ pixel resolution. In CSS, absolute length units are fixed in relation to
+ each other, hence, changing the CSS pixel resolution will for instance
+ change the physical length of a CSS cm.
+
+ <p>The relationship between a device pixel and a CSS pixel will depend on
+ the device resolution. Setting <code>resolution: 120dpi</code> on a 240dpi
+ device will give a 2:1 ratio between device and CSS pixels, while on a
+ 120dpi device, the ratio will be 1:1. Likewise, the ‘<a
+ href="#device"><code class=css>device</code></a>’ value will always
+ keep a 1:1 ratio, but will give different CSS pixel resolution depending
+ on device resolution.
+
+ <p>Note that setting this property will affect the used lengths for
+ ‘<a href="#device-width"><code
+ class=css>device-width</code></a>’, ‘<a
+ href="#device-height"><code class=css>device-height</code></a>’, and
+ the size of the <a href="#initial-viewport">initial viewport</a>.
+
+ <p>The <dfn id=ltresolutiongt><resolution></dfn> value is a positive
+ <number> immediately followed by a unit identifier (‘<code
+ class=css>dpi</code>’ or ‘<code class=css>dpcm</code>’).
+
+ <p>Values have the following meanings:
+
+ <dl>
+ <dt>‘<code class=css><dfn id=auto4
+ title="auto!!resolution">auto</dfn></code>’
+
+ <dd>Use the UAs CSS pixel resolution.
+
+ <dt>‘<code class=css><dfn id=device>device</dfn></code>’
+
+ <dd>Use device resolution as the CSS pixel resolution. That is, have a 1-1
+ relationship between a CSS and a device pixel.
+
+ <dt><a href="#ltresolutiongt"><var><resolution></var></a>
+
+ <dd>Set the CSS pixel resolution to a fixed dpi or dpcm value.
+ </dl>
+
<h2 id=constraining-viewport-property-values><span class=secno>6.
</span>Constraining viewport property values</h2>
@@ -1441,7 +1555,24 @@
--></pre>
</div>
- <h2 id=conformance><span class=secno>8. </span>Conformance</h2>
+ <p class=issue>There are prefixed implementations of a media feature for
+ the device:css pixel ratio (-webkit-device-pixel-ratio /
+ -o-device-pixel-ratio). Should be standardized here or in a new level of
+ Media Queries?
+
+ <h2 id=cssom><span class=secno>8. </span>CSSOM</h2>
+
+ <p class=issue>Properties in the CSSOM and CSSOM View specifications refer
+ to the <span>viewport</span> and the <span>initial containing
+ block</span>. If any of those properties should refer to the <a
+ href="#initial-viewport">initial viewport</a> and not the <a
+ href="#actual-viewport">actual viewport</a>, those exceptions need to be
+ adressed.
+
+ <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>
<p>Requirements for a conforming UA:
@@ -1481,7 +1612,10 @@
properties is optional.
</ul>
- <h2 id=viewport-meta-element><span class=secno>9. </span>Viewport <code
+ <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
class=html>META</code> element</h2>
<p><em>This section is not normative.</em>
@@ -1491,7 +1625,7 @@
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>9.1. </span>UA stylesheet</h3>
+ <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.
@@ -1509,7 +1643,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>9.2. </span>Properties</h3>
+ <h3 id=meta-properties><span class=secno>10.2. </span>Properties</h3>
<p>The recognized properties in the viewport <code class=html>META</code>
element are:
@@ -1527,9 +1661,13 @@
<li><code class=index id=maximum-scale>maximum-scale</code>
<li><code class=index id=user-scalable>user-scalable</code>
+
+ <li><code class=index id=target-densitydpi>target-densityDpi</code><span
+ class=issue>At risk since ‘<a href="#resolution"><code
+ class=property>resolution</code></a>’ is at risk.</span>
</ul>
- <h3 id=parsing-algorithm><span class=secno>9.3. </span>Parsing algorithm</h3>
+ <h3 id=parsing-algorithm><span class=secno>10.3. </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
@@ -1606,7 +1744,7 @@
unknown.
</ol>
- <h3 id=translation-into-viewport-properties><span class=secno>9.4.
+ <h3 id=translation-into-viewport-properties><span class=secno>10.4.
</span>Translation into <code class=css>@viewport</code> properties</h3>
<p>The Viewport <code class=html>META</code> element is placed in the
@@ -1757,7 +1895,37 @@
--></pre>
</div>
- <h2 id=handling-auto-zoom><span class=secno>10. </span>Handling ‘<a
+ <h4 class="no-num no-toc" id=the-target-densitydpi-property>The <code
+ class=index id=target-densitydpi0>target-densityDpi</code> property</h4>
+
+ <p class=issue>At risk since ‘<a href="#resolution"><code
+ class=property>resolution</code></a>’ is at risk.
+
+ <p>This property differ from the others since it is from the WebKit
+ implementation used in the Android browser and not supported in the Safari
+
+ <p>The <code class=index id=target-densitydpi1>target-densityDpi</code>
+ property is translated into ‘<a href="#resolution"><code
+ class=property>resolution</code></a>’ with the following value
+ translations.
+
+ <ol>
+ <li>Number values in the range <code>[70, 400]</code> are translated to
+ ‘<code class=css>dpi</code>’ values.
+
+ <li><code class=index id=device-dpi>device-dpi</code> translates to
+ ‘<a href="#device"><code class=css>device</code></a>’
+
+ <li><code class=index id=low-dpi>low-dpi</code> translates to 120dpi
+
+ <li><code class=index id=medium-dpi>medium-dpi</code> translates to 160dpi
+
+ <li><code class=index id=high-dpi>high-dpi</code> translates to 240dpi
+
+ <li>Other values are dropped
+ </ol>
+
+ <h2 id=handling-auto-zoom><span class=secno>11. </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>
@@ -1768,7 +1936,7 @@
‘<a href="#zoom"><code class=property
title="zoom!!property">zoom</code></a>’ property when the used value
is ‘<a href="#auto0"><code class=css
- title="auto!!zoom">auto</code></a>.
+ title="auto!!zoom">auto</code></a>’.
<p>Given an <a href="#initial-viewport">initial viewport</a> with size
<code>(initial-width, initial-height)</code>, and a finite region within
@@ -1994,6 +2162,21 @@
<td>visual, continuous
<tr valign=baseline>
+ <td><a class=property href="#resolution">resolution</a>
+
+ <td>auto | device | <resolution>
+
+ <td>auto
+
+ <td>N/A
+
+ <td>N/A
+
+ <td>N/A
+
+ <td>visual, continuous
+
+ <tr valign=baseline>
<td><a class=property href="#user-zoom">user-zoom</a>
<td>zoom | fixed
@@ -2058,17 +2241,24 @@
<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>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>
- <li>auto-orientation, <a href="#auto3"
- title=auto-orientation><strong>5.9.</strong></a>
+ <li>device, <a href="#device" title=device><strong>5.10.</strong></a>
+
+ <li>device-dpi, <a href="#device-dpi" title=device-dpi>#</a>
<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">9.3.</a>, <a href="#device-height1"
+ 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>
@@ -2078,7 +2268,7 @@
title=device-width><strong>5.1.</strong></a>
<ul>
<li>viewport META, <a href="#device-width0" title="device-width,
- viewport META">9.3.</a>, <a href="#device-width1" 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>
@@ -2093,11 +2283,13 @@
<li>resolved, <a href="#height0" title="height, resolved">6.1.</a>
<li>viewport META, <a href="#height1" title="height, viewport
- META">9.2.</a>, <a href="#height2" title="height, viewport META">#</a>,
- <a href="#height3" title="height, viewport META">#</a>
+ META">10.2.</a>, <a href="#height2" title="height, viewport
+ META">#</a>, <a href="#height3" title="height, viewport META">#</a>
</ul>
- <li>initial-scale, <a href="#initial-scale" title=initial-scale>9.2.</a>,
+ <li>high-dpi, <a href="#high-dpi" title=high-dpi>#</a>
+
+ <li>initial-scale, <a href="#initial-scale" title=initial-scale>10.2.</a>,
<a href="#initial-scale0" title=initial-scale>#</a>
<li>initial viewport, <a href="#initial-viewport" title="initial
@@ -2106,10 +2298,12 @@
<li>landscape, <a href="#landscape"
title=landscape><strong>5.9.</strong></a>
+ <li>low-dpi, <a href="#low-dpi" title=low-dpi>#</a>
+
<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>9.2.</a>,
+ <li>maximum-scale, <a href="#maximum-scale" title=maximum-scale>10.2.</a>,
<a href="#maximum-scale0" title=maximum-scale>#</a>
<li>max-width, <a href="#max-width"
@@ -2118,10 +2312,12 @@
<li>max-zoom, <a href="#max-zoom" title=max-zoom><strong>5.7.</strong></a>
+ <li>medium-dpi, <a href="#medium-dpi" title=medium-dpi>#</a>
+
<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>9.2.</a>,
+ <li>minimum-scale, <a href="#minimum-scale" title=minimum-scale>10.2.</a>,
<a href="#minimum-scale0" title=minimum-scale>#</a>
<li>min-width, <a href="#min-width"
@@ -2130,8 +2326,8 @@
<li>min-zoom, <a href="#min-zoom" title=min-zoom><strong>5.6.</strong></a>
- <li>no, <a href="#no" title=no>9.3.</a>, <a href="#no0" title=no>#</a>, <a
- href="#no1" title=no>#</a>
+ <li>no, <a href="#no" title=no>10.3.</a>, <a href="#no0" title=no>#</a>,
+ <a href="#no1" title=no>#</a>
<li>orientation, <a href="#orientation"
title=orientation><strong>5.9.</strong></a>
@@ -2139,7 +2335,18 @@
<li>portrait, <a href="#portrait" title=portrait><strong>5.9.</strong></a>
- <li>user-scalable, <a href="#user-scalable" title=user-scalable>9.2.</a>,
+ <li>resolution, <a href="#resolution"
+ title=resolution><strong>5.10.</strong></a>
+
+ <li><resolution>, <a href="#ltresolutiongt"
+ 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>#</a>, <a href="#target-densitydpi1"
+ title=target-densityDpi>#</a>
+
+ <li>user-scalable, <a href="#user-scalable" title=user-scalable>10.2.</a>,
<a href="#user-scalable0" title=user-scalable>#</a>, <a
href="#user-scalable1" title=user-scalable>#</a>
@@ -2156,11 +2363,11 @@
<li>resolved, <a href="#width0" title="width, resolved">6.1.</a>
<li>viewport META, <a href="#width1" title="width, viewport
- META">9.2.</a>, <a href="#width2" title="width, viewport META">#</a>,
+ META">10.2.</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>9.3.</a>, <a href="#yes0"
+ <li>yes, <a href="#yes" title=yes>10.3.</a>, <a href="#yes0"
title=yes>#</a>, <a href="#yes1" title=yes>#</a>
<li>zoom
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css-device-adapt/Overview.src.html,v
retrieving revision 1.3
retrieving revision 1.4
diff -u -d -r1.3 -r1.4
--- Overview.src.html 3 May 2011 13:01:36 -0000 1.3
+++ Overview.src.html 10 May 2011 08:15:29 -0000 1.4
@@ -49,7 +49,7 @@
<p><em>This section is not normative.</em></p>
- <p>CSS 2.1 [[!CSS21]]</a> specifies an
+ <p>CSS 2.1 [[!CSS21]] specifies an
<a href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
initial containing block</a> for continuous media that has the dimensions
of the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">
@@ -140,6 +140,9 @@
cascading of properties accordingly.
</p>
+ <p class="issue">Should the @viewport rule apply to top-level documents only?
+ If not, we need to say something about different zoom factors in frames.</p>
+
<div class="example">
<p>This example sets the viewport to fit the width of the device. Note
that it is enough to set the width as the height will be resolved from
@@ -609,9 +612,12 @@
</tbody>
</table>
- <p>Specifies the initial zoom factor for the window or viewing area.</p>
+ <p>Specifies the initial zoom factor for the window or viewing area. This is
+ a magnifying glass type of zoom. Interactively changing the zoom factor
+ from the initial zoom factor does not affect the size of the initial or
+ the actual viewport.</p>
- <p>Values have the following meanings:</p>
+ <p>Values have the following meanings: <span class="issue">Should both numbers and percentages be allowed?<!-- http://lists.w3.org/Archives/Public/www-style/2010Oct/0321.html --></span></p>
<dl>
<dt>‘<code class="css"><dfn title="auto!!zoom">auto</dfn></code>’</dt>
@@ -624,16 +630,16 @@
<dt><var><number></var></dt>
<dd>
- <p>A positive number used as a zoom factor. A factor of 1.0 means
- that no zooming is done. Values larger than 1.0 gives a zoomed-in
- effect and values smaller than 1.0 a zoomed-out effect.</p>
+ <p>A positive number used as a zoom factor. A factor of 1.0 means
+ that no zooming is done. Values larger than 1.0 gives a zoomed-in
+ effect and values smaller than 1.0 a zoomed-out effect.</p>
</dd>
<dt><var><percentage></var></dt>
<dd>
- <p>A positive percentage value used as a zoom factor. A factor of
- 100% means that no zooming is done. Values larger than 100% gives a
- zoomed-in effect and values smaller than 100% a zoomed-out effect.</p>
+ <p>A positive percentage value used as a zoom factor. A factor of
+ 100% means that no zooming is done. Values larger than 100% gives a
+ zoomed-in effect and values smaller than 100% a zoomed-out effect.</p>
</dd>
</dl>
@@ -870,7 +876,7 @@
<tr>
<td><em>Initial:</em></td>
- <td><span title="auto-orientation">auto</span></td>
+ <td><span title="auto!!orientation">auto</span></td>
</tr>
<tr>
@@ -895,7 +901,7 @@
<tr>
<td><em>Computed value:</em></td>
- <td>‘<code class="css" title="auto-orientation">auto</code>’,
+ <td>‘<code class="css" title="auto!!orientation">auto</code>’,
‘<code class="css">portrait</code>’, or
‘<code class="css">landscape</code>’ as specified.</td>
</tr>
@@ -910,7 +916,7 @@
<p>Values have the following meanings:</p>
<dl>
- <dt>‘<code class="css"><dfn title="auto-orientation">auto</dfn></code>’</dt>
+ <dt>‘<code class="css"><dfn title="auto!!orientation">auto</dfn></code>’</dt>
<dd>The UA automatically chooses the orientation based on the device's
normal mode of operation. The UA may choose to change the orientation
of the presentation when the device is tilted.</dd>
@@ -923,6 +929,99 @@
</dl>
+ <h3>The ‘<code class="property">resolution</code>’ property</h3>
+
+ <p class="issue">This property is at risk.</p>
+ <!-- http://lists.w3.org/Archives/Public/www-style/2010Aug/0131.html -->
+
+ <table class="propdef">
+ <tbody>
+ <tr>
+ <td><em>Name:</em></td>
+ <td><dfn>resolution</dfn></td>
+ </tr>
+
+ <tr>
+ <td><em>Value:</em></td>
+ <td>auto | device | <resolution> </td>
+ </tr>
+
+ <tr>
+ <td><em>Initial:</em></td>
+ <td><span title="auto!!resolution">auto</span></td>
+ </tr>
+
+ <tr>
+ <td><em>Applies to:</em></td>
+ <td>N/A</td>
+ </tr>
+
+ <tr>
+ <td><em>Inherited:</em></td>
+ <td>N/A</td>
+ </tr>
+
+ <tr>
+ <td><em>Percentages:</em></td>
+ <td>N/A</td>
+ </tr>
+
+ <tr>
+ <td><em>Media:</em></td>
+ <td>visual, continuous</td>
+ </tr>
+
+ <tr>
+ <td><em>Computed value:</em></td>
+ <td>‘<code class="css" title="auto!!resolution">auto</code>’,
+ ‘<code class="css">device</code>’,
+ or a resolution value as specified.</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <p>The UA relates the CSS pixel to the
+ <a href="http://www.w3.org/TR/CSS21/syndata.html#x40">reference pixel</a>
+ or the physical
+ <a href="http://www.w3.org/TR/CSS21/syndata.html#length-units">length units</a>
+ as described in CSS 2.1 [[!CSS21]]. The resolution property can be used to
+ override the CSS pixel size chosen by the UA by setting a CSS pixel
+ resolution. In CSS, absolute length units are fixed in relation to each
+ other, hence, changing the CSS pixel resolution will for instance change
+ the physical length of a CSS cm.</p>
+
+ <p>The relationship between a device pixel and a CSS pixel will depend on
+ the device resolution. Setting <code>resolution: 120dpi</code> on a 240dpi
+ device will give a 2:1 ratio between device and CSS pixels, while on a
+ 120dpi device, the ratio will be 1:1. Likewise, the
+ ‘<code class="css">device</code>’ value will always keep a
+ 1:1 ratio, but will give different CSS pixel resolution depending on
+ device resolution.</p>
+
+ <p>Note that setting this property will affect the used lengths for
+ ‘<code class="css">device-width</code>’,
+ ‘<code class="css">device-height</code>’, and the size of the
+ <span>initial viewport</span>.
+
+ <p>The <dfn><resolution></dfn> value is a positive <number> immediately
+ followed by a unit identifier (‘<code class="css">dpi</code>’
+ or ‘<code class=css>dpcm</code>’).</p>
+
+ <p>Values have the following meanings:</p>
+
+ <dl>
+ <dt>‘<code class="css"><dfn title="auto!!resolution">auto</dfn></code>’</dt>
+ <dd>Use the UAs CSS pixel resolution.</dd>
+
+ <dt>‘<code class="css"><dfn>device</dfn></code>’</dt>
+ <dd>Use device resolution as the CSS pixel resolution. That is, have a
+ 1-1 relationship between a CSS and a device pixel.</dd>
+
+ <dt><var><resolution></var></dt>
+ <dd>Set the CSS pixel resolution to a fixed dpi or dpcm value.</dd>
+ </dl>
+
+
<h2>Constraining viewport property values</h2>
<h3>Definitions</h3>
@@ -1229,6 +1328,22 @@
--></pre>
</div>
+ <p class="issue">There are prefixed implementations of a media feature for
+ the device:css pixel ratio (-webkit-device-pixel-ratio /
+ -o-device-pixel-ratio). Should be standardized here or in a new level of
+ Media Queries?</p>
+
+
+ <h2>CSSOM</h2>
+
+ <p class="issue">Properties in the CSSOM and CSSOM View specifications refer
+ to the <span>viewport</span> and the <span>initial containing block</span>.
+ If any of those properties should refer to the <span>initial viewport</span>
+ and not the <span>actual viewport</span>, those exceptions need to be
+ adressed.</p>
+
+ <p class="issue">Standardize window.devicePixelRatio? Should be done in the
+ CSSOM View spec perhaps?</p>
<h2>Conformance</h2>
@@ -1258,6 +1373,8 @@
</ul>
</p>
+ <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>
@@ -1298,6 +1415,9 @@
<li><code class="index">minimum-scale</code></li>
<li><code class="index">maximum-scale</code></li>
<li><code class="index">user-scalable</code></li>
+ <li><code class="index">target-densityDpi</code><span class="issue">At
+ risk since ‘<code class="property">resolution</code>’ is at
+ risk.</span></li>
</ul>
<h3 id="parsing-algorithm">Parsing algorithm</h3>
@@ -1497,6 +1617,28 @@
--></pre>
</div>
+ <h4 class="no-num no-toc">The <code class="index">target-densityDpi</code> property</h4>
+
+ <p class="issue">At risk since ‘<code class="property">resolution</code>’ is at risk.</p>
+
+ <p>This property differ from the others since it is from the WebKit
+ implementation used in the Android browser and not supported in the Safari</p>
+
+ <p>The <code class="index">target-densityDpi</code> property is translated
+ into ‘<code class="property">resolution</code>’ with the
+ following value translations.</p>
+
+ <ol>
+ <li>Number values in the range <code>[70, 400]</code> are translated to
+ ‘<code class="css">dpi</code>’ values.</li>
+ <li><code class="index">device-dpi</code> translates to
+ ‘<code class="css">device</code>’</li>
+ <li><code class="index">low-dpi</code> translates to 120dpi</li>
+ <li><code class="index">medium-dpi</code> translates to 160dpi</li>
+ <li><code class="index">high-dpi</code> translates to 240dpi</li>
+ <li>Other values are dropped</li>
+ </ol>
+
<h2 id="handling-auto-zoom">Handling ‘<code class="css" title="auto!!zoom">auto</code>’
for ‘<code class="property" title="zoom!!property">zoom</code>’</h2>
@@ -1505,7 +1647,7 @@
<p>This section presents one way of picking an actual value for the
‘<code class="property" title="zoom!!property">zoom</code>’
property when the used value is
- ‘<code class="css" title="auto!!zoom">auto</code>.</p>
+ ‘<code class="css" title="auto!!zoom">auto</code>’.</p>
<p>Given an <span>initial viewport</span> with size <code>(initial-width,
initial-height)</code>, and a finite region within the
Received on Tuesday, 10 May 2011 08:15:33 UTC