8000 Use a definition list for defining background-attachment values. (Req… · w3c/csswg-drafts@e71f703 · GitHub
Skip to content

Commit e71f703

Browse files
committed
Use a definition list for defining background-attachment values. (Request from arronei.)
1 parent 7da63ef commit e71f703

2 files changed

Lines changed: 86 additions & 63 deletions

File tree

css3-background/Overview.html

Lines changed: 63 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222

2323
<h1>CSS Backgrounds and Borders Module Level 3</h1>
2424

25-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 March 2010</h2>
25+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 March 2010</h2>
2626

2727
<dl>
2828
<dt>This version:
2929

30-
<dd><!--<a href="http://www.w3.org/TR/2010/CR-css3-background-20100303">http://www.w3.org/TR/2010/ED-css3-background-20100303</a>-->
30+
<dd><!--<a href="http://www.w3.org/TR/2010/CR-css3-background-20100322">http://www.w3.org/TR/2010/ED-css3-background-20100322</a>-->
3131
<a
3232
href="http://dev.w3.org/csswg/css3-background">http://dev.w3.org/csswg/css3-background</a>
3333

@@ -835,33 +835,42 @@ <h3 id=the-background-attachment><span class=secno>3.5. </span>The
835835
<pre
836836
class=prod><dfn id=ltattachmentgt><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
837837

838-
<p>Note that there is only one viewport per view. Even if an element has a
839-
scrolling mechanism (see the &lsquo;<code
840-
class=property>overflow</code>&rsquo; property <a href="#CSS21"
841-
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a &lsquo;<code
842-
class=css>fixed</code>&rsquo; background doesn't move with the element.
843-
844-
<p>The difference between &lsquo;<code class=css>scroll</code>&rsquo; and
845-
&lsquo;<code class=css>local</code>&rsquo; is only visible when the
846-
element has a scrolling mechanism: in the case of &lsquo;<code
847-
class=css>scroll</code>&rsquo;, the background does not scroll with the
848-
element's content. (It is attached to the element's border, effectively.)
849-
In the case of &lsquo;<code class=css>local</code>&rsquo;, the background
850-
scrolls along with the element's content. In this case, the background
851-
behind the element's border (if any) scrolls as well, even though the
852-
border itself does not scroll with the contents. The UA may, however,
853-
treat the &lsquo;<code class=css>border-box</code>&rsquo; value of
854-
&lsquo;<code class=property><a
855-
href="#background-clip">background-clip</a></code>&rsquo; as &lsquo;<code
856-
class=css>padding-box</code>&rsquo; in cases where &lsquo;<code
857-
class=property><a
858-
href="#background-attachment">background-attachment</a></code>&rsquo; is
859-
&lsquo;<code class=css>local</code>&rsquo; and the contents of the element
860-
scroll.
838+
<dl>
839+
<dt><dfn id=fixed0>fixed</dfn>
840+
841+
<dd>The background is fixed with regard to the viewport. In paged media
842+
where there is no viewport, a &lsquo;<code class=css><a
843+
href="#fixed0">fixed</a></code>&rsquo; background is fixed with respect
844+
to the <a href="http://www.w3.org/TR/CSS21/page.html#page-box">page
845+
box</a>. <span class=note>>Note that there is only one viewport per view.
846+
Even if an element has a scrolling mechanism (see the &lsquo;<code
847+
class=property>overflow</code>&rsquo; property <a href="#CSS21"
848+
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>), a &lsquo;<code
849+
class=css><a href="#fixed0">fixed</a></code>&rsquo; background doesn't
850+
move with the element.</span>
851+
852+
<dt><dfn id=local0>local</dfn>
853+
854+
<dd>The background is fixed with regard to the element's contents: if the
855+
element has a scrolling mechanism, the background scrolls with the
856+
element's contents. In this case, the background behind the element's
857+
border (if any) scrolls as well, even though the border itself does not
858+
scroll with the contents. The UA may, however, treat the &lsquo;<code
859+
class=css>border-box</code>&rsquo; value of &lsquo;<code
860+
class=property><a
861+
href="#background-clip">background-clip</a></code>&rsquo; as &lsquo;<code
862+
class=css>padding-box</code>&rsquo; in cases where &lsquo;<code
863+
class=property><a
864+
href="#background-attachment">background-attachment</a></code>&rsquo; is
865+
&lsquo;<code class=css><a href="#local0">local</a></code>&rsquo; and the
866+
contents of the element scroll.
861867

862-
<p>In paged media where there is no viewport, a &lsquo;<code
863-
class=css>fixed</code>&rsquo; background is fixed with respect to the <a
864-
href="http://www.w3.org/TR/CSS21/page.html#page-box">page box</a>.
868+
<dt><dfn id=scroll0>scroll</dfn>
869+
870+
<dd>The background is fixed with regard to the element itself and does not
871+
scroll with its contents. (It is effectively attached to the element's
872+
border.)
873+
</dl>
865874

866875
<p>Even if the image is fixed, it is still only visible when it is in the
867876
<em><a href="#background-painting-area">background painting area</a></em>
@@ -883,10 +892,11 @@ <h3 id=the-background-attachment><span class=secno>3.5. </span>The
883892
</pre>
884893
</div>
885894

886-
<p>User agents that do not support &lsquo;<code
887-
class=css>fixed</code>&rsquo; backgrounds (for example due to limitations
888-
of the hardware platform) should ignore declarations with the keyword
889-
&lsquo;<code class=css>fixed</code>&rsquo;. For example:
895+
<p>User agents that do not support &lsquo;<code class=css><a
896+
href="#fixed0">fixed</a></code>&rsquo; backgrounds (for example due to
897+
limitations of the hardware platform) should ignore declarations with the
898+
keyword &lsquo;<code class=css><a href="#fixed0">fixed</a></code>&rsquo;.
899+
For example:
890900

891901
<pre class=example>
892902
body {
@@ -1293,9 +1303,9 @@ <h3 id=the-background-origin><span class=secno>3.8. </span>The &lsquo;<code
12931303

12941304
<p>If the &lsquo;<code class=property><a
12951305
href="#background-attachment">background-attachment</a></code>&rsquo;
1296-
value for this image is &lsquo;<code class=css>fixed</code>&rsquo;, then
1297-
this property has no effect: in this case the background positioning area
1298-
is the <a
1306+
value for this image is &lsquo;<code class=css><a
1307+
href="#fixed0">fixed</a></code>&rsquo;, then this property has no effect:
1308+
in this case the background positioning area is the <a
12991309
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial
13001310
containing block</a> <a href="#CSS21"
13011311
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
@@ -3746,8 +3756,9 @@ <h4 id=level-1><span class=secno>7.3.1. </span>CSS Level 1</h4>
37463756

37473757
<li>&lsquo;<code class=property><a
37483758
href="#background-attachment">background-attachment</a></code>&rsquo;:
3749-
only &lsquo;<code class=property>scroll</code>&rsquo; | &lsquo;<code
3750-
class=property>fixed</code>&rsquo;
3759+
only &lsquo;<code class=property><a
3760+
href="#scroll0">scroll</a></code>&rsquo; | &lsquo;<code class=property><a
3761+
href="#fixed0">fixed</a></code>&rsquo;
37513762

37523763
<li>&lsquo;<code class=property><a
37533764
href="#background-position">background-position</a></code>&rsquo;: only
@@ -3795,8 +3806,9 @@ <h4 id=level-2><span class=secno>7.3.2. </span>CSS Level 2</h4>
37953806

37963807
<li>&lsquo;<code class=property><a
37973808
href="#background-attachment">background-attachment</a></code>&rsquo;:
3798-
only &lsquo;<code class=property>scroll</code>&rsquo; | &lsquo;<code
3799-
class=property>fixed</code>&rsquo;
3809+
only &lsquo;<code class=property><a
3810+
href="#scroll0">scroll</a></code>&rsquo; | &lsquo;<code class=property><a
3811+
href="#fixed0">fixed</a></code>&rsquo;
38003812

38013813
<li>&lsquo;<code class=property><a
38023814
href="#background-position">background-position</a></code>&rsquo;: only
@@ -4734,8 +4746,10 @@ <h2 class=no-num id=index>Index</h2>
47344746
<a href="#ltfinal-bg-layergt"
47354747
title="&lt;final-bg-layer&gt;"><strong>3.10.</strong></a>
47364748

4737-
<li>&lsquo;<code class=css>fixed</code>&rsquo;, <a href="#fixed"
4738-
title="''fixed''"><strong>3.5.</strong></a>
4749+
<li>fixed, <a href="#fixed0" title=fixed><strong>3.5.</strong></a>
4750+
4751+
<li>&lsquo;<code class=css><a href="#fixed0">fixed</a></code>&rsquo;, <a
4752+
href="#fixed" title="''fixed''"><strong>3.5.</strong></a>
47394753

47404754
<li>&lsquo;<code class=css>groove</code>&rsquo;, <a href="#groove"
47414755
title="''groove''"><strong>4.2.</strong></a>
@@ -4759,8 +4773,10 @@ <h2 class=no-num id=index>Index</h2>
47594773
value"><strong>3.6.</strong></a>
47604774
</ul>
47614775

4762-
<li>&lsquo;<code class=css>local</code>&rsquo;, <a href="#local"
4763-
title="''local''"><strong>3.5.</strong></a>
4776+
<li>local, <a href="#local0" title=local><strong>3.5.</strong></a>
4777+
4778+
<li>&lsquo;<code class=css><a href="#local0">local</a></code>&rsquo;, <a
4779+
href="#local" title="''local''"><strong>3.5.</strong></a>
47644780

47654781
<li>&lsquo;<code class=css>none</code>&rsquo;
47664782
<ul>
@@ -4854,8 +4870,10 @@ <h2 class=no-num id=index>Index</h2>
48544870
value"><strong>5.5.</strong></a>
48554871
</ul>
48564872

4857-
<li>&lsquo;<code class=css>scroll</code>&rsquo;, <a href="#scroll"
4858-
title="''scroll''"><strong>3.5.</strong></a>
4873+
<li>scroll, <a href="#scroll0" title=scroll><strong>3.5.</strong></a>
4874+
4875+
<li>&lsquo;<code class=css><a href="#scroll0">scroll</a></code>&rsquo;, <a
4876+
href="#scroll" title="''scroll''"><strong>3.5.</strong></a>
48594877

48604878
<li>&lsquo;<code class=css>slice</code>&rsquo;, <a href="#slice"
48614879
title="''slice''"><strong>6.1.</strong></a>

css3-background/Overview.src.html

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -499,24 +499,29 @@ <h3 id="the-background-attachment">The 'background-attachment' property</h3>
499499

500500
<pre class=prod><dfn><var>&lt;attachment&gt;</var></dfn> = scroll | fixed | local</pre>
501501

502-
<p>Note that there is only one viewport per view. Even if an element
503-
has a scrolling mechanism (see the 'overflow' property [[!CSS21]]),
504-
a ''fixed'' background doesn't move with the element.
505-
506-
<p>The difference between ''scroll'' and ''local'' is only visible
507-
when the element has a scrolling mechanism: in the case of
508-
''scroll'', the background does not scroll with the element's
509-
content. (It is attached to the element's border, effectively.) In the
510-
case of ''local'', the background scrolls along with the element's
511-
content. In this case, the background behind the element's border (if any)
512-
scrolls as well, even though the border itself does not scroll with the
513-
contents. The UA may, however, treat the ''border-box'' value of
514-
'background-clip' as ''padding-box'' in cases where 'background-attachment'
515-
is ''local'' and the contents of the element scroll.
516-
517-
<p>In paged media where there is no viewport, a ''fixed'' background
518-
is fixed with respect to the <a href="http://www.w3.org/TR/CSS21/page.html#page-box">page
519-
box</a>.
502+
<dl>
503+
<dt><dfn>fixed</dfn></dt>
504+
<dd>The background is fixed with regard to the viewport. In paged
505+
media where there is no viewport, a ''fixed'' background is fixed
506+
with respect to the <a href="http://www.w3.org/TR/CSS21/page.html#page-box">page box</a>.
507+
<span class="note">>Note that there is only one viewport per view.
508+
Even if an element has a scrolling mechanism (see the 'overflow'
509+
property [[!CSS21]]), a ''fixed'' background doesn't move with the
510+
element.</span>
511+
<dt><dfn>local</dfn></dt>
512+
<dd>The background is fixed with regard to the element's contents:
513+
if the element has a scrolling mechanism, the background scrolls
514+
with the element's contents. In this case, the background behind
515+
the element's border (if any) scrolls as well, even though the
516+
border itself does not scroll with the contents. The UA may,
517+
however, treat the ''border-box'' value of 'background-clip' as
518+
''padding-box'' in cases where 'background-attachment' is ''local''
519+
and the contents of the element scroll.</dd>
520+
<dt><dfn>scroll</dfn></dt>
521+
<dd>The background is fixed with regard to the element itself and
522+
5624 does not scroll with its contents. (It is effectively attached
523+
to the element's border.)</dd>
524+
</dl>
520525

521526
<p>Even if the image is fixed, it is still only visible when it is in
522527
the <em>background painting area</em> of the element or otherwise

0 commit comments

Comments
 (0)