- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 10 Aug 2011 23:42:08 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-values
In directory hutz:/tmp/cvs-serv6818
Modified Files:
Overview.html Overview.src.html
Log Message:
Reorganize intro section:
- replace Dependencies with Module Interactions
- Shift really great introductory paragraph from Values section into Intro section
- Import Value Syntax Definition section from CSS2.1
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.html,v
retrieving revision 1.71
retrieving revision 1.72
diff -u -d -r1.71 -r1.72
--- Overview.html 10 Aug 2011 23:41:23 -0000 1.71
+++ Overview.html 10 Aug 2011 23:42:05 -0000 1.72
@@ -13,6 +13,10 @@
tt.declaration { white-space: nowrap }
.del { text-decoration: line-through}
.say { font-style: italic }
+ .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
+ #propvalues td { text-align: right; }
+ #propvalues td + td { text-align: left; }
+ p { text-indent: 0 !important; margin: 1em 0 !important; }
</style>
<link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
@@ -133,133 +137,150 @@
<!--begin-toc-->
<ul class=toc>
- <li><a href="#dependencies-on-other-modules"><span class=secno>1.
- </span>Dependencies on other modules</a>
+ <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
+ <ul class=toc>
+ <li><a href="#placement"><span class=secno>1.1. </span> Module
+ Interactions</a>
+ </ul>
- <li><a href="#introduction"><span class=secno>2. </span>Introduction</a>
+ <li><a href="#value-defs"><span class=secno>2. </span> Value Definition
+ Syntax</a>
+ <ul class=toc>
+ <li><a href="#value-types"><span class=secno>2.1. </span> Component
+ value types</a>
- <li><a href="#value-definitions"><span class=secno>3. </span>Value
- definitions</a>
+ <li><a href="#value-types"><span class=secno>2.2. </span> Component
+ value combinators</a>
- <li><a href="#syntax-and-terminology"><span class=secno>4. </span>Syntax
+ <li><a href="#value-types"><span class=secno>2.3. </span> Component
+ value multipliers</a>
+
+ <li><a href="#value-types"><span class=secno>2.4. </span> Component
+ values and white space</a>
+
+ <li><a href="#value-types"><span class=secno>2.5. </span> Property value
+ examples</a>
+ </ul>
+
+ <li><a href="#syntax-and-terminology"><span class=secno>3. </span>Syntax
and terminology</a>
<ul class=toc>
- <li><a href="#integers"><span class=secno>4.1. </span>Integers</a>
+ <li><a href="#integers"><span class=secno>3.1. </span>Integers</a>
- <li><a href="#numbers"><span class=secno>4.2. </span>Numbers</a>
+ <li><a href="#numbers"><span class=secno>3.2. </span>Numbers</a>
- <li><a href="#numbers-with-unit-identifiers"><span class=secno>4.3.
+ <li><a href="#numbers-with-unit-identifiers"><span class=secno>3.3.
</span>Numbers with unit identifiers</a>
- <li><a href="#identifiers"><span class=secno>4.4. </span>Identifiers</a>
+ <li><a href="#identifiers"><span class=secno>3.4. </span>Identifiers</a>
- <li><a href="#strings"><span class=secno>4.5. </span>Strings</a>
+ <li><a href="#strings"><span class=secno>3.5. </span>Strings</a>
- <li><a href="#functional-notation"><span class=secno>4.6.
+ <li><a href="#functional-notation"><span class=secno>3.6.
</span>Functional notation</a>
</ul>
- <li><a href="#keywords"><span class=secno>5. </span>Keywords</a>
+ <li><a href="#keywords"><span class=secno>4. </span>Keywords</a>
- <li><a href="#generic-data-types"><span class=secno>6. </span>Generic data
+ <li><a href="#generic-data-types"><span class=secno>5. </span>Generic data
types</a>
<ul class=toc>
- <li><a href="#ltintegergt"><span class=secno>6.1.
+ <li><a href="#ltintegergt"><span class=secno>5.1.
</span><integer></a>
- <li><a href="#ltnumbergt"><span class=secno>6.2.
+ <li><a href="#ltnumbergt"><span class=secno>5.2.
</span><number></a>
- <li><a href="#ltlengthgt"><span class=secno>6.3.
+ <li><a href="#ltlengthgt"><span class=secno>5.3.
</span><length></a>
<ul class=toc>
<li><a href="#absolute-length-units-cm-mm.-in-pt-pc"><span
- class=secno>6.3.1. </span>Absolute length units: cm, mm. in, pt,
+ class=secno>5.3.1. </span>Absolute length units: cm, mm. in, pt,
pc</a>
- <li><a href="#relative-length-units"><span class=secno>6.3.2.
+ <li><a href="#relative-length-units"><span class=secno>5.3.2.
</span>Relative length units</a>
<ul class=toc>
- <li><a href="#the-em-unit"><span class=secno>6.3.2.1. </span>The
+ <li><a href="#the-em-unit"><span class=secno>5.3.2.1. </span>The
‘<code class=property>em</code>’ unit</a>
- <li><a href="#the-ex-unit"><span class=secno>6.3.2.2. </span>The
+ <li><a href="#the-ex-unit"><span class=secno>5.3.2.2. </span>The
‘<code class=property>ex</code>’ unit</a>
- <li><a href="#the-px-unit"><span class=secno>6.3.2.3. </span>The
+ <li><a href="#the-px-unit"><span class=secno>5.3.2.3. </span>The
‘<code class=property>px</code>’ unit</a>
- <li><a href="#the-rem-unit"><span class=secno>6.3.2.4. </span>The
+ <li><a href="#the-rem-unit"><span class=secno>5.3.2.4. </span>The
‘<code class=property>rem</code>’ unit</a>
- <li><a href="#the-vw-unit"><span class=secno>6.3.2.5. </span>The
+ <li><a href="#the-vw-unit"><span class=secno>5.3.2.5. </span>The
‘<code class=property>vw</code>’ unit</a>
- <li><a href="#the-vh-unit"><span class=secno>6.3.2.6. </span>The
+ <li><a href="#the-vh-unit"><span class=secno>5.3.2.6. </span>The
‘<code class=property>vh</code>’ unit</a>
- <li><a href="#the-vm-unit"><span class=secno>6.3.2.7. </span>The
+ <li><a href="#the-vm-unit"><span class=secno>5.3.2.7. </span>The
‘<code class=property>vm</code>’ unit</a>
</ul>
- <li><a href="#the-calc-min-and-max-functions"><span class=secno>6.3.3.
+ <li><a href="#the-calc-min-and-max-functions"><span class=secno>5.3.3.
</span>The ‘<code class=property>calc</code>’,
‘<code class=property>min</code>’ and ‘<code
class=property>max</code>’ functions</a>
</ul>
- <li><a href="#ltstringgt"><span class=secno>6.4.
+ <li><a href="#ltstringgt"><span class=secno>5.4.
</span><string></a>
- <li><a href="#ltcolorgt"><span class=secno>6.5. </span><color></a>
+ <li><a href="#ltcolorgt"><span class=secno>5.5. </span><color></a>
- <li><a href="#ltpercentagegt"><span class=secno>6.6.
+ <li><a href="#ltpercentagegt"><span class=secno>5.6.
</span><percentage></a>
- <li><a href="#ltanglegt"><span class=secno>6.7. </span><angle></a>
+ <li><a href="#ltanglegt"><span class=secno>5.7. </span><angle></a>
- <li><a href="#lttimegt"><span class=secno>6.8. </span><time></a>
+ <li><a href="#lttimegt"><span class=secno>5.8. </span><time></a>
- <li><a href="#ltfrequencygt"><span class=secno>6.9.
+ <li><a href="#ltfrequencygt"><span class=secno>5.9.
</span><frequency></a>
- <li><a href="#ltattrgt"><span class=secno>6.10. </span><attr></a>
+ <li><a href="#ltattrgt"><span class=secno>5.10. </span><attr></a>
- <li><a href="#uris"><span class=secno>6.11. </span><url></a>
+ <li><a href="#uris"><span class=secno>5.11. </span><url></a>
- <li><a href="#ltimagegt"><span class=secno>6.12.
+ <li><a href="#ltimagegt"><span class=secno>5.12.
</span><image></a>
- <li><a href="#ltfractiongt"><span class=secno>6.13.
+ <li><a href="#ltfractiongt"><span class=secno>5.13.
</span><fraction></a>
<ul class=toc>
- <li><a href="#the-fr-unit"><span class=secno>6.13.1. </span>The
+ <li><a href="#the-fr-unit"><span class=secno>5.13.1. </span>The
‘<code class=property>fr</code>’ unit</a>
</ul>
- <li><a href="#ltgridgt"><span class=secno>6.14. </span><grid></a>
+ <li><a href="#ltgridgt"><span class=secno>5.14. </span><grid></a>
<ul class=toc>
- <li><a href="#the-gr-unit"><span class=secno>6.14.1. </span>The
+ <li><a href="#the-gr-unit"><span class=secno>5.14.1. </span>The
‘<code class=property>gr</code>’ unit</a>
</ul>
</ul>
<li><a href="#specified-computed-used-and-actual-value"><span
- class=secno>7. </span>Specified, computed, used, and actual values</a>
+ class=secno>6. </span>Specified, computed, used, and actual values</a>
<ul class=toc>
- <li><a href="#finding-the-specified-value"><span class=secno>7.1.
+ <li><a href="#finding-the-specified-value"><span class=secno>6.1.
</span>Finding the specified value</a>
- <li><a href="#finding-the-computed-value"><span class=secno>7.2.
+ <li><a href="#finding-the-computed-value"><span class=secno>6.2.
</span>Finding the computed value</a>
- <li><a href="#finding-the-used-value"><span class=secno>7.3.
+ <li><a href="#finding-the-used-value"><span class=secno>6.3.
</span>Finding the used value</a>
- <li><a href="#finding-the-actual-value"><span class=secno>7.4.
+ <li><a href="#finding-the-actual-value"><span class=secno>6.4.
</span>Finding the actual value</a>
</ul>
@@ -277,47 +298,141 @@
</ul>
<!--end-toc-->
- <h2 id=dependencies-on-other-modules><span class=secno>1.
- </span>Dependencies on other modules</h2>
+ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
- <p>This CSS3 module depends on the following other CSS3 modules:
+ <p>The value definition field of each CSS property can contain keywords,
+ data types (which appear between ‘<code class=css><</code>’
+ and ‘<code class=css>></code>’), and information on how they
+ can be combined. Generic data types (<a
+ href="#ltlengthgt0"><code><length></code></a> being the most widely
+ used) that can be used by many properties are described in this
+ specification, while more specific data types (e.g.,
+ <code><border-width></code>) are described in the corresponding
+ modules. </code>
+
+ <h3 id=placement><span class=secno>1.1. </span> Module Interactions</h3>
+
+ <p>This module replaces and extends the data type definitions in <a
+ href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <a
+ href="http://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>, <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>, and <a
+ href="http://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>.
+
+ <h2 id=value-defs><span class=secno>2. </span> Value Definition Syntax</h2>
+
+ <p>The syntax described here is used to define the set of valid values for
+ CSS properties. A property value can have one or more components.
+
+ <h3 id=value-types><span class=secno>2.1. </span> Component value types</h3>
+
+ <p>Component value types are designated in several ways:
+
+ <ol>
+ <li><a href="#keyword">keyword</a> values (such as ‘<code
+ class=css>auto</code>’, ‘<code class=css>disc</code>’,
+ etc.), which appear literally, without quotes (e.g. <code>auto</code>)
+
+ <li>basic data types, which appear between ‘<code
+ class=css><</code>’ and ‘<code
+ class=css>></code>’ (e.g., <a
+ href="#ltlengthgt0"><code><length></code></a>,
+ <code><percentage></code>, etc.).
+
+ <li>types that have the same range of values as a property bearing the
+ same name (e.g., <code><'border-width'></code>
+ <code><'background-attachment'></code>, etc.). In this case, the
+ type name is the property name (complete with quotes) between the
+ brackets. Such a type does <em>not</em> include the value ‘<code
+ class=property>inherit</code>’.
+
+ <li>non-terminals that do not share the same name as a property. In this
+ case, the non-terminal name appears between ‘<code
+ class=css><</code>’ and ‘<code
+ class=css>></code>’, as in <code><spacing></code>. Notice
+ the distinction between <code><border-width></code> and
+ <code><'border-width'></code>: the latter is defined as the value
+ of the ‘<code class=property>border-width</code>’ property,
+ the former requires an explicit expansion elsewhere. The definition of a
+ non-terminal is located near its first appearance in the specification.
+ </ol>
+
+ <p>Some property value definitions also include the slash (/) and/or the
+ comma (,) as literals. These represent their corresponding tokens.
+
+ <h3 id=value-types><span class=secno>2.2. </span> Component value
+ combinators</h3>
+
+ <p>Component values can be arranged into property values as follows:
<ul>
- <li><cite>Cascading and Inheritance</cite> <a href="#CSS3CASCADE"
- rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>, which describes
- how to find the <cite>resulting value</cite> from several competing
- values. Also, it describes how to replace the "inherit" keyword with the
- inherited value.
+ <li>Several juxtaposed words mean that all of them must occur, in the
+ given order.
- <li><cite>Syntax</cite> <a href="#CSS3SYN"
- rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a>, which describes the
- syntax of values at the lexical level.
+ <li>A double ampersand (&&) separates two or more components, all of which
+ must occur, in any order.
- <li><cite>Color</cite> <a href="#CSS3COLOR"
- rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>, which defines
- additional values used for some properties that control color of text,
- borders, etc
+ <li>A double bar (||) separates two or more options: one or more of them
+ must occur, in any order.
- <li><cite>Fonts</cite> <a href="#CSS3FONT"
- rel=biblioentry>[CSS3FONT]<!--{{!CSS3FONT}}--></a>, which describes
- additional values used for font-related properties
+ <li>A bar (|) separates two or more alternatives: exactly one of them must
+ occur.
+
+ <li>Brackets ([ ]) are for grouping.
</ul>
- <h2 id=introduction><span class=secno>2. </span>Introduction</h2>
+ <p>Juxtaposition is stronger than the double ampersand, the double
+ ampersand is stronger than the double bar, and the double bar is stronger
+ than the bar. Thus, the following lines are equivalent:
- <p>By setting property values on elements in a document, style sheets
- express the appearance of the document. In order to express rich designs,
- a wide range of values and associated units are necessary. This
- specification describes the various types of values and units that can be
- used in CSS style sheets.
+ <pre>
+<!----> a b | c || d && e f
+<!---->[ a b ] | [ c || [ d && [ e f ]]]</pre>
- <h2 id=value-definitions><span class=secno>3. </span>Value definitions</h2>
+ <h3 id=value-types><span class=secno>2.3. </span> Component value
+ multipliers</h3>
- <p>Each CSS property has a value definition field in the property
- description. The value definition describes what types of values the
- property accepts. The syntax used in the value definitions field is <a
- href="http://www.w3.org/TR/css3-syntax/#property-def-value">defined</a> in
- <a href="#CSS3SYN" rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a>.
+ <p>Every type, keyword, or bracketed group may be followed by one of the
+ following modifiers:
+
+ <ul>
+ <li>An asterisk (*) indicates that the preceding type, word, or group
+ occurs zero or more times.
+
+ <li>A plus (+) indicates that the preceding type, word, or group occurs
+ one or more times.
+
+ <li>A question mark (?) indicates that the preceding type, word, or group
+ is optional.
+
+ <li>A pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
+ indicates that the preceding type, word, or group occurs at least
+ <var>A</var> and at most <var>B</var> times.
+ </ul>
+
+ <h3 id=value-types><span class=secno>2.4. </span> Component values and
+ white space</h3>
+
+ <p>Component values are specified in terms of tokens, as described in <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a>
+ of <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. As the
+ grammar allows spaces between tokens in the components of the
+ <code>value</code> production, spaces may appear between tokens in
+ property values.
+
+ <p class=note>Note: In many cases, spaces will in fact be <em>required</em>
+ between tokens in order to distinguish them from each other. For example,
+ the value ‘<code class=css>1em2em</code>’ would be parsed as a
+ single <code>DIMEN</code> token with the number ‘<code
+ class=css>1</code>’ and the identifier ‘<code
+ class=css>em2em</code>’, which is an invalid unit. In this case, a
+ space would be required before the ‘<code class=css>2</code>’
+ to get this parsed as the two lengths ‘<code
+ class=css>1em</code>’ and ‘<code class=css>2em</code>’.
+
+ <h3 id=value-types><span class=secno>2.5. </span> Property value examples</h3>
+
+ <p>Below are some examples of properties with their corresponding value
+ definition fields
<div class=example>
<p>Here are some sample properties with corresponding value definition
@@ -358,20 +473,13 @@
</table>
</div>
- <p>The value definition fields contain keywords, data types (which appear
- between "<" and ">", and information on how they can be combined. Generic
- data types (<length> being the most widely used) that can be used by
- many properties are described in this specification, while more specific
- data types (e.g., <border-width>) are described in the corresponding
- modules.
-
- <h2 id=syntax-and-terminology><span class=secno>4. </span>Syntax and
+ <h2 id=syntax-and-terminology><span class=secno>3. </span>Syntax and
terminology</h2>
<p>The generic data types described in the next sections use some common
syntactic building blocks and terms that are described in this section.
- <h3 id=integers><span class=secno>4.1. </span>Integers</h3>
+ <h3 id=integers><span class=secno>3.1. </span>Integers</h3>
<p>An <dfn id=integer>integer</dfn> is one or more decimal digits "0" to
"9". Integers may be preceded by "-" or "+" to indicate the sign.
@@ -382,7 +490,7 @@
</pre>
</div>
- <h3 id=numbers><span class=secno>4.2. </span>Numbers</h3>
+ <h3 id=numbers><span class=secno>3.2. </span>Numbers</h3>
<p>A <dfn id=number>number</dfn> is either an integer, or zero or more
decimal digits followed by a dot (.) followed by one or more decimal
@@ -394,7 +502,7 @@
</pre>
</div>
- <h3 id=numbers-with-unit-identifiers><span class=secno>4.3. </span>Numbers
+ <h3 id=numbers-with-unit-identifiers><span class=secno>3.3. </span>Numbers
with unit identifiers</h3>
<p>A <dfn id=number-with-a-unit-identifier>number with a unit
@@ -406,7 +514,7 @@
</pre>
</div>
- <h3 id=identifiers><span class=secno>4.4. </span>Identifiers</h3>
+ <h3 id=identifiers><span class=secno>3.4. </span>Identifiers</h3>
<p>An <dfn id=identifier>identifier</dfn> is an sequence of characters.
Identifiers cannot start with a digit, and there are other restrictions <a
@@ -420,7 +528,7 @@
</pre>
</div>
- <h3 id=strings><span class=secno>4.5. </span>Strings</h3>
+ <h3 id=strings><span class=secno>3.5. </span>Strings</h3>
<p>A <dfn id=string>string</dfn> is a sequence of characters enclosed by
double quotes or single quotes. Double quotes cannot occur inside double
@@ -459,7 +567,7 @@
</pre>
</div>
- <h3 id=functional-notation><span class=secno>4.6. </span>Functional
+ <h3 id=functional-notation><span class=secno>3.6. </span>Functional
notation</h3>
<p>Some values use a <dfn id=functional-notation0>functional notation</dfn>
@@ -480,7 +588,7 @@
that is not a compound value is a <dfn id=simple-value>simple value</dfn>.
- <h2 id=keywords><span class=secno>5. </span>Keywords</h2>
+ <h2 id=keywords><span class=secno>4. </span>Keywords</h2>
<p>In the value definition fields, keywords appear literally. Keywords are
identifiers.
@@ -519,23 +627,23 @@
default or not (which isn't obvious for some properties, such as
text-decoration and visibility).
- <h2 id=generic-data-types><span class=secno>6. </span>Generic data types</h2>
+ <h2 id=generic-data-types><span class=secno>5. </span>Generic data types</h2>
- <h3 id=ltintegergt><span class=secno>6.1. </span><integer></h3>
+ <h3 id=ltintegergt><span class=secno>5.1. </span><integer></h3>
<p>Integer values are denoted by <dfn id=ltintegergt0><integer></dfn>
in the value definitions. Properties may restrict the integer value to
some range. If the value is outside the allowed range, the declaration is
ignored.
- <h3 id=ltnumbergt><span class=secno>6.2. </span><number></h3>
+ <h3 id=ltnumbergt><span class=secno>5.2. </span><number></h3>
<p>Number values are denoted by <dfn id=ltnumbergt0><number></dfn> in
the value definitions. Properties may restrict the number value to some
range. If the value is outside the allowed range, the declaration is
ignored.
- <h3 id=ltlengthgt><span class=secno>6.3. </span><length></h3>
+ <h3 id=ltlengthgt><span class=secno>5.3. </span><length></h3>
<p>Lengths are denoted by <dfn id=ltlengthgt0><length></dfn> in the
property definitions. Lengths refer to horizontal or vertical
@@ -553,7 +661,7 @@
relative to other lengths, while <dfn id=absolute-length-units>absolute
length units</dfn> express fixed lengths.
- <h4 id=absolute-length-units-cm-mm.-in-pt-pc><span class=secno>6.3.1.
+ <h4 id=absolute-length-units-cm-mm.-in-pt-pc><span class=secno>5.3.1.
</span>Absolute length units: cm, mm. in, pt, pc</h4>
<p>Absolute length units are useful when the physical properties of the
@@ -604,7 +712,7 @@
<p>In cases where the specified length cannot be supported, user agents
must approximate it in the actual value.
- <h4 id=relative-length-units><span class=secno>6.3.2. </span>Relative
+ <h4 id=relative-length-units><span class=secno>5.3.2. </span>Relative
length units</h4>
<p>Relative units are:
@@ -662,7 +770,7 @@
"average character width" found?</span>
</table>
- <h5 id=the-em-unit><span class=secno>6.3.2.1. </span>The ‘<code
+ <h5 id=the-em-unit><span class=secno>5.3.2.1. </span>The ‘<code
class=property>em</code>’ unit</h5>
<p>The <dfn id=em title="em (unit)">em</dfn> unit is equal to the computed
@@ -703,7 +811,7 @@
</pre>
</div>
- <h5 id=the-ex-unit><span class=secno>6.3.2.2. </span>The ‘<code
+ <h5 id=the-ex-unit><span class=secno>5.3.2.2. </span>The ‘<code
class=property>ex</code>’ unit</h5>
<p>The <dfn id=ex title="x-height|ex (unit)">ex</dfn> unit is defined by
@@ -718,7 +826,7 @@
‘<code class=css>ex</code>’ units refer to the property's
<em>initial value</em>.
- <h5 id=the-px-unit><span class=secno>6.3.2.3. </span>The ‘<code
+ <h5 id=the-px-unit><span class=secno>5.3.2.3. </span>The ‘<code
class=property>px</code>’ unit</h5>
<p>The pixel unit, <dfn id=px title="pixel unit|px (pixel)">px</dfn> is
@@ -761,7 +869,7 @@
src=pixel2></p>
</div>
- <h5 id=the-rem-unit><span class=secno>6.3.2.4. </span>The ‘<code
+ <h5 id=the-rem-unit><span class=secno>5.3.2.4. </span>The ‘<code
class=property>rem</code>’ unit</h5>
<p>The <dfn id=rem title="root em|rem (unit)">rem</dfn> unit ("root em") is
@@ -773,7 +881,7 @@
‘<code class=css>rem</code>’ units refer to the property's
<em>initial value</em>.
- <h5 id=the-vw-unit><span class=secno>6.3.2.5. </span>The ‘<code
+ <h5 id=the-vw-unit><span class=secno>5.3.2.5. </span>The ‘<code
class=property>vw</code>’ unit</h5>
<p>The <dfn id=vw title="vw (unit)">vw</dfn> unit is relative to the
@@ -794,7 +902,7 @@
enlarged), lengths specified in the ‘<code
class=property>vw</code>’ unit are scaled proportionally.
- <h5 id=the-vh-unit><span class=secno>6.3.2.6. </span>The ‘<code
+ <h5 id=the-vh-unit><span class=secno>5.3.2.6. </span>The ‘<code
class=property>vh</code>’ unit</h5>
<p>The <dfn id=vh title="vh (unit)">vh</dfn> unit is relative to the
@@ -804,7 +912,7 @@
specified in the ‘<code class=property>vh</code>’ unit are
scaled proportionally.
- <h5 id=the-vm-unit><span class=secno>6.3.2.7. </span>The ‘<code
+ <h5 id=the-vm-unit><span class=secno>5.3.2.7. </span>The ‘<code
class=property>vm</code>’ unit</h5>
<p class=issue>Do we need this now that we have the min() function?
@@ -816,7 +924,7 @@
is changed, lengths specified in the ‘<code
class=property>vm</code>’ unit are scaled proportionally.
- <h4 id=the-calc-min-and-max-functions><span class=secno>6.3.3. </span>The
+ <h4 id=the-calc-min-and-max-functions><span class=secno>5.3.3. </span>The
‘<a href="#calc"><code class=property>calc</code></a>’,
‘<a href="#min"><code class=property>min</code></a>’ and
‘<a href="#max"><code class=property>max</code></a>’ functions</h4>
@@ -923,12 +1031,12 @@
and fixed layout tables are treated as if ‘<code
class=property>auto</code>’ had been specified.
- <h3 id=ltstringgt><span class=secno>6.4. </span><string></h3>
+ <h3 id=ltstringgt><span class=secno>5.4. </span><string></h3>
<p>Strings are denoted by <dfn id=ltstringgt0><string></dfn> in the
value definitions.
- <h3 id=ltcolorgt><span class=secno>6.5. </span><color></h3>
+ <h3 id=ltcolorgt><span class=secno>5.5. </span><color></h3>
<p><em>This section is not normative. The CSS3 Color module <a
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
@@ -950,7 +1058,7 @@
</pre>
</div>
- <h3 id=ltpercentagegt><span class=secno>6.6. </span><percentage></h3>
+ <h3 id=ltpercentagegt><span class=secno>5.6. </span><percentage></h3>
<p>The format of a percentage value, denoted by <dfn id=ltpercentagegt0
title="<percentage>::definition of"><percentage></dfn>, is a
@@ -985,7 +1093,7 @@
<p class=issue>Do we need a "non-negative percentage", e.g. for
"font-size"?
- <h3 id=ltanglegt><span class=secno>6.7. </span><angle></h3>
+ <h3 id=ltanglegt><span class=secno>5.7. </span><angle></h3>
<p>Angle values (denoted by <dfn id=ltanglegt0
title="<angle>::definition of"><angle></dfn> in the text) are
@@ -1014,7 +1122,7 @@
or ‘<code class=css>100grad</code>’ or ‘<code
class=css>1.570796326794897rad</code>’.
- <h3 id=lttimegt><span class=secno>6.8. </span><time></h3>
+ <h3 id=lttimegt><span class=secno>5.8. </span><time></h3>
<p>Time values are denoted by <dfn id=lttimegt0
title="<time>::definition of"><time></dfn> in the text. Their
@@ -1032,7 +1140,7 @@
<p>Time values are always positive.
- <h3 id=ltfrequencygt><span class=secno>6.9. </span><frequency></h3>
+ <h3 id=ltfrequencygt><span class=secno>5.9. </span><frequency></h3>
<p>Frequency values (denoted by <dfn id=ltfrequencygt0
title="<frequency>::definition of"><frequency></dfn> in the
@@ -1055,7 +1163,7 @@
<p>Frequency values are always positive.
- <h3 id=ltattrgt><span class=secno>6.10. </span><attr></h3>
+ <h3 id=ltattrgt><span class=secno>5.10. </span><attr></h3>
<p class=issue>Describe the feature fully here, not just a delta from CSS
21.
@@ -1250,7 +1358,7 @@
UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color:
attr(COLOR, color) }</tt>.
- <h3 id=uris><span class=secno>6.11. </span><url></h3>
+ <h3 id=uris><span class=secno>5.11. </span><url></h3>
<p><dfn id=urls title="Uniform Resource Locator (URL)|URL (Uniform Resource
Locator)">URLs</dfn> (Uniform Resource Locators, see <a href="#RFC1738"
@@ -1324,7 +1432,7 @@
<p>User agents may vary in how they handle URIs that designate unavailable
or inapplicable resources.
- <h3 id=ltimagegt><span class=secno>6.12. </span><image></h3>
+ <h3 id=ltimagegt><span class=secno>5.12. </span><image></h3>
<p>TBD. <!--
<h4>The 'counter' function</h4>
@@ -1362,13 +1470,13 @@
-->
- <h3 id=ltfractiongt><span class=secno>6.13. </span><fraction></h3>
+ <h3 id=ltfractiongt><span class=secno>5.13. </span><fraction></h3>
<p>Some properties accept a series of length values that, in sum, should
add up to a certain length. To take up any remaining space, fractions can
be used.
- <h4 id=the-fr-unit><span class=secno>6.13.1. </span>The ‘<code
+ <h4 id=the-fr-unit><span class=secno>5.13.1. </span>The ‘<code
class=property>fr</code>’ unit</h4>
<p>The <dfn id=fr title="fr (unit)">fr</dfn> unit is used to distribute any
@@ -1386,7 +1494,7 @@
<p>The ‘<code class=css>fr</code>’ unit can only be used in
combination with regular length units.
- <h3 id=ltgridgt><span class=secno>6.14. </span><grid></h3>
+ <h3 id=ltgridgt><span class=secno>5.14. </span><grid></h3>
<p>A grid is a set of invisible vertical and horizontal lines that can be
used to align content. In CSS3, a grid lines can be established implicitly
@@ -1396,7 +1504,7 @@
distance between grid lines can be referred to by the ‘<code
class=css>gr</code>’ unit.
- <h4 id=the-gr-unit><span class=secno>6.14.1. </span>The ‘<code
+ <h4 id=the-gr-unit><span class=secno>5.14.1. </span>The ‘<code
class=property>gr</code>’ unit</h4>
<p>The <dfn id=gr title="gr (unit)">gr</dfn> unit is used to position
@@ -1451,7 +1559,7 @@
</div>
-->
- <h2 id=specified-computed-used-and-actual-value><span class=secno>7.
+ <h2 id=specified-computed-used-and-actual-value><span class=secno>6.
</span>Specified, computed, used, and actual values</h2>
<p>The final value of a CSS3 property for a given element is the result of
@@ -1467,14 +1575,14 @@
href="#actual-value"><em>actual value</em></a> based on constraints in the
user agent.
- <h3 id=finding-the-specified-value><span class=secno>7.1. </span>Finding
+ <h3 id=finding-the-specified-value><span class=secno>6.1. </span>Finding
the <dfn id=specified-value>specified value</dfn></h3>
<p>The <a href="#specified-value"><em>specified value</em></a> is the
output of the cascading and inheritance process <a href="#CSS3CASCADE"
rel=biblioentry>[CSS3CASCADE]<!--{{!CSS3CASCADE}}--></a>.
- <h3 id=finding-the-computed-value><span class=secno>7.2. </span>Finding the
+ <h3 id=finding-the-computed-value><span class=secno>6.2. </span>Finding the
<dfn id=computed-value>computed value</dfn></h3>
<p>Specified values may be absolute (i.e., they are not specified relative
@@ -1500,7 +1608,7 @@
computed value of invalid and absolute URIs is the same as the specified
value.
- <h3 id=finding-the-used-value><span class=secno>7.3. </span>Finding the
+ <h3 id=finding-the-used-value><span class=secno>6.3. </span>Finding the
<dfn id=used-value>used value</dfn></h3>
<p>Computed values are processed as far as possible without formatting the
@@ -1511,7 +1619,7 @@
value is the result of taking the computed value and resolving any
remaining dependencies into an absolute value.
- <h3 id=finding-the-actual-value><span class=secno>7.4. </span>Finding the
+ <h3 id=finding-the-actual-value><span class=secno>6.4. </span>Finding the
<dfn id=actual-value>actual value</dfn></h3>
<p>A used value is in principle ready to be used, but a user agent may not
@@ -1792,16 +1900,6 @@
</dd>
<!---->
- <dt id=CSS3FONT>[CSS3FONT]
-
- <dd>John Daggett. <a
- href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324"><cite>CSS Fonts
- Module Level 3.</cite></a> 24 March 2011. W3C Working Draft. (Work in
- progress.) URL: <a
- href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324">http://www.w3.org/TR/2011/WD-css3-fonts-20110324</a>
- </dd>
- <!---->
-
<dt id=CSS3GRID>[CSS3GRID]
<dd>Alex Mogilevsky; Markus Mielke. <a
@@ -1868,168 +1966,168 @@
<ul class=indexlist>
<li>absolute length units, <a href="#absolute-length-units"
- title="absolute length units"><strong>6.3.</strong></a>
+ title="absolute length units"><strong>5.3.</strong></a>
<li>actual value, <a href="#actual-value" title="actual
- value"><strong>7.4.</strong></a>
+ value"><strong>6.4.</strong></a>
<li><angle>
<ul>
<li>definition of, <a href="#ltanglegt0" title="<angle>,
- definition of"><strong>6.7.</strong></a>
+ definition of"><strong>5.7.</strong></a>
</ul>
- <li>calc(), <a href="#calc" title="calc()"><strong>6.3.3.</strong></a>
+ <li>calc(), <a href="#calc" title="calc()"><strong>5.3.3.</strong></a>
- <li>color, <a href="#color" title=color><strong>6.5.</strong></a>
+ <li>color, <a href="#color" title=color><strong>5.5.</strong></a>
<li><color>, <a href="#ltcolorgt0"
- title="<color>"><strong>6.5.</strong></a>
+ title="<color>"><strong>5.5.</strong></a>
<li>compound value, <a href="#compound-value" title="compound
- value"><strong>4.6.</strong></a>
+ value"><strong>3.6.</strong></a>
<li>computed value, <a href="#computed-value" title="computed
- value"><strong>7.2.</strong></a>
+ value"><strong>6.2.</strong></a>
<li>deg (degrees), <a href="#deg" title="deg
- (degrees)"><strong>6.7.</strong></a>
+ (degrees)"><strong>5.7.</strong></a>
<li>em (unit), <a href="#em" title="em
- (unit)"><strong>6.3.2.1.</strong></a>
+ (unit)"><strong>5.3.2.1.</strong></a>
<li>ex (unit), <a href="#ex" title="ex
- (unit)"><strong>6.3.2.2.</strong></a>
+ (unit)"><strong>5.3.2.2.</strong></a>
<li><frequency>
<ul>
<li>definition of, <a href="#ltfrequencygt0" title="<frequency>,
- definition of"><strong>6.9.</strong></a>
+ definition of"><strong>5.9.</strong></a>
</ul>
<li>fr (unit), <a href="#fr" title="fr
- (unit)"><strong>6.13.1.</strong></a>
+ (unit)"><strong>5.13.1.</strong></a>
<li>functional notation, <a href="#functional-notation0" title="functional
- notation"><strong>4.6.</strong></a>
+ notation"><strong>3.6.</strong></a>
<li>grad (grads), <a href="#grad" title="grad
- (grads)"><strong>6.7.</strong></a>
+ (grads)"><strong>5.7.</strong></a>
<li>gr (unit), <a href="#gr" title="gr
- (unit)"><strong>6.14.1.</strong></a>
+ (unit)"><strong>5.14.1.</strong></a>
- <li>Hz (Hertz), <a href="#hz" title="Hz (Hertz)"><strong>6.9.</strong></a>
+ <li>Hz (Hertz), <a href="#hz" title="Hz (Hertz)"><strong>5.9.</strong></a>
<li>identifier, <a href="#identifier"
- title=identifier><strong>4.4.</strong></a>
+ title=identifier><strong>3.4.</strong></a>
- <li>integer, <a href="#integer" title=integer><strong>4.1.</strong></a>
+ <li>integer, <a href="#integer" title=integer><strong>3.1.</strong></a>
<li><integer>, <a href="#ltintegergt0"
- title="<integer>"><strong>6.1.</strong></a>
+ title="<integer>"><strong>5.1.</strong></a>
<li>kHz (kilohertz), <a href="#khz" title="kHz
- (kilohertz)"><strong>6.9.</strong></a>
+ (kilohertz)"><strong>5.9.</strong></a>
<li><length>, <a href="#ltlengthgt0"
- title="<length>"><strong>6.3.</strong></a>
+ title="<length>"><strong>5.3.</strong></a>
- <li>max(), <a href="#max" title="max()"><strong>6.3.3.</strong></a>
+ <li>max(), <a href="#max" title="max()"><strong>5.3.3.</strong></a>
- <li>min(), <a href="#min" title="min()"><strong>6.3.3.</strong></a>
+ <li>min(), <a href="#min" title="min()"><strong>5.3.3.</strong></a>
<li>ms (milliseconds), <a href="#ms" title="ms
- (milliseconds)"><strong>6.8.</strong></a>
+ (milliseconds)"><strong>5.8.</strong></a>
- <li>newline, <a href="#newline" title=newline>4.5.</a>
+ <li>newline, <a href="#newline" title=newline>3.5.</a>
- <li>number, <a href="#number" title=number><strong>4.2.</strong></a>
+ <li>number, <a href="#number" title=number><strong>3.2.</strong></a>
<li><number>, <a href="#ltnumbergt0"
- title="<number>"><strong>6.2.</strong></a>, <a href="#ltnumbergt1"
- title="<number>">6.6.</a>, <a href="#ltnumbergt2"
- title="<number>">6.7.</a>, <a href="#ltnumbergt3"
- title="<number>">6.8.</a>, <a href="#ltnumbergt4"
- title="<number>">6.9.</a>
+ title="<number>"><strong>5.2.</strong></a>, <a href="#ltnumbergt1"
+ title="<number>">5.6.</a>, <a href="#ltnumbergt2"
+ title="<number>">5.7.</a>, <a href="#ltnumbergt3"
+ title="<number>">5.8.</a>, <a href="#ltnumbergt4"
+ title="<number>">5.9.</a>
<li>number with a unit identifier, <a
href="#number-with-a-unit-identifier" title="number with a unit
- identifier"><strong>4.3.</strong></a>
+ identifier"><strong>3.3.</strong></a>
<li><percentage>
<ul>
<li>definition of, <a href="#ltpercentagegt0" title="<percentage>,
- definition of"><strong>6.6.</strong></a>
+ definition of"><strong>5.6.</strong></a>
</ul>
<li>pixel unit, <a href="#px" title="pixel
- unit"><strong>6.3.2.3.</strong></a>
+ unit"><strong>5.3.2.3.</strong></a>
<li>px (pixel), <a href="#px" title="px
- (pixel)"><strong>6.3.2.3.</strong></a>
+ (pixel)"><strong>5.3.2.3.</strong></a>
<li>rad (radians), <a href="#rad" title="rad
- (radians)"><strong>6.7.</strong></a>
+ (radians)"><strong>5.7.</strong></a>
<li>reference pixel, <a href="#reference-pixel" title="reference
- pixel"><strong>6.3.2.3.</strong></a>
+ pixel"><strong>5.3.2.3.</strong></a>
<li>Relative length units, <a href="#relative-length-units0"
- title="Relative length units"><strong>6.3.</strong></a>
+ title="Relative length units"><strong>5.3.</strong></a>
<li>rem (unit), <a href="#rem" title="rem
- (unit)"><strong>6.3.2.4.</strong></a>
+ (unit)"><strong>5.3.2.4.</strong></a>
<li>Resource Identifier (URI), <a href="#uris0" title="Resource Identifier
- (URI)"><strong>6.11.</strong></a>
+ (URI)"><strong>5.11.</strong></a>
- <li>root em, <a href="#rem" title="root em"><strong>6.3.2.4.</strong></a>
+ <li>root em, <a href="#rem" title="root em"><strong>5.3.2.4.</strong></a>
<li>simple value, <a href="#simple-value" title="simple
- value"><strong>4.6.</strong></a>
+ value"><strong>3.6.</strong></a>
<li>specified value, <a href="#specified-value" title="specified
- value"><strong>7.1.</strong></a>
+ value"><strong>6.1.</strong></a>
<li>s (seconds), <a href="#s" title="s
- (seconds)"><strong>6.8.</strong></a>
+ (seconds)"><strong>5.8.</strong></a>
- <li>string, <a href="#string" title=string><strong>4.5.</strong></a>
+ <li>string, <a href="#string" title=string><strong>3.5.</strong></a>
<li><string>, <a href="#ltstringgt0"
- title="<string>"><strong>6.4.</strong></a>
+ title="<string>"><strong>5.4.</strong></a>
<li><time>
<ul>
<li>definition of, <a href="#lttimegt0" title="<time>, definition
- of"><strong>6.8.</strong></a>
+ of"><strong>5.8.</strong></a>
</ul>
- <li>turn, <a href="#turn" title=turn><strong>6.7.</strong></a>
+ <li>turn, <a href="#turn" title=turn><strong>5.7.</strong></a>
<li>Uniform Resource Locator (URL), <a href="#urls" title="Uniform
- Resource Locator (URL)"><strong>6.11.</strong></a>
+ Resource Locator (URL)"><strong>5.11.</strong></a>
<li>URI (Uniform Resource Identifier), <a href="#uris0" title="URI
- (Uniform Resource Identifier)"><strong>6.11.</strong></a>
+ (Uniform Resource Identifier)"><strong>5.11.</strong></a>
<li>URL (Uniform Resource Locator), <a href="#urls" title="URL (Uniform
- Resource Locator)"><strong>6.11.</strong></a>
+ Resource Locator)"><strong>5.11.</strong></a>
<li>used value, <a href="#used-value" title="used
- value"><strong>7.3.</strong></a>
+ value"><strong>6.3.</strong></a>
<li>vh (unit), <a href="#vh" title="vh
- (unit)"><strong>6.3.2.6.</strong></a>
+ (unit)"><strong>5.3.2.6.</strong></a>
<li>vm (unit), <a href="#vm" title="vm
- (unit)"><strong>6.3.2.7.</strong></a>
+ (unit)"><strong>5.3.2.7.</strong></a>
<li>vw (unit), <a href="#vw" title="vw
- (unit)"><strong>6.3.2.5.</strong></a>
+ (unit)"><strong>5.3.2.5.</strong></a>
- <li>x-height, <a href="#ex" title=x-height><strong>6.3.2.2.</strong></a>
+ <li>x-height, <a href="#ex" title=x-height><strong>5.3.2.2.</strong></a>
</ul>
<!--end-index-->
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.src.html,v
retrieving revision 1.73
retrieving revision 1.74
diff -u -d -r1.73 -r1.74
--- Overview.src.html 10 Aug 2011 23:41:23 -0000 1.73
+++ Overview.src.html 10 Aug 2011 23:42:05 -0000 1.74
@@ -12,6 +12,10 @@
tt.declaration { white-space: nowrap }
.del { text-decoration: line-through}
.say { font-style: italic }
+ .value { font: inherit; white-space: pre-wrap; margin: 0; padding: 0; }
+ #propvalues td { text-align: right; }
+ #propvalues td + td { text-align: left; }
+ p { text-indent: 0 !important; margin: 1em 0 !important; }
</style>
<link rel="stylesheet" type="text/css" href="../default.css">
<link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
@@ -82,36 +86,131 @@
<!--toc-->
-<h2>Dependencies on other modules</h2>
+<h2>Introduction</h2>
-<p>This CSS3 module depends on the following other CSS3 modules:</p>
+ <p>The value definition field of each CSS property can contain keywords,
+ data types (which appear between ''<'' and ''>''), and information on how
+ they can be combined.
+ Generic data types (<code><length></code> being the most widely used)
+ that can be used by many properties are described in this specification,
+ while more specific data types (e.g., <code><border-width></code>)
+ are described in the corresponding modules.
-<ul>
- <li><cite>Cascading and Inheritance</cite> [[!CSS3CASCADE]], which describes how to find the
- <cite>resulting value</cite> from several competing values. Also, it describes how
- to replace the "inherit" keyword with the inherited value.</li>
- <li><cite>Syntax</cite> [[!CSS3SYN]], which describes the syntax of values at the
- lexical level.</li>
- <li><cite>Color</cite> [[!CSS3COLOR]], which defines additional values used for some properties that control color of text, borders, etc</li>
- <li><cite>Fonts</cite> [[!CSS3FONT]], which describes additional values used for font-related properties</li>
-</ul>
+<h3 id="placement">
+Module Interactions</h3>
+ <p>This module replaces and extends the data type definitions in [[!CSS21]]
+ sections
+ <a href="http://www.w3.org/TR/CSS21/about.html#value-defs">1.4.2.1</a>,
+ <a href="http://www.w3.org/TR/CSS21/syndata.html#values">4.3</a>,
+ and <a href="http://www.w3.org/TR/CSS21/aural.html#aural-intro">A.2</a>.
-<h2>Introduction</h2>
+<h2 id="value-defs">
+Value Definition Syntax</h2>
-<p>By setting property values on elements in a document, style sheets
-express the appearance of the document. In order to express rich
-designs, a wide range of values and associated units are necessary.
-This specification describes the various types of values and units that
-can be used in CSS style sheets.
+ <p>The syntax described here is used to define the set of valid values
+ for CSS properties. A property value can have one or more components.
+<h3 id="value-types">
+Component value types</h3>
-<h2>Value definitions</h2>
+ <p>Component value types are designated in several ways:
-<p>Each CSS property has a value definition field in the property description.
-The value definition describes what types of values the property accepts. The
-syntax used in the value definitions field is <a href="http://www.w3.org/TR/css3-syntax/#property-def-value">defined</a> in [[!CSS3SYN]].
+ <ol>
+ <li><a href="#keyword">keyword</a> values (such as ''auto'', ''disc'', etc.),
+ which appear literally, without quotes (e.g. <code>auto</code>)
+
+ <li>basic data types, which appear between ''<'' and ''>''
+ (e.g., <code><length></code>, <code><percentage></code>, etc.).
+
+ <li>types that have the same range of values as a property bearing
+ the same name
+ (e.g., <code><'border-width'></code> <code><'background-attachment'></code>, etc.).
+ In this case, the type name is the property name (complete with quotes)
+ between the brackets. Such a type does <em>not</em>
+ include the value 'inherit'.
+
+ <li>non-terminals that do not share the same name as a property. In this
+ case, the non-terminal name appears between ''<'' and ''>'', as in
+ <code><spacing></code>. Notice the distinction between
+ <code><border-width></code> and <code><'border-width'></code>:
+ the latter is defined as the value of the 'border-width' property,
+ the former requires an explicit expansion elsewhere.
+ The definition of a non-terminal is located near its first appearance
+ in the specification.
+ </ol>
+ <p>Some property value definitions also include the slash (/) and/or the
+ comma (,) as literals. These represent their corresponding tokens.
+
+<h3 id="value-types">
+Component value combinators</h3>
+
+ <p>Component values can be arranged into property values as follows:
+
+ <ul>
+ <li>Several juxtaposed words mean that all of them must occur, in the
+ given order.
+ <li>A double ampersand (&&) separates two or more components,
+ all of which must occur, in any order.
+ <li>A double bar (||) separates two or more options:
+ one or more of them must occur, in any order.
+ <li>A bar (|) separates two or more alternatives:
+ exactly one of them must occur.
+ <li>Brackets ([ ]) are for grouping.
+ </ul>
+
+ <p>Juxtaposition is stronger than the double ampersand, the double
+ ampersand is stronger than the double bar, and the double bar
+ is stronger than the bar. Thus, the following lines are equivalent:
+ <pre>
+<!----> a b | c || d && e f
+<!---->[ a b ] | [ c || [ d && [ e f ]]]</pre>
+
+<h3 id="value-types">
+Component value multipliers</h3>
+
+ <p>Every type, keyword, or bracketed group may be followed by one of
+ the following modifiers:</p>
+
+ <ul>
+ <li>An asterisk (*) indicates that the preceding type, word, or
+ group occurs zero or more times.
+
+ <li>A plus (+) indicates that the preceding type, word, or group
+ occurs one or more times.
+
+ <li>A question mark (?) indicates that the preceding type, word, or
+ group is optional.
+
+ <li>A pair of numbers in curly braces ({<var>A</var>,<var>B</var>})
+ indicates that the preceding type, word, or group occurs at least
+ <var>A</var> and at most <var>B</var> times.
+ </ul>
+
+<h3 id="value-types">
+Component values and white space</h3>
+
+ <p>Component values are specified in terms of tokens, as described in <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#tokenization">Chapter 4</a>
+ of [[!CSS21]].
+ As the grammar allows spaces between tokens in the components of the
+ <code>value</code> production, spaces may appear between tokens in
+ property values.
+
+ <p class=note>Note: In many cases, spaces will in fact be
+ <em>required</em> between tokens in order to distinguish them from
+ each other. For example, the value ''1em2em'' would be parsed as a
+ single <code>DIMEN</code> token with the number ''1'' and the identifier
+ ''em2em'', which is an invalid unit. In this case, a space would be
+ required before the ''2'' to get this parsed as the two lengths ''1em''
+ and ''2em''.
+
+<h3 id="value-types">
+Property value examples</h3>
+
+ <p>Below are some examples of properties with their corresponding value
+ definition fields
<div class=example>
<p>Here are some sample properties with corresponding value definition fields:
@@ -125,8 +224,6 @@
</table>
</div>
-<p>The value definition fields contain keywords, data types (which appear between "<" and ">", and information on how they can be combined. Generic data types (<length> being the most widely used) that can be used by many properties are described in this specification, while more specific data types (e.g., <border-width>) are described in the corresponding modules.
-
<h2>Syntax and terminology</h2>
<p>The generic data types described in the next sections use some
Received on Wednesday, 10 August 2011 23:42:10 UTC