- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 11 Aug 2011 01:08:24 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-values
In directory hutz:/tmp/cvs-serv15668
Modified Files:
Overview.html Overview.src.html
Log Message:
Generic Datatype Reorganization Part VI: Shift <image> and <color> into their own subsection, grid and fr into their own subsection
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.html,v
retrieving revision 1.77
retrieving revision 1.78
diff -u -d -r1.77 -r1.78
--- Overview.html 10 Aug 2011 23:45:29 -0000 1.77
+++ Overview.html 11 Aug 2011 01:08:22 -0000 1.78
@@ -29,13 +29,13 @@
<h1 id=css3-template>CSS3 Values and Units</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 August 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 August 2011</h2>
<dl>
<dt>This version:
<dd><a
- href="http://www.w3.org/TR/2011/ED-css3-values-20110810/">http://www.w3.org/TR/2011/ED-css3-values-20110810/</a>
+ href="http://www.w3.org/TR/2011/ED-css3-values-20110811/">http://www.w3.org/TR/2011/ED-css3-values-20110811/</a>
<dt>Latest version:
@@ -248,48 +248,51 @@
class=css><frequency></code>’ type and ‘<code
class=css>Hz</code>’, ‘<code class=css>kHz</code>’
units</a>
- <ul class=toc>
- <li><a href="#the-calc-min-and-max-functions"><span class=secno>7.3.1.
- </span>The ‘<code class=property>calc</code>’,
- ‘<code class=property>min</code>’ and ‘<code
- class=property>max</code>’ functions</a>
- </ul>
+ </ul>
- <li><a href="#ltcolorgt"><span class=secno>7.4. </span><color></a>
-
+ <li><a href="#defined-elsewhere"><span class=secno>8. </span> Data Types
+ Defined Elsewhere</a>
+ <ul class=toc>
+ <li><a href="#colors"><span class=secno>8.1. </span> Colors: the
+ ‘<code class=css><color></code>’ type</a>
- <li><a href="#ltattrgt"><span class=secno>7.5. </span><attr></a>
+ <li><a href="#images"><span class=secno>8.2. </span> Images: the
+ ‘<code class=css><image></code>’ type</a>
+ </ul>
- <li><a href="#ltimagegt"><span class=secno>7.6. </span><image></a>
-
+ <li><a href="#layout-values"><span class=secno>9. </span> Layout-specific
+ Data Types</a>
+ <ul class=toc>
+ <li><a href="#proportions"><span class=secno>9.1. </span> Proportions:
+ the ‘<code class=css><fraction></code>’ type and
+ ‘<code class=css>fr</code>’ unit</a>
- <li><a href="#ltfractiongt"><span class=secno>7.7.
- </span><fraction></a>
+ <li><a href="#grids"><span class=secno>9.2. </span> Grid Units: the
+ ‘<code class=css><grid></code>’ type and ‘<code
+ class=css>gr</code>’ unit</a>
<ul class=toc>
- <li><a href="#the-fr-unit"><span class=secno>7.7.1. </span>The
- ‘<code class=property>fr</code>’ unit</a>
+ <li><a href="#the-calc-min-and-max-functions"><span class=secno>9.2.1.
+ </span>The ‘<code class=property>calc</code>’,
+ ‘<code class=property>min</code>’ and ‘<code
+ class=property>max</code>’ functions</a>
</ul>
- <li><a href="#ltgridgt"><span class=secno>7.8. </span><grid></a>
- <ul class=toc>
- <li><a href="#the-gr-unit"><span class=secno>7.8.1. </span>The
- ‘<code class=property>gr</code>’ unit</a>
- </ul>
+ <li><a href="#ltattrgt"><span class=secno>9.3. </span><attr></a>
</ul>
<li><a href="#specified-computed-used-and-actual-value"><span
- class=secno>8. </span>Specified, computed, used, and actual values</a>
+ class=secno>10. </span>Specified, computed, used, and actual values</a>
<ul class=toc>
- <li><a href="#finding-the-specified-value"><span class=secno>8.1.
+ <li><a href="#finding-the-specified-value"><span class=secno>10.1.
</span>Finding the specified value</a>
- <li><a href="#finding-the-computed-value"><span class=secno>8.2.
+ <li><a href="#finding-the-computed-value"><span class=secno>10.2.
</span>Finding the computed value</a>
- <li><a href="#finding-the-used-value"><span class=secno>8.3.
+ <li><a href="#finding-the-used-value"><span class=secno>10.3.
</span>Finding the used value</a>
- <li><a href="#finding-the-actual-value"><span class=secno>8.4.
+ <li><a href="#finding-the-actual-value"><span class=secno>10.4.
</span>Finding the actual value</a>
</ul>
@@ -1224,7 +1227,84 @@
<p>For example, when representing sound pitches, 200Hz (or 200hz) is a
bass sound, and 6kHz (or 6khz) is a treble sound.</p>
- <h4 id=the-calc-min-and-max-functions><span class=secno>7.3.1. </span>The
+ <h2 id=defined-elsewhere><span class=secno>8. </span> Data Types Defined
+ Elsewhere</h2>
+
+ <p>Some data types are defined in their own modules. The two common ones
+ are <a href="#color-value"><code><color></code></a> and <a
+ href="#image-value"><code><image></code></a>.
+
+ <h3 id=colors><span class=secno>8.1. </span> Colors: the ‘<a
+ href="#color-value"><code class=css><color></code></a>’ type</h3>
+
+ <p>The <dfn id=color-value><code><color></code></dfn> data type is
+ <a
+ href="http://www.w3.org/TR/CSS21/syndata.html#color-units">defined</a>
+ in <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> and <a
+ href="http://www.w3.org/TR/css3-color/#colorunits">extended</a> in <a
+ href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>.
+ UAs that support CSS Color Level 3 must interpret <a
+ href="#color-value"><code><color></code></a> as defined therein.
+
+ <h3 id=images><span class=secno>8.2. </span> Images: the ‘<a
+ href="#image-value"><code class=css><image></code></a>’ type</h3>
+
+ <p>The <dfn id=image-value><code><image></code></dfn> data type is
+ defined herein as equivalent to <a
+ href="#url-value"><code><url></code></a>. It is <a
+ href="http://www.w3.org/TR/css3-images/#image">extended</a> in
+ [[!CSS3IMAGES]]: UAs that support CSS Image Values Level 3 must
+ interpret <a href="#image-value"><code><image></code></a> as
+ defined therein.
+
+ <h2 id=layout-values><span class=secno>9. </span> Layout-specific Data
+ Types</h2>
+
+ <h3 id=proportions><span class=secno>9.1. </span> Proportions: the
+ ‘<code class=css><fraction></code>’ type and ‘<a
+ href="#fr-unit"><code class=css>fr</code></a>’ unit</h3>
+
+ <p>The <dfn id=fr-unit title=fr>fr unit</dfn> is used to represent
+ proportions, such as the proportions used to distribute remaining space
+ in a flex layout computation. [[CSS3FLEX]] When multiple fractions
+ participate in a calculation, the remainder is distributed
+ proportionally to their numeric value.
+
+ <div class=example>
+ <pre>
+<!-- -->border-parts: 10px 1fr 10px;
+<!-- -->border-parts: 10px 1fr 10px 1fr 10px;
+<!-- -->border-parts: 10px 2fr 10px 2fr 10px;</pre>
+ </div>
+
+ <h3 id=grids><span class=secno>9.2. </span> Grid Units: the ‘<code
+ class=css><grid></code>’ type and ‘<a
+ href="#gr-unit"><code class=css>gr</code></a>’ unit</h3>
+
+ <p>A grid is a set of invisible vertical and horizontal lines that can be
+ used to align content. In CSS, grid lines can be established implicitly
+ (as in <a href="#CSS3COL"
+ rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>) or explicitly (as in <a
+ href="#CSS3GRID" rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a>). In
+ either case, the distance between grid lines can be referred to by the
+ <dfn id=gr-unit title=gr>‘<code class=css>gr</code>’
+ unit</dfn>.
+
+ <div class=example>
+ <pre>
+<!-- -->img {
+<!-- --> float: top left multicol;
+<!-- --> float-offset: 2gr;
+<!-- --> width: 1gr;
+<!-- -->}</pre>
+ </div>
+
+ <p>Grid lines can be laid out in uneven patterns. Therefore, the
+ ‘<a href="#gr-unit"><code class=css>gr</code></a>’ unit is
+ not linear. For example, "2gr" is not necessarily twice as long as
+ "1gr".
+
+ <h4 id=the-calc-min-and-max-functions><span class=secno>9.2.1. </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>’
@@ -1332,29 +1412,7 @@
both auto and fixed layout tables are treated as if ‘<code
class=property>auto</code>’ had been specified.
- <h3 id=ltcolorgt><span class=secno>7.4. </span><color></h3>
-
- <p><em>This section is not normative. The CSS3 Color module <a
- href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{!CSS3COLOR}}--></a>
- defines the CSS3 color values.</em>
-
- <p>Color values are denoted by <dfn id=ltcolorgt0><color></dfn> in
- the value definitions.
-
- <p>A <dfn id=color>color</dfn> value can either be a keyword, a numerical
- specification in a functional notation, or a numerical RGB specification
- in a hexadecimal notation. The hexadecimal notation is special shorthand
- format that allows compact color descriptions.
-
- <div class=example>
- <pre>
-em { color: #F00 }
-span.issue { color: red }
-* { color: hsl(120, 75%, 75%) }
-</pre>
- </div>
-
- <h3 id=ltattrgt><span class=secno>7.5. </span><attr></h3>
+ <h3 id=ltattrgt><span class=secno>9.3. </span><attr></h3>
<p class=issue>Describe the feature fully here, not just a delta from CSS
21.
@@ -1409,8 +1467,7 @@
<dd>The attribute value will be interpreted as a CSS <color> value.
The default is UA dependent but must be the same as the initial value
- of the ‘<a href="#color"><code
- class=property>color</code></a>’ property.
+ of the ‘<code class=property>color</code>’ property.
<dt>url
@@ -1551,11 +1608,7 @@
<p class=issue>Should ‘<code class=css>attr()</code>’ be
allowed on any property, in any source language? For example, do we
expect UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color:
- attr(COLOR, color) }</tt>.
-
- <h3 id=ltimagegt><span class=secno>7.6. </span><image></h3>
-
- <p>TBD. <!--
+ attr(COLOR, color) }</tt>. <!--
<h4>The 'counter' function</h4>
<p><dfn title="<counter>, definition of">Counters</dfn> are denoted by
@@ -1589,66 +1642,7 @@
</pre>
</div>
-->
-
-
- <h3 id=ltfractiongt><span class=secno>7.7. </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>7.7.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 remaining space in a series of length values. If multiple fractions
- are specified, they take up space proportionally to their numeric value.
-
-
- <div class=example>
- <pre>
-border-parts: 10px 1fr 10px;
-border-parts: 10px 1fr 10px 1fr 10px;
-border-parts: 10px 2fr 10px 2fr 10px;
-</pre>
- </div>
-
- <p>The ‘<code class=css>fr</code>’ unit can only be used in
- combination with regular length units.
-
- <h3 id=ltgridgt><span class=secno>7.8. </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 or explicitly <a href="#CSS3COL"
- rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <a href="#CSS3GRID"
- rel=biblioentry>[CSS3GRID]<!--{{!CSS3GRID}}--></a>. In any case, the
- distance between grid lines can be referred to by the ‘<code
- class=css>gr</code>’ unit.
-
- <h4 id=the-gr-unit><span class=secno>7.8.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
- elements in relation to grid lines.
-
- <div class=example>
- <pre>
-img {
- float: top left multicol;
- float-offset: 2gr;
- width: 1gr }
-}
-</pre>
- </div>
-
- <p>Grid lines can be laid out in uneven patterns. Therefore, the
- ‘<code class=css>gr</code>’ unit is not linear.
-
- <div class=example>
- <p>For example, "2gr" is not necessarily twice as long as "1gr".
- </div>
- <!--
+ <!--
<h3>Special cases</h3>
@@ -1680,8 +1674,9 @@
<pre>body { font-family: "Helvetica", "Univers", "Arial", sans-serif }</pre>
</div>
-->
-
- <h2 id=specified-computed-used-and-actual-value><span class=secno>8.
+
+
+ <h2 id=specified-computed-used-and-actual-value><span class=secno>10.
</span>Specified, computed, used, and actual values</h2>
<p>The final value of a CSS3 property for a given element is the result
@@ -1697,14 +1692,14 @@
the <a href="#actual-value"><em>actual value</em></a> based on
constraints in the user agent.</p>
- <h3 id=finding-the-specified-value><span class=secno>8.1. </span>Finding
+ <h3 id=finding-the-specified-value><span class=secno>10.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>8.2. </span>Finding
+ <h3 id=finding-the-computed-value><span class=secno>10.2. </span>Finding
the <dfn id=computed-value>computed value</dfn></h3>
<p>Specified values may be absolute (i.e., they are not specified
@@ -1731,7 +1726,7 @@
computed value of invalid and absolute URIs is the same as the specified
value.
- <h3 id=finding-the-used-value><span class=secno>8.3. </span>Finding the
+ <h3 id=finding-the-used-value><span class=secno>10.3. </span>Finding the
<dfn id=used-value>used value</dfn></h3>
<p>Computed values are processed as far as possible without formatting
@@ -1742,8 +1737,8 @@
determined. The used 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>8.4. </span>Finding the
- <dfn id=actual-value>actual value</dfn></h3>
+ <h3 id=finding-the-actual-value><span class=secno>10.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 be able to make use of the value in a given environment. For
@@ -2002,16 +1997,6 @@
</dd>
<!---->
- <dt id=CSS3COL>[CSS3COL]
-
- <dd>Håkon Wium Lie. <a
- href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
- Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
- Recommendation. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
- </dd>
- <!---->
-
<dt id=CSS3COLOR>[CSS3COLOR]
<dd>Tantek Çelik; Chris Lilley; L. David Baron. <a
@@ -2021,16 +2006,6 @@
href="http://www.w3.org/TR/2011/REC-css3-color-20110607">http://www.w3.org/TR/2011/REC-css3-color-20110607</a>
</dd>
<!---->
-
- <dt id=CSS3GRID>[CSS3GRID]
-
- <dd>Alex Mogilevsky; Markus Mielke. <a
- href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
- Positioning Module Level 3.</cite></a> 5 September 2007. W3C
- Working Draft. (Work in progress.) URL: <a
- href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
- </dd>
- <!---->
</dl>
<!--end-normative-->
<h3 class=no-num id=other-references>Other references</h3>
@@ -2049,6 +2024,26 @@
</dd>
<!---->
+ <dt id=CSS3COL>[CSS3COL]
+
+ <dd>Håkon Wium Lie. <a
+ href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412"><cite>CSS
+ Multi-column Layout Module.</cite></a> 12 April 2011. W3C Candidate
+ Recommendation. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2011/CR-css3-multicol-20110412">http://www.w3.org/TR/2011/CR-css3-multicol-20110412</a>
+ </dd>
+ <!---->
+
+ <dt id=CSS3GRID>[CSS3GRID]
+
+ <dd>Alex Mogilevsky; Markus Mielke. <a
+ href="http://www.w3.org/TR/2007/WD-css3-grid-20070905"><cite>CSS Grid
+ Positioning Module Level 3.</cite></a> 5 September 2007. W3C
+ Working Draft. (Work in progress.) URL: <a
+ href="http://www.w3.org/TR/2007/WD-css3-grid-20070905">http://www.w3.org/TR/2007/WD-css3-grid-20070905</a>
+ </dd>
+ <!---->
+
<dt id=CSS3NAMESPACE>[CSS3NAMESPACE]
<dd>Elika J. Etemad; Anne van Kesteren. <a
@@ -2077,25 +2072,23 @@
title="absolute length units"><strong>6.2.</strong></a>
<li>actual value, <a href="#actual-value" title="actual
- value"><strong>8.4.</strong></a>
+ value"><strong>10.4.</strong></a>
<li><angle>, <a href="#angle-value"
title="<angle>"><strong>7.1.</strong></a>
- <li>calc(), <a href="#calc" title="calc()"><strong>7.3.1.</strong></a>
+ <li>calc(), <a href="#calc" title="calc()"><strong>9.2.1.</strong></a>
<li>ch, <a href="#ch-unit" title=ch><strong>6.1.1.</strong></a>
- <li>color, <a href="#color" title=color><strong>7.4.</strong></a>
-
- <li><color>, <a href="#ltcolorgt0"
- title="<color>"><strong>7.4.</strong></a>
+ <li><a href="#color-value"><code><color></code></a>, <a
+ href="#color-value" title="<color>"><strong>8.1.</strong></a>
<li>compound value, <a href="#compound-value" title="compound
value"><strong>3.1.</strong></a>
<li>computed value, <a href="#computed-value" title="computed
- value"><strong>8.2.</strong></a>
+ value"><strong>10.2.</strong></a>
<li>deg, <a href="#deg" title=deg><strong>7.1.</strong></a>
@@ -2106,19 +2099,17 @@
<li>ex, <a href="#ex-unit" title=ex><strong>6.1.1.</strong></a>
+ <li>fr, <a href="#fr-unit" title=fr><strong>9.1.</strong></a>
+
<li><frequency>, <a href="#frequency-value"
title="<frequency>"><strong>7.3.</strong></a>
- <li>fr (unit), <a href="#fr" title="fr
- (unit)"><strong>7.7.1.</strong></a>
-
<li>functional notation, <a href="#functional-notation0"
title="functional notation"><strong>3.1.</strong></a>
- <li>grad, <a href="#grad" title=grad><strong>7.1.</strong></a>
+ <li>gr, <a href="#gr-unit" title=gr><strong>9.2.</strong></a>
- <li>gr (unit), <a href="#gr" title="gr
- (unit)"><strong>7.8.1.</strong></a>
+ <li>grad, <a href="#grad" title=grad><strong>7.1.</strong></a>
<li>Hz, <a href="#hz" title=Hz><strong>7.3.</strong></a>
@@ -2129,6 +2120,9 @@
href="#identifier-value"
title="<identifier>"><strong>4.2.</strong></a>
+ <li><a href="#image-value"><code><image></code></a>, <a
+ href="#image-value" title="<image>"><strong>8.2.</strong></a>
+
<li>‘<code class=css>inherit</code>’, <a href="#inherit"
title="''inherit''"><strong>4.1.1.</strong></a>
@@ -2146,9 +2140,9 @@
<li><a href="#length-value"><code><length></code></a>, <a
href="#length-value" title="<length>"><strong>6.</strong></a>
- <li>max(), <a href="#max" title="max()"><strong>7.3.1.</strong></a>
+ <li>max(), <a href="#max" title="max()"><strong>9.2.1.</strong></a>
- <li>min(), <a href="#min" title="min()"><strong>7.3.1.</strong></a>
+ <li>min(), <a href="#min" title="min()"><strong>9.2.1.</strong></a>
<li>ms, <a href="#ms" title=ms><strong>7.2.</strong></a>
@@ -2177,7 +2171,7 @@
value"><strong>3.1.</strong></a>
<li>specified value, <a href="#specified-value" title="specified
- value"><strong>8.1.</strong></a>
+ value"><strong>10.1.</strong></a>
<li><a href="#string-value"><code><string></code></a>, <a
href="#string-value" title="<string>"><strong>4.3.</strong></a>
@@ -2193,7 +2187,7 @@
href="#url-value" title="<url>"><strong>4.4.</strong></a>
<li>used value, <a href="#used-value" title="used
- value"><strong>8.3.</strong></a>
+ value"><strong>10.3.</strong></a>
<li>vh, <a href="#vh-unit" title=vh><strong>6.1.2.</strong></a>
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-values/Overview.src.html,v
retrieving revision 1.80
retrieving revision 1.81
diff -u -d -r1.80 -r1.81
--- Overview.src.html 10 Aug 2011 23:45:29 -0000 1.80
+++ Overview.src.html 11 Aug 2011 01:08:22 -0000 1.81
@@ -817,6 +817,72 @@
<p>For example, when representing sound pitches, 200Hz (or 200hz)
is a bass sound, and 6kHz (or 6khz) is a treble sound.</p>
+<h2 id="defined-elsewhere">
+Data Types Defined Elsewhere</h2>
+
+<p>Some data types are defined in their own modules. The two common
+ones are <code><color></code> and <code><image></code>.
+
+<h3 id="colors">
+Colors: the ''<color>'' type</h3>
+
+ <p>The <dfn id="color-value"><code><color></code></dfn> data type is
+ <a href="http://www.w3.org/TR/CSS21/syndata.html#color-units">defined</a>
+ in [[!CSS21]] and
+ <a href="http://www.w3.org/TR/css3-color/#colorunits">extended</a> in [[!CSS3COLOR]].
+ UAs that support CSS Color Level 3 must interpret <code><color></code>
+ as defined therein.
+
+<h3 id="images">
+Images: the ''<image>'' type</h3>
+
+ <p>The <dfn id="image-value"><code><image></code></dfn> data type is
+ defined herein as equivalent to <code><url></code>.
+ It is <a href="http://www.w3.org/TR/css3-images/#image">extended</a> in
+ [[!CSS3IMAGES]]: UAs that support CSS Image Values Level 3 must interpret
+ <code><image></code> as defined therein.
+
+<h2 id="layout-values">
+Layout-specific Data Types</h2>
+
+<h3 id="proportions">
+Proportions: the ''<fraction>'' type and ''fr'' unit</h3>
+
+ <p>The <dfn title="fr">fr unit</dfn> is used to represent proportions,
+ such as the proportions used to distribute remaining space in a flex
+ layout computation. [[CSS3FLEX]] When multiple fractions participate
+ in a calculation, the remainder is distributed proportionally to their
+ numeric value.
+
+ <div class="example">
+ <pre>
+<!-- -->border-parts: 10px 1fr 10px;
+<!-- -->border-parts: 10px 1fr 10px 1fr 10px;
+<!-- -->border-parts: 10px 2fr 10px 2fr 10px;</pre>
+ </div>
+
+<h3 id="grids">
+Grid Units: the ''<grid>'' type and ''gr'' unit</h3>
+
+ <p>A grid is a set of invisible vertical and horizontal lines that can
+ be used to align content. In CSS, grid lines can be established
+ implicitly (as in [[CSS3COL]]) or explicitly (as in [[CSS3GRID]]).
+ In either case, the distance between grid lines can be referred to by
+ the <dfn title="gr">''gr'' unit</dfn>.
+
+ <div class="example">
+ <pre>
+<!-- -->img {
+<!-- --> float: top left multicol;
+<!-- --> float-offset: 2gr;
+<!-- --> width: 1gr;
+<!-- -->}</pre>
+ </div>
+
+ <p>Grid lines can be laid out in uneven patterns. Therefore, the
+ ''gr'' unit is not linear. For example, "2gr" is not necessarily
+ twice as long as "1gr".
+
<h4>The 'calc', 'min' and 'max' functions</h4>
<p>The <dfn>calc()</dfn>, <dfn>min()</dfn>, and <dfn>max()</dfn> functions can be used wherever length, frequency, angle, time, or number values are allowed.
@@ -919,28 +985,6 @@
-<h3><color></h3>
-
-<p><em>This section is not normative. The CSS3 Color module [[!CSS3COLOR]] defines the CSS3 color values.</em>
-
-<p>Color values are denoted by <dfn><color></dfn> in the value
-definitions.
-
-<p>A <dfn>color</dfn> value can either be a keyword, a numerical
-specification in a functional notation, or a numerical RGB
-specification in a hexadecimal notation. The hexadecimal notation is
-special shorthand format that allows compact color descriptions.
-
-<div class="example">
-
-<pre>
-em { color: #F00 }
-span.issue { color: red }
-* { color: hsl(120, 75%, 75%) }
-</pre>
-
-</div>
-
<h3><attr></h3>
<p class=issue>Describe the feature fully here, not just a delta from CSS 21.
@@ -1136,13 +1180,6 @@
}</tt>.
-
-<h3><image></h3>
-
-<p>TBD.
-
-
-
<!--
<h4>The 'counter' function</h4>
@@ -1178,60 +1215,6 @@
</div>
-->
-
-<h3><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>The 'fr' unit</h4>
-
-<p>The <dfn title="fr (unit)">fr</dfn> unit is used to
-distribute any remaining space in a series of length values. If
-multiple fractions are specified, they take up space proportionally to
-their numeric value.
-
-<div class="example">
-<pre>
-border-parts: 10px 1fr 10px;
-border-parts: 10px 1fr 10px 1fr 10px;
-border-parts: 10px 2fr 10px 2fr 10px;
-</pre>
-</div>
-
-<p>The ''fr'' unit can only be used in combination with regular length units.
-
-
-<h3><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 or explicitly [[!CSS3COL]] [[!CSS3GRID]]. In any case,
-the distance between grid lines can be referred to by the ''gr'' unit.
-
-
-<h4>The 'gr' unit</h4>
-
-<p>The <dfn title="gr (unit)">gr</dfn> unit is used to position elements in relation to grid
-lines.
-
-<div class="example">
-<pre>
-img {
- float: top left multicol;
- float-offset: 2gr;
- width: 1gr }
-}
-</pre>
-</div>
-
-<p>Grid lines can be laid out in uneven patterns. Therefore, the ''gr'' unit is not linear.
-
-<div class="example">
-<p>For example, "2gr" is not necessarily twice as long as "1gr".
-</div>
-
<!--
<h3>Special cases</h3>
Received on Thursday, 11 August 2011 01:08:31 UTC