Skip to content

Commit 661fca0

Browse files
howcomhowcom
committed
x
1 parent b236516 commit 661fca0

1 file changed

Lines changed: 109 additions & 108 deletions

File tree

‎css3-values/Overview.html‎

Lines changed: 109 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -208,37 +208,37 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
208208

209209
<li><a href="#ltcolorgt"><span class=secno>6.5 </span>&lt;color&gt;</a>
210210

211-
<li><a href="#ltfractiongt"><span class=secno>6.6
212-
</span>&lt;fraction&gt;</a>
213-
<ul class=toc>
214-
<li><a href="#the-fr-unit"><span class=secno>6.6.1 </span>The
215-
&lsquo;<code class=property>fr</code>&rsquo; unit</a>
216-
</ul>
217-
218-
<li><a href="#ltgridgt"><span class=secno>6.7 </span>&lt;grid&gt;</a>
219-
<ul class=toc>
220-
<li><a href="#the-gr-unit"><span class=secno>6.7.1 </span>The
221-
&lsquo;<code class=property>gr</code>&rsquo; unit</a>
222-
</ul>
223-
224-
<li><a href="#ltpercentagegt-"><span class=secno>6.8
211+
<li><a href="#ltpercentagegt-"><span class=secno>6.6
225212
</span>&lt;percentage&gt; </a>
226213

227-
<li><a href="#ltanglegt-"><span class=secno>6.9 </span>&lt;angle&gt;
214+
<li><a href="#ltanglegt-"><span class=secno>6.7 </span>&lt;angle&gt;
228215
</a>
229216

230-
<li><a href="#lttimegt"><span class=secno>6.10 </span>&lt;time&gt;</a>
217+
<li><a href="#lttimegt"><span class=secno>6.8 </span>&lt;time&gt;</a>
231218

232-
<li><a href="#ltfrequencygt"><span class=secno>6.11
219+
<li><a href="#ltfrequencygt"><span class=secno>6.9
233220
</span>&lt;frequency&gt;</a>
234221

235-
<li><a href="#ltattrgt"><span class=secno>6.12 </span>&lt;attr&gt;</a>
222+
<li><a href="#ltattrgt"><span class=secno>6.10 </span>&lt;attr&gt;</a>
236223

237-
<li><a href="#uris"><span class=secno>6.13 </span>&lt;url&gt;</a>
224+
<li><a href="#uris"><span class=secno>6.11 </span>&lt;url&gt;</a>
238225

239-
<li><a href="#ltimagegt"><span class=secno>6.14 </span>&lt;image&gt;</a>
226+
<li><a href="#ltimagegt"><span class=secno>6.12 </span>&lt;image&gt;</a>
240227

241228

229+
<li><a href="#ltfractiongt"><span class=secno>6.13
230+
</span>&lt;fraction&gt;</a>
231+
<ul class=toc>
232+
<li><a href="#the-fr-unit"><span class=secno>6.13.1 </span>The
233+
&lsquo;<code class=property>fr</code>&rsquo; unit</a>
234+
</ul>
235+
236+
<li><a href="#ltgridgt"><span class=secno>6.14 </span>&lt;grid&gt;</a>
237+
<ul class=toc>
238+
<li><a href="#the-gr-unit"><span class=secno>6.14.1 </span>The
239+
&lsquo;<code class=property>gr</code>&rsquo; unit</a>
240+
</ul>
241+
242242
<li><a href="#special-cases"><span class=secno>6.15 </span>Special
243243
cases</a>
244244
<ul class=toc>
@@ -986,64 +986,7 @@ <h3 id=ltcolorgt><span class=secno>6.5 </span>&lt;color&gt;</h3>
986986
</pre>
987987
</div>
988988

989-
<h3 id=ltfractiongt><span class=secno>6.6 </span>&lt;fraction&gt;</h3>
990-
991-
<p>Some properties accept a series of length values that, in sum, should
992-
add up to a certain length. To take up any remaining space, fractions can
993-
be used.
994-
995-
<h4 id=the-fr-unit><span class=secno>6.6.1 </span>The &lsquo;<code
996-
class=property>fr</code>&rsquo; unit</h4>
997-
998-
<p>The <dfn id=fr title="fr (unit)">fr</dfn> unit is used to distribute any
999-
remaining space in a series of length values. If multiple fractions are
1000-
specified, they take up space proportionally to their numeric value.
1001-
1002-
<div class=example>
1003-
<pre>
1004-
border-parts: 10px 1fr 10px;
1005-
border-parts: 10px 1fr 10px 1fr 10px;
1006-
border-parts: 10px 2fr 10px 2fr 10px;
1007-
</pre>
1008-
</div>
1009-
1010-
<p>The &lsquo;<code class=css>fr</code>&rsquo; unit can only be used in
1011-
combination with regular length units.
1012-
1013-
<h3 id=ltgridgt><span class=secno>6.7 </span>&lt;grid&gt;</h3>
1014-
1015-
<p>A grid is a set of invisible vertical and horizontal lines that can be
1016-
used to align content. In CSS3, a grid lines can be established implicitly
1017-
or explicitly <a href="#CSS3COL"
1018-
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <a href="#CSS3GRID"
1019-
rel=biblioentry>[CSS3GRID]<!--{{!CSS3GRID}}--></a>. In any case, the
1020-
distance between grid lines can be referred to by the &lsquo;<code
1021-
class=css>gr</code>&rsquo; unit.
1022-
1023-
<h4 id=the-gr-unit><span class=secno>6.7.1 </span>The &lsquo;<code
1024-
class=property>gr</code>&rsquo; unit</h4>
1025-
1026-
<p>The <dfn id=gr title="gr (unit)">gr</dfn> unit is used to position
1027-
elements in relation to grid lines.
1028-
1029-
<div class=example>
1030-
<pre>
1031-
img {
1032-
float: top left multicol;
1033-
float-offset: 2gr;
1034-
width: 1gr }
1035-
}
1036-
</pre>
1037-
</div>
1038-
1039-
<p>Grid lines can be laid out in uneven patterns. Therefore, the
1040-
&lsquo;<code class=css>gr</code>&rsquo; unit is not linear.
1041-
1042-
<div class=example>
1043-
<p>For example, "2gr" is not necessarily twice as long as "1gr".
1044-
</div>
1045-
1046-
<h3 id=ltpercentagegt-><span class=secno>6.8 </span>&lt;percentage&gt;</h3>
989+
<h3 id=ltpercentagegt-><span class=secno>6.6 </span>&lt;percentage&gt;</h3>
1047990

1048991
<p>The format of a percentage value, denoted by <dfn id=ltpercentagegt
1049992
title="&lt;percentage&gt;::definition of">&lt;percentage&gt;</dfn>, is a
@@ -1078,7 +1021,7 @@ <h3 id=ltpercentagegt-><span class=secno>6.8 </span>&lt;percentage&gt;</h3>
10781021
<p class=issue>Do we need a "non-negative percentage", e.g. for
10791022
"font-size"?
10801023

1081-
<h3 id=ltanglegt-><span class=secno>6.9 </span>&lt;angle&gt;</h3>
1024+
<h3 id=ltanglegt-><span class=secno>6.7 </span>&lt;angle&gt;</h3>
10821025

10831026
<p>Angle values (denoted by <dfn id=ltanglegt
10841027
title="&lt;angle&gt;::definition of">&lt;angle&gt;</dfn> in the text) are
@@ -1106,7 +1049,7 @@ <h3 id=ltanglegt-><span class=secno>6.9 </span>&lt;angle&gt;</h3>
11061049
or &lsquo;<code class=css>100grad</code>&rsquo; or &lsquo;<code
11071050
class=css>1.570796326794897rad</code>&rsquo;.
11081051

1109-
<h3 id=lttimegt><span class=secno>6.10 </span>&lt;time&gt;</h3>
1052+
<h3 id=lttimegt><span class=secno>6.8 </span>&lt;time&gt;</h3>
11101053

11111054
<p>Time values are denoted by <dfn id=lttimegt0
11121055
title="&lt;time&gt;::definition of">&lt;time&gt;</dfn> in the text. Their
@@ -1123,7 +1066,7 @@ <h3 id=lttimegt><span class=secno>6.10 </span>&lt;time&gt;</h3>
11231066

11241067
<p>Time values are always positive.
11251068

1126-
<h3 id=ltfrequencygt><span class=secno>6.11 </span>&lt;frequency&gt;</h3>
1069+
<h3 id=ltfrequencygt><span class=secno>6.9 </span>&lt;frequency&gt;</h3>
11271070

11281071
<p>Frequency values (denoted by <dfn id=ltfrequencygt0
11291072
title="&lt;frequency&gt;::definition of">&lt;frequency&gt;</dfn> in the
@@ -1145,7 +1088,7 @@ <h3 id=ltfrequencygt><span class=secno>6.11 </span>&lt;frequency&gt;</h3>
11451088

11461089
<p>Frequency values are always positive.
11471090

1148-
<h3 id=ltattrgt><span class=secno>6.12 </span>&lt;attr&gt;</h3>
1091+
<h3 id=ltattrgt><span class=secno>6.10 </span>&lt;attr&gt;</h3>
11491092

11501093
<p>In CSS2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>,
11511094
the &lsquo;<code class=css>attr()</code>&rsquo; expression always returns
@@ -1334,7 +1277,7 @@ <h3 id=ltattrgt><span class=secno>6.12 </span>&lt;attr&gt;</h3>
13341277
UAs to honor this rule for HTML documents?: <tt>P[COLOR] { color:
13351278
attr(COLOR, color) }</tt>.
13361279

1337-
<h3 id=uris><span class=secno>6.13 </span>&lt;url&gt;</h3>
1280+
<h3 id=uris><span class=secno>6.11 </span>&lt;url&gt;</h3>
13381281

13391282
<p><dfn id=urls title="Uniform Resource Locator (URL)|URL (Uniform Resource
13401283
Locator)">URLs</dfn> (Uniform Resource Locators, see <a href="#RFC1738"
@@ -1408,7 +1351,7 @@ <h3 id=uris><span class=secno>6.13 </span>&lt;url&gt;</h3>
14081351
<p>User agents may vary in how they handle URIs that designate unavailable
14091352
or inapplicable resources.
14101353

1411-
<h3 id=ltimagegt><span class=secno>6.14 </span>&lt;image&gt;</h3>
1354+
<h3 id=ltimagegt><span class=secno>6.12 </span>&lt;image&gt;</h3>
14121355

14131356
<p>TBD. <!--
14141357
<h4>The &lsquo;<code class=property>counter</code>&rsquo; function</h4>
@@ -1446,6 +1389,63 @@ <h4>The &lsquo;<code class=property>counter</code>&rsquo; function</h4>
14461389
-->
14471390

14481391

1392+
<h3 id=ltfractiongt><span class=secno>6.13 </span>&lt;fraction&gt;</h3>
1393+
1394+
<p>Some properties accept a series of length values that, in sum, should
1395+
add up to a certain length. To take up any remaining space, fractions can
1396+
be used.
1397+
1398+
<h4 id=the-fr-unit><span class=secno>6.13.1 </span>The &lsquo;<code
1399+
class=property>fr</code>&rsquo; unit</h4>
1400+
1401+
<p>The <dfn id=fr title="fr (unit)">fr</dfn> unit is used to distribute any
1402+
remaining space in a series of length values. If multiple fractions are
1403+
specified, they take up space proportionally to their numeric value.
1404+
1405+
<div class=example>
1406+
<pre>
1407+
border-parts: 10px 1fr 10px;
1408+
border-parts: 10px 1fr 10px 1fr 10px;
1409+
border-parts: 10px 2fr 10px 2fr 10px;
1410+
</pre>
1411+
</div>
1412+
1413+
<p>The &lsquo;<code class=css>fr</code>&rsquo; unit can only be used in
1414+
combination with regular length units.
1415+
1416+
<h3 id=ltgridgt><span class=secno>6.14 </span>&lt;grid&gt;</h3>
1417+
1418+
<p>A grid is a set of invisible vertical and horizontal lines that can be
1419+
used to align content. In CSS3, a grid lines can be established implicitly
1420+
or explicitly <a href="#CSS3COL"
1421+
rel=biblioentry>[CSS3COL]<!--{{!CSS3COL}}--></a> <a href="#CSS3GRID"
1422+
rel=biblioentry>[CSS3GRID]<!--{{!CSS3GRID}}--></a>. In any case, the
1423+
distance between grid lines can be referred to by the &lsquo;<code
1424+
class=css>gr</code>&rsquo; unit.
1425+
1426+
<h4 id=the-gr-unit><span class=secno>6.14.1 </span>The &lsquo;<code
1427+
class=property>gr</code>&rsquo; unit</h4>
1428+
1429+
<p>The <dfn id=gr title="gr (unit)">gr</dfn> unit is used to position
1430+
elements in relation to grid lines.
1431+
1432+
<div class=example>
1433+
<pre>
1434+
img {
1435+
float: top left multicol;
1436+
float-offset: 2gr;
1437+
width: 1gr }
1438+
}
1439+
</pre>
1440+
</div>
1441+
1442+
<p>Grid lines can be laid out in uneven patterns. Therefore, the
1443+
&lsquo;<code class=css>gr</code>&rsquo; unit is not linear.
1444+
1445+
<div class=example>
1446+
<p>For example, "2gr" is not necessarily twice as long as "1gr".
1447+
</div>
1448+
14491449
<h3 id=special-cases><span class=secno>6.15 </span>Special cases</h3>
14501450

14511451
<p>Two common types of values fall outside the types described above: the
@@ -1912,7 +1912,7 @@ <h2 class=no-num id=index>Index</h2>
19121912
<li>&lt;angle&gt;
19131913
<ul>
19141914
<li>definition of, <a href="#ltanglegt" title="&lt;angle&gt; definition
1915-
of"><strong>6.9</strong></a>
1915+
of"><strong>6.7</strong></a>
19161916
</ul>
19171917

19181918
<li>calc(&lt;expression&gt;), <a href="#calcltexpressiongt"
@@ -1927,7 +1927,7 @@ <h2 class=no-num id=index>Index</h2>
19271927
value"><strong>7.2</strong></a>
19281928

19291929
<li>deg (degrees), <a href="#deg" title="deg
1930-
(degrees)"><strong>6.9</strong></a>
1930+
(degrees)"><strong>6.7</strong></a>
19311931

19321932
<li>em (unit), <a href="#em" title="em
19331933
(unit)"><strong>6.3.2.1.</strong></a>
@@ -1938,10 +1938,11 @@ <h2 class=no-num id=index>Index</h2>
19381938
<li>&lt;frequency&gt;
19391939
<ul>
19401940
<li>definition of, <a href="#ltfrequencygt0" title="&lt;frequency&gt;
1941-
definition of"><strong>6.11</strong></a>
1941+
definition of"><strong>6.9</strong></a>
19421942
</ul>
19431943

1944-
<li>fr (unit), <a href="#fr" title="fr (unit)"><strong>6.6.1</strong></a>
1944+
<li>fr (unit), <a href="#fr" title="fr (unit)"><strong>6.13.1</strong></a>
1945+
19451946

19461947
<li>functional notation, <a href="#functional-notation0" title="functional
19471948
notation"><strong>4.6</strong></a>
@@ -1950,13 +1951,13 @@ <h2 class=no-num id=index>Index</h2>
19501951
font families">6.15.1</a>
19511952

19521953
<li>grad (grads), <a href="#grad" title="grad
1953-
(grads)"><strong>6.9</strong></a>
1954-
1955-
<li>gr (unit), <a href="#gr" title="gr (unit)"><strong>6.7.1</strong></a>
1954+
(grads)"><strong>6.7</strong></a>
19561955

1957-
<li>Hz (Hertz), <a href="#hz" title="Hz (Hertz)"><strong>6.11</strong></a>
1956+
<li>gr (unit), <a href="#gr" title="gr (unit)"><strong>6.14.1</strong></a>
19581957

19591958

1959+
<li>Hz (Hertz), <a href="#hz" title="Hz (Hertz)"><strong>6.9</strong></a>
1960+
19601961
<li>identifer, <a href="#identifer"
19611962
title=identifer><strong>4.4</strong></a>
19621963

@@ -1968,20 +1969,20 @@ <h2 class=no-num id=index>Index</h2>
19681969
"><strong>4.1</strong></a>
19691970

19701971
<li>kHz (kilohertz), <a href="#khz" title="kHz
1971-
(kilohertz)"><strong>6.11</strong></a>
1972+
(kilohertz)"><strong>6.9</strong></a>
19721973

19731974
<li>&lt;length&gt;, <a href="#ltlengthgt"
19741975
title="&lt;length&gt;"><strong>6.3</strong></a>
19751976

19761977
<li>ms (milliseconds), <a href="#ms" title="ms
1977-
(milliseconds)"><strong>6.10</strong></a>
1978+
(milliseconds)"><strong>6.8</strong></a>
19781979

19791980
<li>newline, <a href="#newline" title=newline>4.5</a>
19801981

1981-
<li>&lt;number&gt;, <a href="#ltnumbergt0" title="&lt;number&gt;">6.8</a>,
1982-
<a href="#ltnumbergt1" title="&lt;number&gt;">6.9</a>, <a
1983-
href="#ltnumbergt2" title="&lt;number&gt;">6.10</a>, <a
1984-
href="#ltnumbergt3" title="&lt;number&gt;">6.11</a>, <a href="#number"
1982+
<li>&lt;number&gt;, <a href="#ltnumbergt0" title="&lt;number&gt;">6.6</a>,
1983+
<a href="#ltnumbergt1" title="&lt;number&gt;">6.7</a>, <a
1984+
href="#ltnumbergt2" title="&lt;number&gt;">6.8</a>, <a
1985+
href="#ltnumbergt3" title="&lt;number&gt;">6.9</a>, <a href="#number"
19851986
title=number><strong>4.2</strong></a>
19861987

19871988
<li>number with a unit identifier is a number immediately followed by a
@@ -1992,7 +1993,7 @@ <h2 class=no-num id=index>Index</h2>
19921993
<li>&lt;percentage&gt;
19931994
<ul>
19941995
<li>definition of, <a href="#ltpercentagegt" title="&lt;percentage&gt;
1995-
definition of"><strong>6.8</strong></a>
1996+
definition of"><strong>6.6</strong></a>
19961997
</ul>
19971998

19981999
<li>pixel unit, <a href="#px" title="pixel
@@ -2002,7 +2003,7 @@ <h2 class=no-num id=index>Index</h2>
20022003
(pixel)"><strong>6.3.2.3.</strong></a>
20032004

20042005
<li>rad (radians), <a href="#rad" title="rad
2005-
(radians)"><strong>6.9</strong></a>
2006+
(radians)"><strong>6.7</strong></a>
20062007

20072008
<li>reference pixel, <a href="#reference-pixel" title="reference
20082009
pixel"><strong>6.3.2.3.</strong></a>
@@ -2014,7 +2015,7 @@ <h2 class=no-num id=index>Index</h2>
20142015
(unit)"><strong>6.3.2.4.</strong></a>
20152016

20162017
<li>Resource Identifier (URI), <a href="#uris0" title="Resource Identifier
2017-
(URI)"><strong>6.13</strong></a>
2018+
(URI)"><strong>6.11</strong></a>
20182019

20192020
<li>root em, <a href="#rem" title="root em"><strong>6.3.2.4.</strong></a>
20202021

@@ -2024,27 +2025,27 @@ <h2 class=no-num id=index>Index</h2>
20242025
<li>specified value, <a href="#specified-value" title="specified
20252026
value"><strong>7.1</strong></a>
20262027

2027-
<li>s (seconds), <a href="#s" title="s
2028-
(seconds)"><strong>6.10</strong></a>
2028+
<li>s (seconds), <a href="#s" title="s (seconds)"><strong>6.8</strong></a>
2029+
20292030

20302031
<li>string, <a href="#string" title=string><strong>4.5</strong></a>
20312032

20322033
<li>&lt;time&gt;
20332034
<ul>
20342035
<li>definition of, <a href="#lttimegt0" title="&lt;time&gt; definition
2035-
of"><strong>6.10</strong></a>
2036+
of"><strong>6.8</strong></a>
20362037
</ul>
20372038

2038-
<li>turn, <a href="#turn" title=turn><strong>6.9</strong></a>
2039+
<li>turn, <a href="#turn" title=turn><strong>6.7</strong></a>
20392040

20402041
<li>Uniform Resource Locator (URL), <a href="#urls" title="Uniform
2041-
Resource Locator (URL)"><strong>6.13</strong></a>
2042+
Resource Locator (URL)"><strong>6.11</strong></a>
20422043

20432044
<li>URI (Uniform Resource Identifier), <a href="#uris0" title="URI
2044-
(Uniform Resource Identifier)"><strong>6.13</strong></a>
2045+
(Uniform Resource Identifier)"><strong>6.11</strong></a>
20452046

20462047
<li>URL (Uniform Resource Locator), <a href="#urls" title="URL (Uniform
2047-
Resource Locator)"><strong>6.13</strong></a>
2048+
Resource Locator)"><strong>6.11</strong></a>
20482049

20492050
<li>used value, <a href="#used-value" title="used
20502051
value"><strong>7.3</strong></a>

0 commit comments

Comments
 (0)