[dbaron revision history] Merge in some CSS 2.1 syndata.html changes. Use lowercase tags in examples, and better examples of font-size and line-height. (date: 2003/08/07 21:15:58)

Author: dbaron

css3-syntax/Overview.src.html

@@ -254,13 +254,13 @@ <h3>Referring to characters not represented in a character encoding</h3>
 For example, we recommend:</em></p>
 
 <pre class="html-example">
-&lt;SPAN style="voice-family: D\FC rst"&gt;...&lt;/SPAN&gt;
+&lt;span style="voice-family: D\FC rst"&gt;...&lt;/span&gt;
 </pre>
 
 <p><em>rather than:</em></p>
 
 <pre class="html-example">
-&lt;SPAN style="voice-family: D&amp;#252;rst"&gt;...&lt;/SPAN&gt;
+&lt;span style="voice-family: D&amp;#252;rst"&gt;...&lt;/span&gt;
 </pre>
 </div>
 
@@ -619,7 +619,7 @@ <h3 id="at-rules" class="index-def" title="at-rules">At-rules</h3>
 
 <PRE>
 @import "subs.css";
-H1 { color: blue }
+h1 { color: blue }
 @import "list.css";
 </PRE>
 
@@ -631,7 +631,7 @@ <h3 id="at-rules" class="index-def" title="at-rules">At-rules</h3>
 
 <PRE>
 @import "subs.css";
-H1 { color: blue }
+h1 { color: blue }
 </PRE>
 </div>
 
@@ -645,7 +645,7 @@ <h3 id="at-rules" class="index-def" title="at-rules">At-rules</h3>
   @import "print-main.css";
   BODY { font-size: 10pt }
 }
-H1 {color: blue }
+h1 {color: blue }
 </PRE>
 </div>
 
@@ -711,9 +711,9 @@ <h3>Rule sets, declaration blocks, and selectors</h3>
 <span class="index-inst" title="ignore"><a href="#ignore">ignore</a></span>
 the whole second line, and not set the color of H3 to red:
 <PRE>
-H1, H2 {color: green }
-H3, H4 &amp; H5 {color: red }
-H6 {color: black }
+h1, h2 {color: green }
+h3, h4 &amp; h5 {color: red }
+h6 {color: black }
 </PRE>
 </DIV>
 
@@ -722,7 +722,7 @@ <h3>Rule sets, declaration blocks, and selectors</h3>
 are inside a string, and do not mark the end of the selector. This is
 a valid CSS3 statement.
 <PRE>
-P[example="public class foo\
+p[example="public class foo\
 {\
     private int x;\
 \
@@ -758,22 +758,22 @@ <h3 id="declaration">Declarations and properties</h3>
 <div class="example"><p>
 Thus, the following rules:</p>
 <pre>
-H1 { font-weight: bold }
-H1 { font-size: 12pt }
-H1 { line-height: 14pt }
-H1 { font-family: Helvetica }
-H1 { font-variant: normal }
-H1 { font-style: normal }
+h1 { font-weight: bold }
+h1 { font-size: 2em }
+h1 { line-height: 1.2 }
+h1 { font-family: Helvetica, Arial, sans-serif }
+h1 { font-variant: normal }
+h1 { font-style: normal }
 </pre>
 
 <p>are equivalent to:</p>
 
 <pre>
-H1 {
+h1 {
   font-weight: bold;
-  font-size: 12pt;
-  line-height: 14pt;
-  font-family: Helvetica;
+  font-size: 2em;
+  line-height: 1.2;
+  font-family: Helvetica, Arial, sans-serif; 
   font-variant: normal;
   font-style: normal
 }
@@ -804,10 +804,10 @@ <h3 id="declaration">Declarations and properties</h3>
 For example, assume a CSS3 parser encounters this style sheet:
 
 <PRE>
-H1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
-P { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
+h1 { color: red; font-style: 12px }  /* Invalid value: 12px */
+p { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
     font-variant: small-caps }
-EM EM { font-style: normal }
+em em { font-style: normal }
 </PRE>
 
 <p> The second declaration on the first line has an invalid value
@@ -817,9 +817,9 @@ <h3 id="declaration">Declarations and properties</h3>
 declarations, effectively reducing the style sheet to:
 
 <PRE class="example">
-H1 { color: red; }
-P { color: blue;  font-variant: small-caps }
-EM EM { font-style: normal }
+h1 { color: red; }
+p { color: blue;  font-variant: small-caps }
+em em { font-style: normal }
 </PRE>
 </div>
 
@@ -867,7 +867,7 @@ <h2 id="error-handling">Rules for handling parsing errors or unsupported feature
 property. For example, if the style sheet is:
 
 <PRE class="illegal-example">
-H1 { color: red; rotation: 70minutes }
+h1 { color: red; rotation: 70minutes }
 </PRE>
 
 <p> the user agent will treat this as if the style sheet had been
@@ -880,21 +880,21 @@ <h2 id="error-handling">Rules for handling parsing errors or unsupported feature
 declaration with an illegal value. For example:
 
 <PRE class="illegal-example">
-IMG { float: left }       /* correct CSS3 */
-IMG { float: left here }  /* "here" is not a value of 'float' */
-IMG { background: "red" } /* keywords cannot be quoted in CSS3 */
-IMG { border-width: 3 }   /* a unit must be specified for length values */
+img { float: left }       /* correct CSS3 */
+img { float: left here }  /* "here" is not a value of 'float' */
+img { background: "red" } /* keywords cannot be quoted in CSS3 */
+img { border-width: 3 }   /* a unit must be specified for length values */
 </PRE>
 
 A CSS3 parser would honor the first rule and
 <span class="index-inst" title="ignore"><a href="#ignore">ignore</a></span>
 the rest, as if the style sheet had been:
 
 <PRE class="example">
-IMG { float: left }
-IMG { }
-IMG { }
-IMG { }
+img { float: left }
+img { }
+img { }
+img { }
 </PRE>
 
 <p>A user agent conforming to a future CSS specification may accept one or
@@ -904,6 +904,27 @@ <h2 id="error-handling">Rules for handling parsing errors or unsupported feature
 when disallowed might be useful.  It should probably be a parsing error.
 We might want to add additional grammar productions for potentially
 negative numbers.]</p>
+</li>
+
+<li><strong>Malformed declarations.</strong>  User agents must handle
+unexpected tokens encountered while parsing a declaration by reading
+until the end of the declaration, while observing the rules for matching
+pairs of (), [], {}, "", and '', and correctly handling escapes. For
+example, a malformed declaration may be missing a property, colon (:) or
+value.  The following are all equivalent:
+
+<pre class="example"><code>
+p { color:green }
+p { color:green; color }  /* malformed declaration missing ':', value */
+p { color:red;   color; color:green }  /* same with expected recovery */
+p { color:green; color: } /* malformed declaration missing value */
+p { color:red;   color:; color:green } /* same with expected recovery */
+p { color:green; color{;color:maroon} } /* unexpected tokens { } */
+p { color:red;   color{;color:maroon}; color:green } /* same with recovery */
+</code></pre>
+
+</li>
+
 
 <LI><strong>Invalid at-keywords.</strong> User agents must <span
 class="index-inst" title="ignore"><a href="#ignore">ignore</a></span> an
@@ -917,9 +938,9 @@ <h2 id="error-handling">Rules for handling parsing errors or unsupported feature
     azimuth: 30deg;
     elevation: 190deg;
   }
-  H1 { color: red }
+  h1 { color: red }
 }
-H1 { color: blue }
+h1 { color: blue }
 </PRE>
 
 <p> The '@three-dee' at-rule is not part of CSS3. Therefore, the whole
@@ -930,7 +951,7 @@ <h2 id="error-handling">Rules for handling parsing errors or unsupported feature
 to:</p>
 
 <PRE class="example">
-H1 { color: blue }
+h1 { color: blue }
 </PRE>
 
 </UL>
@@ -1959,11 +1980,11 @@ <h3>Shorthand properties</h3>
 The multiple style rules of this example:</p>
 
 <pre>
-H1 { 
+h1 { 
   font-weight: bold; 
-  font-size: 12pt;
-  line-height: 14pt; 
-  font-family: Helvetica; 
+  font-size: 2em;
+  line-height: 1.2; 
+  font-family: Helvetica, Arial, sans-serif; 
   font-variant: normal;
   font-style: normal;
   font-stretch: normal;
@@ -1974,7 +1995,7 @@ <h3>Shorthand properties</h3>
 <p>may be rewritten with a single shorthand property:</p>
 
 <pre>
-H1 { font: bold 12pt/14pt Helvetica }
+h1 { font: bold 2em/1.2 Helvetica, Arial, sans-serif }
 </pre>
 
 <p>In this example, <span