Skip to content

Commit de2739d

Browse files
author
Rune Lillesveen
committed
- Fixed html validation issues.
- Fixed link to CSS21 pixel definition.
1 parent b783ee1 commit de2739d

3 files changed

Lines changed: 82 additions & 63 deletions

File tree

‎css-device-adapt/Overview.html‎

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"http://www.w3.org/TR/html4/strict.dtd">
33

44
<html lang=en>
5-
<head>
5+
<head><meta content="text/html;charset=utf-8" http-equiv=Content-Type>
6+
67
<title>CSS Device Adaptation</title>
78
<link href="http://dev.w3.org/csswg/default.css" rel=stylesheet
89
type="text/css">
@@ -17,7 +18,8 @@
1718

1819
<h1>CSS Device Adaptation</h1>
1920

20-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 July 2011</h2>
21+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 5 September
22+
2011</h2>
2123

2224
<dl>
2325
<dt>This version:
@@ -204,7 +206,7 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
204206
viewport</a>. Mobile/handheld device browsers have a viewport that is
205207
generally a lot narrower than a desktop browser window at a zoom level
206208
that gives a CSS pixel size <a
207-
href="http://www.w3.org/TR/CSS21/syndata.html#pixel-units">recommended
209+
href="http://www.w3.org/TR/CSS21/syndata.html#length-units">recommended
208210
</a> by CSS 2.1.
209211

210212
<p>The narrow viewport is a problem for documents designed to look good in
@@ -268,15 +270,15 @@ <h2 id=the-viewport><span class=secno>3. </span>The viewport</h2>
268270
only parts of the <a href="#actual-viewport">actual viewport</a> to be
269271
visible, the UA should offer a scrolling or panning mechanism.
270272

271-
<p>It is recommended that initially the upper-left corners of the <span>
272-
actual viewport<span> and the window or viewing area are aligned if the
273-
base direction of the document is ltr. Similarly, that the upper-right
274-
corners are aligned when the base direction is rtl. The base direction for
275-
a document is defined as the computed value of the <code
276-
class=property>direction</code> property for the first <code
273+
<p>It is recommended that initially the upper-left corners of the <a
274+
href="#actual-viewport"> actual viewport</a> and the window or viewing
275+
area are aligned if the base direction of the document is ltr. Similarly,
276+
that the upper-right corners are aligned when the base direction is rtl.
277+
The base direction for a document is defined as the computed value of the
278+
<code class=property>direction</code> property for the first <code
277279
class=html>BODY</code> element of an HTML or XHTML document. For other
278280
document types, it is the computed <code class=property>direction</code>
279-
for the root element.</span></span>
281+
for the root element.
280282

281283
<p class=issue>"dbaron: The question is, what does this do on the desktop
282284
browser? (And what's a desktop browser)". Need to say that a "desktop"
@@ -339,13 +341,13 @@ <h3 id=syntax><span class=secno>4.1. </span>Syntax</h3>
339341
<p> where:
340342

341343
<pre>V v|\\0{0,4}(56|76)(\r\n|[ \t\r\n\f])?|\\v
342-
<!------>W w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w</pre>
343-
344-
<p>The <code>viewport</code> non-terminal is added to the <code>stylesheet</code>
345-
production along with the <code>ruleset</code>, <code>media</code>, and
346-
<code>page</code> non-terminals:</p>
347-
348-
<pre><!--
344+
<!-- -->W w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w</pre>
345+
346+
<p>The <code>viewport</code> non-terminal is added to the
347+
<code>stylesheet</code> production along with the <code>ruleset</code>,
348+
<code>media</code>, and <code>page</code> non-terminals:
349+
350+
<pre><!--
349351
-->stylesheet
350352
<!-- --> : [ CHARSET_SYM STRING ';' ]?
351353
<!-- --> [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
@@ -395,7 +397,7 @@ <h3 id=the-lsquomin-widthrsquo-and-lsquomax-wid><span class=secno>5.1.
395397
<tr>
396398
<td><em>Initial:</em>
397399

398-
<td><a href="#auto" title="auto!!length">auto<span></span></a>
400+
<td><a href="#auto" title="auto!!length">auto</a>
399401

400402
<tr>
401403
<td><em>Applies to:</em>
@@ -1134,8 +1136,7 @@ <h3 id=the-lsquoorientationrsquo-property><span class=secno>5.9. </span>The
11341136

11351137
<dd>The document should be locked to portrait presentation.
11361138

1137-
<dt>&lsquo;<code class=css><dfn
1138-
id=landscape>landscape<dfn></dfn></dfn></code>&rsquo;
1139+
<dt>&lsquo;<code class=css><dfn id=landscape>landscape</dfn></code>&rsquo;
11391140

11401141
<dd>The document should be locked to landscape presentation.
11411142
</dl>
@@ -1306,7 +1307,7 @@ <h3 id=constraining-procedure><span class=secno>6.2. </span>The procedure</h3>
13061307
title="width!!resolved">width</code> and <code
13071308
title="height!!resolved">height</code> from min/max properties</h4>
13081309

1309-
<ol start=2>
1310+
<ol id=ol2>
13101311
<li>If <code title="min-width!!resolved">min-width</code> or <code
13111312
title="max-width!!resolved">max-width</code> is not &lsquo;<a
13121313
href="#auto"><code class=css title="auto!!length">auto</code></a>&rsquo;,
@@ -1323,7 +1324,7 @@ <h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
13231324
<code title="min-zoom!!resolved">min-zoom</code> and <code
13241325
title="max-zoom!!resolved">max-zoom</code> values</h4>
13251326

1326-
<ol start=4>
1327+
<ol id=ol4>
13271328
<li>If <code title="min-zoom!!resolved">min-zoom</code> is not &lsquo;<a
13281329
href="#auto1"><code class=css
13291330
title="auto!!min-zoom">auto</code></a>&rsquo; and <code
@@ -1338,7 +1339,7 @@ <h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
13381339
title="zoom!!resolved">zoom</code> value to the <code>[min-zoom,
13391340
max-zoom]</code> range</h4>
13401341

1341-
<ol start=5>
1342+
<ol id=ol5>
13421343
<li>If <code title="zoom!!resolved">zoom</code> is not &lsquo;<a
13431344
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>&rsquo;,
13441345
set <code>zoom = MAX(min-zoom, MIN(max-zoom, zoom))</code>
@@ -1347,7 +1348,7 @@ <h4 class="no-num no-toc" id=resolve-min-zoom-and-max-zoom-values>Resolve
13471348
<h4 class="no-num no-toc" id=resolve-width-value>Resolve <code
13481349
title="width!!resolved">width</code> value</h4>
13491350

1350-
<ol start=6>
1351+
<ol id=ol6>
13511352
<li>If <code title="width!!resolved">width</code> and <code
13521353
title="zoom!!resolved">zoom</code> are both &lsquo;<code
13531354
class=css>auto</code>&rsquo;, set <code>width = initial-width</code>
@@ -1366,7 +1367,7 @@ <h4 class="no-num no-toc" id=resolve-width-value>Resolve <code
13661367
<h4 class="no-num no-toc" id=resolve-height-value>Resolve <code
13671368
title="height!!resolved">height</code> value</h4>
13681369

1369-
<ol start=9>
1370+
<ol id=ol9>
13701371
<li>If <code title="height!!resolved">height</code> is &lsquo;<code
13711372
class=css>auto</code>&rsquo;, set <code>height = width * (initial-height
13721373
/ initial-width)</code>
@@ -1378,7 +1379,7 @@ <h4 class="no-num no-toc" id=resolve-height-value>Resolve <code
13781379
title="height!!resolved">height</code> to fill the window/viewing area for
13791380
the specified <code title="zoom!!resolved">zoom</code></h4>
13801381

1381-
<ol start=10>
1382+
<ol id=ol10>
13821383
<li>If <code title="zoom!!resolved">zoom</code> or <code
13831384
title="max-zoom!!resolved">max-zoom</code> is not &lsquo;<a
13841385
href="#auto0"><code class=css title="auto!!zoom">auto</code></a>&rsquo;,
@@ -1428,7 +1429,7 @@ <h2 id=media-queries><span class=secno>7. </span>Media Queries</h2>
14281429
the default aspect ratio of the user agent.&rdquo;
14291430
</blockquote>
14301431

1431-
<p> For <code class=css>@viewport</code> rules, though, it is recommended
1432+
<p>For <code class=css>@viewport</code> rules, though, it is recommended
14321433
that they are applied before media queries for other rules are evaluated.
14331434

14341435
<p>Recommended procedure for applying CSS rules:
@@ -1696,7 +1697,7 @@ <h3 id=parsing-algorithm><span class=secno>10.3. </span>Parsing algorithm</h3>
16961697
<!----><span class=statement><span class=keyword>while</span> <span class=variable>i</span> &le; <span class=op>length</span>[<span class=variable>S</span>]</span>
16971698
<!----><span class=statement> <span class=keyword>do</span> <span class=keyword>while</span> <span class=variable>i</span> &le; <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>
16981699
<!----><span class=statement> <span class=keyword>do</span> <span class=variable>i</span> &larr; <span class=variable>i</span> + 1</span>
1699-
<!----><span class=statement> <span class=keyword>if</span> <span class=variable>i</span> &le; <span class=op>length</span>[<span class=variable>S</span>]
1700+
<!----><span class=statement> <span class=keyword>if</span> <span class=variable>i</span> &le; <span class=op>length</span>[<span class=variable>S</span>]</span>
17001701
<!----><span class=statement> <span class=keyword>then</span> <span class=variable>i</span> &larr; <span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
17011702
<!---->
17021703
<!----><span class=method><span class=method-name>Parse-Property</span>(<span class=variable>S</span>, <span class=variable>i</span>)</span>
@@ -1720,7 +1721,7 @@ <h3 id=parsing-algorithm><span class=secno>10.3. </span>Parsing algorithm</h3>
17201721
<!----><span class=statement><span class=variable>property-value</span> &larr; <span class=variable>S</span>[<span class=variable>start</span> .. (<span class=variable>i</span> - 1)]</span>
17211722
<!----><span class=statement><span class=method-name>Set-Property</span>(<span class=variable>property-name</span>, <span class=variable>property-value</span>)</span>
17221723
<!----><span class=statement><span class=keyword>return</span> <span class=variable>i</span></span><!--
1723-
--></span></pre>
1724+
--></pre>
17241725

17251726
<p> <span class=method-name>Set-Property</span> matches the <a
17261727
href="#meta-properties">listed property names</a> case-insensitively. The
@@ -2043,7 +2044,7 @@ <h2 class=no-num id=property-index>Property index</h2>
20432044

20442045
<tbody>
20452046
<tr>
2046-
<td><a class=property href="#height">height</a>
2047+
<th><a class=property href="#height">height</a>
20472048

20482049
<td>&lt;viewport-length&gt;{1,2}
20492050

@@ -2058,7 +2059,7 @@ <h2 class=no-num id=property-index>Property index</h2>
20582059
<td>visual, continuous
20592060

20602061
<tr>
2061-
<td><a class=property href="#max-height">max-height</a>
2062+
<th><a class=property href="#max-height">max-height</a>
20622063

20632064
<td>&lt;viewport-length&gt;
20642065

@@ -2073,7 +2074,7 @@ <h2 class=no-num id=property-index>Property index</h2>
20732074
<td>visual, continuous
20742075

20752076
<tr>
2076-
<td><a class=property href="#max-width">max-width</a>
2077+
<th><a class=property href="#max-width">max-width</a>
20772078

20782079
<td>&lt;viewport-length&gt;
20792080

@@ -2088,7 +2089,7 @@ <h2 class=no-num id=property-index>Property index</h2>
20882089
<td>visual, continuous
20892090

20902091
<tr>
2091-
<td><a class=property href="#max-zoom">max-zoom</a>
2092+
<th><a class=property href="#max-zoom">max-zoom</a>
20922093

20932094
<td>auto | &lt;number&gt; | &lt;percentage&gt;
20942095

@@ -2103,7 +2104,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21032104
<td>visual, continuous
21042105

21052106
<tr>
2106-
<td><a class=property href="#min-height">min-height</a>
2107+
<th><a class=property href="#min-height">min-height</a>
21072108

21082109
<td>&lt;viewport-length&gt;
21092110

@@ -2118,7 +2119,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21182119
<td>visual, continuous
21192120

21202121
<tr>
2121-
<td><a class=property href="#min-width">min-width</a>
2122+
<th><a class=property href="#min-width">min-width</a>
21222123

21232124
<td>&lt;viewport-length&gt;
21242125

@@ -2133,7 +2134,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21332134
<td>visual, continuous
21342135

21352136
<tr>
2136-
<td><a class=property href="#min-zoom">min-zoom</a>
2137+
<th><a class=property href="#min-zoom">min-zoom</a>
21372138

21382139
<td>auto | &lt;number&gt; | &lt;percentage&gt;
21392140

@@ -2148,7 +2149,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21482149
<td>visual, continuous
21492150

21502151
<tr>
2151-
<td><a class=property href="#orientation">orientation</a>
2152+
<th><a class=property href="#orientation">orientation</a>
21522153

21532154
<td>auto | portrait | landscape
21542155

@@ -2163,7 +2164,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21632164
<td>visual, continuous
21642165

21652166
<tr>
2166-
<td><a class=property href="#resolution">resolution</a>
2167+
<th><a class=property href="#resolution">resolution</a>
21672168

21682169
<td>auto | device | &lt;resolution&gt;
21692170

@@ -2178,7 +2179,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21782179
<td>visual, continuous
21792180

21802181
<tr>
2181-
<td><a class=property href="#user-zoom">user-zoom</a>
2182+
<th><a class=property href="#user-zoom">user-zoom</a>
21822183

21832184
<td>zoom | fixed
21842185

@@ -2193,7 +2194,7 @@ <h2 class=no-num id=property-index>Property index</h2>
21932194
<td>visual, continuous
21942195

21952196
<tr>
2196-
<td><a class=property href="#width">width</a>
2197+
<th><a class=property href="#width">width</a>
21972198

21982199
<td>&lt;viewport-length&gt;{1,2}
21992200

@@ -2208,7 +2209,7 @@ <h2 class=no-num id=property-index>Property index</h2>
22082209
<td>visual, continuous
22092210

22102211
<tr>
2211-
<td><span class=property>zoom</span>
2212+
<th><span class=property>zoom</span>
22122213

22132214
<td>auto | &lt;number&gt; | &lt;percentage&gt;
22142215

0 commit comments

Comments
 (0)