8000 csswg-drafts/css21/visufx.html at master · keithjgrant/csswg-drafts · GitHub
Skip to content

visufx.html

Latest commit

 

History

History
505 lines (443 loc) · 22 KB

visufx.html

File metadata and controls

505 lines (443 loc) · 22 KB
Raw
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Visual effects</title>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css">
<link rel="prev" href="visudet.html">
<link rel="next" href="generate.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
<style type="text/css">
.current,.proposed,span.delcurrent { background:#feb }
ins.proposed,span.insproposed { background:#bfb }
del.proposed,span.delproposed { background:#fbb }
span.insproposed { text-decoration:underline }
span.delproposed,span.delcurrent { text-decoration:line-through }
body>del,body>ins {display:block}
</style>
</head>
<body>
<div class="navbar">
<p><a href="visudet.html">previous</a> &nbsp;
<a href="generate.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
<hr class="navbar">
<h1><a name="q11.0">11 Visual effects</a></h1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="visufx.html#overflow-clipping" class="tocxref">11.1 Overflow and clipping</a>
<ul class="toc">
<li class="tocline3"><a href="visufx.html#overflow" class="tocxref">11.1.1 Overflow: the <span class="propinst-overflow">'overflow'</span> property</a>
<li class="tocline3"><a href="visufx.html#clipping" class="tocxref">11.1.2 Clipping: the <span class="propinst-clip">'clip'</span> property</a>
</ul>
<li class="tocline2"><a href="visufx.html#visibility" class="tocxref">11.2 Visibility: the <span class="propinst-visibility">'visibility'</span> property</a>
</ul>
</div>
<!-- warning -->
<div> <input id=annoying-warning type=checkbox title="hide note"> <label for=annoying-warning>(hide)</label> <div class=annoying-warning> <p><strong>Note:</strong> Several sections of this specification have been updated by other specifications. Please, see <a href="https://www.w3.org/TR/CSS/#css" >"Cascading Style Sheets (CSS) &mdash; The Official Definition"</a> in the latest <cite>CSS Snapshot</cite> for a list of specifications and the sections they replace. <p>The CSS Working Group is also developing <a href="http://www.w3.org/TR/CSS22/" >CSS level&nbsp;2 revision&nbsp;2 (CSS&nbsp;2.2).</a> </div> </div>
<!-- /warning -->
<h2>11.1 <a name="overflow-clipping">Overflow and clipping</a></h2>
<p>Generally, the content of a block box is confined to the
content edges of the box. In certain cases, a box may <a name="x0"><span
class="index-def"
title="overflow|box::overflow"><dfn>overflow</dfn></span></a>, meaning its
content lies partly or entirely outside of the box, e.g.:</p>
<ul>
<li>A line cannot be broken, causing the line box to be wider than the
block box.
</li>
<li>A block-level box is too wide for the containing block. This may
happen when an
element's <a href="visudet.html#propdef-width" class="noxref"><span class="propinst-width">'width'</span></a> property has a
value that causes the generated block box to spill over
sides of the containing block.
</li>
<li>An element's height exceeds an explicit height assigned to the containing
block (i.e., the containing block's height is determined by the <a href="visudet.html#propdef-height" class="noxref"><span
class="propinst-height">'height'</span></a> property, not by content
height).
</li>
<li>A descendant box is <a href="visuren.html#absolute-positioning">positioned
absolutely</a>, partly outside the box. Such boxes are not always
clipped by the overflow property on their ancestors; specifically,
they are not clipped by the overflow of any ancestor between
themselves and their containing block
</li>
<li>A descendant box has <a href="box.html#margin-properties">negative margins</a>, causing it
to be positioned partly outside the box.
</li>
<li>The 'text-indent' property causes an inline box to hang off either the left or right edge of the block box.
</li>
</ul>
<p>Whenever overflow occurs, the <a href="visufx.html#propdef-overflow" class="noxref"><span
class="propinst-overflow">'overflow'</span></a> property specifies
whether a box is clipped to its padding edge, and if so, whether
a scrolling mechanism is provided to access any clipped out content.
</p>
<h3>11.1.1 <a name="overflow">Overflow</a>: the <a href="visufx.html#propdef-overflow" class="noxref"><span
class="propinst-overflow">'overflow'</span></a> property</h3>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'overflow'"><a name="propdef-overflow" class="propdef-title"><strong>'overflow'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>visible | hidden | scroll | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>visible
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>block containers
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>as specified
</table>
</dl>
</div>
<p>
This property specifies whether content of a block container element is
clipped when it overflows the element's box. It affects the clipping
of all of the element's content except any descendant elements (and
their respective content and descendants) whose containing block is the viewport or an ancestor of the element. Values have the following meanings:
</p>
<dl>
<dt><strong>visible</strong></dt>
<dd>This value indicates that content is not clipped, i.e., it
may be rendered outside the block box.
</dd>
<dt><strong>hidden</strong></dt>
<dd>This value indicates that the content is clipped and that no
scrolling user interface should be provided to view the content outside the
clipping region.
</dd>
<dt><strong>scroll</strong></dt>
<dd>This value indicates that the content is clipped and that if the
user agent uses a scrolling mechanism that is visible on the screen
(such as a scroll bar or a panner), that mechanism should be displayed
for a box whether or not any of its content is clipped. This avoids
any problem with scrollbars appearing and disappearing in a dynamic
environment.
When this value is specified and the target medium is
'print', overflowing content may be printed.
</dd>
<dt><strong>auto</strong></dt>
<dd>The behavior of the 'auto' value is user agent-dependent, but
should cause a scrolling mechanism to be provided for overflowing boxes.
</dd>
</dl>
<p> Even if <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> is set
to 'visible', content may be clipped to a UA's document window by the
native operating environment.
</p>
<p>
UAs must apply the 'overflow' property set on the root element to
the viewport.
When the root element is an HTML "HTML" element or an XHTML "html"
element, and that element has an HTML "BODY" element or an XHTML
"body" element as a child, user agents must instead apply the
'overflow' property from the first such child element to the
viewport, if the value on the root element is 'visible'.
The 'visible' value when used for the viewport
must be interpreted as 'auto'. The element from which the value is
propagated must have a used value for 'overflow' of 'visible'.
</p>
<p>
In the case of a scrollbar being placed on an edge of the element's
box, it should be inserted between the inner border edge and the outer
padding edge. Any space taken up by the scrollbars should be taken out
of (subtracted from the dimensions of) the containing block formed by
the element with the scrollbars.
</p>
<div class="example"><P style="display:none">Example(s):</P><p>
Consider the following example of a block quotation
(<code>&lt;blockquote&gt;</code>) that is too big
for its containing block (established by a <code>&lt;div&gt;</code>). Here is
the source:</p>
<pre class="html-example"><code class="html">
&lt;div&gt;
&lt;blockquote&gt;
&lt;p&gt;I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.&lt;/p&gt;
&lt;cite&gt;- Groucho Marx&lt;/cite&gt;
&lt;/blockquote&gt;
&lt;/div&gt;
</code></pre>
<p>Here is the style sheet controlling the sizes and style of the
generated boxes:
</p>
<pre><code class="css">
div { width : 100px; height: 100px;
border: thin solid red;
}
blockquote { width : 125px; height : 100px;
margin-top: 50px; margin-left: 50px;
border: thin dashed black
}
cite { display: block;
text-align : right;
border: none
}
</code></pre>
<p>The initial value of <a href="visufx.html#propdef-overflow" class="noxref"><span
class="propinst-overflow">'overflow'</span></a> is 'visible', so
the <code>&lt;blockquote&gt;</code> would be formatted without clipping, something like this:</p>
<div class="figure">
<p><img src="./images/overflow1.png" alt="Rendered overflow"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-overflow1" href="images/longdesc/overflow1-desc.html" title="Long description for example with unclipped overflow">[D]</A></SPAN></p>
</div>
<p>Setting <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> to
'hidden' for the <code>&lt;div&gt;</code>, on the other hand, causes the
<code>&lt;blockquote&gt;</code> to be clipped by the containing
<code>&lt;div&gt;</code>:
</p>
<div class="figure">
<p><img src="./images/overflow2.png" alt="Clipped overflow"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-overflow2" href="images/longdesc/overflow2-desc.html" title="Long description for example with clipped overflow">[D]</A></SPAN></p>
</div>
<p>A value of 'scroll' would tell UAs that support
a visible scrolling mechanism to display one so that users
could access the clipped content.
</p>
</div>
<div>
<p>
Finally, consider this case where an absolutely positioned element
is mixed with an overflow parent.
</p>
<p>
Style sheet:
</p>
<pre><code class="html">
container { position: relative; border: solid; }
scroller { overflow: scroll; height: 5em; margin: 5em; }
satellite { position: absolute; top: 0; }
body { height: 10em; }
</code></pre>
<p>
Document fragment:
</p>
<pre><code class="xml">
&lt;container&gt;
&lt;scroller&gt;
&lt;satellite/&gt;
&lt;body/&gt;
&lt;/scroller&gt;
&lt;/container&gt;
</code></pre>
<p>
In this example, the "scroller" element will not scroll the
"satellite" element, because the latter's containing block is outside
the element whose overflow is being clipped and scrolled.
</p>
</div>
<h3>11.1.2 <a name="clipping">Clipping</a>: the <a href="visufx.html#propdef-clip" class="noxref"><span
class="propinst-clip">'clip'</span></a> property</h3>
<p>A <a name="x3"><span class="index-def" title="clipping region"><dfn>clipping
region</dfn></span></a> defines what portion of an element's
border box
is visible. By default, the element is not clipped. However, the clipping region may be explicitly set with the <a href="visufx.html#propdef-clip" class="noxref"><span class="propinst-clip">'clip'</span></a> property.
</p>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'clip'"><a name="propdef-clip" class="propdef-title"><strong>'clip'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td><a href="visufx.html#value-def-shape" class="noxref"><span class="value-inst-shape">&lt;shape&gt;</span></a> | auto | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>auto
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>absolutely positioned elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>no
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>'auto' if specified as 'auto', otherwise a rectangle with four
values, each of which is 'auto' if specified as 'auto' and the
computed length otherwise
</table>
</dl>
</div>
<p>The 'clip' property applies only to absolutely positioned elements.
Values have the following meanings:</p>
<dl>
<dt><strong>auto</strong></dt>
<dd>The element does not clip.</dd>
<dt><span class="index-def" title="&lt;shape&gt;::definition of"><a
name="value-def-shape"
class="value-def"><strong>&lt;shape&gt;</strong></a></span></dt>
<dd>In CSS&nbsp;2.1, the only valid &lt;shape&gt; value is:
rect(<a href="visufx.html#value-def-top" class="noxref"><span
class="value-inst-top">&lt;top&gt;</span></a>, <a href="visufx.html#value-def-right" class="noxref"><span
class="value-inst-right">&lt;right&gt;</span></a>, <a href="visufx.html#value-def-bottom" class="noxref"><span
class="value-inst-bottom">&lt;bottom&gt;</span></a>, <a href="visufx.html#value-def-left" class="noxref"><span
class="value-inst-left">&lt;left&gt;</span></a>)
where <a href="visufx.html#value-def-top" class="noxref"><span class="value-inst-top">&lt;top&gt;</span></a> and <a href="visufx.html#value-def-bottom" class="noxref"><span
class="value-inst-bottom">&lt;bottom&gt;</span></a> specify offsets from
the top border edge of the box, and <a href="visufx.html#value-def-right" class="noxref"><span
class="value-inst-right">&lt;right&gt;</span></a>, and <a href="visufx.html#value-def-left" class="noxref"><span
class="value-inst-left">&lt;left&gt;</span></a> specify offsets from the
left border edge of the box. Authors should separate
offset values with commas. User agents must support separation with
commas, but may also support separation without commas (but not a
combination), because a
previous revision of this specification was ambiguous in this respect.
<p><span class="index-def" title="&lt;top&gt;::definition of"><a
name="value-def-top" class="value-def">&lt;top&gt;</a></span>, <span
class="index-def" title="&lt;right&gt;::definition of"><a
name="value-def-right" class="value-def">&lt;right&gt;</a></span>,
<span class="index-def" title="&lt;bottom&gt;::definition of"><a
name="value-def-bottom" class="value-def">&lt;bottom&gt;</a></span>,
and <span class="index-def" title="&lt;left&gt;::definition of"><a
name="value-def-left" class="value-def">&lt;left&gt;</a></span> may
either have a <a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length">&lt;length&gt;</span></a>
value or 'auto'. Negative lengths are permitted. The value 'auto'
means that a given edge of the clipping region will be the same as the
edge of the element's generated border box (i.e., 'auto' means the same as '0' for <a href="visufx.html#value-def-top" class="noxref"><span class="value-inst-top">&lt;top&gt;</span></a> and <a href="visufx.html#value-def-left" class="noxref"><span
class="value-inst-left">&lt;left&gt;</span></a>, the same as the used
value of the height plus the sum of
vertical padding and border widths for <a href="visufx.html#value-def-right" class="noxref"><span
class="value-inst-right">&lt;bottom&gt;</span></a>, and the same as the
used value of the width plus the sum of the horizontal padding and
border widths for <a href="visufx.html#value-def-right" class="noxref"><span class="value-inst-right">&lt;right&gt;</span></a>,
such that four 'auto' values result in the clipping region being
the same as the element's border box).
</p>
<p>When coordinates are rounded to pixel coordinates, care should be
taken that no pixels remain visible when &lt;left&gt; and
&lt;right&gt; have the same value (or &lt;top&gt; and &lt;bottom&gt;
have the same value), and conversely that no pixels within the
element's border box remain hidden when these values are 'auto'.
</p>
</dd>
</dl>
<p>An element's clipping region clips out any aspect of the element (e.g., content, children, background, borders, text decoration, outline and visible scrolling mechanism &mdash; if any) that is outside the clipping region.
Content that has been clipped does not cause overflow.
</p>
<p>The element's ancestors may also clip portions of their content (e.g., via their own <a href="visufx.html#propdef-clip" class="noxref"><span class="propinst-clip">'clip'</span></a> property and/or if
their <a href="visufx.html#propdef-overflow" class="noxref"><span class="propinst-overflow">'overflow'</span></a> property is
not 'visible'); what is rendered is the cumulative intersection.
</p>
<p>If the clipping region exceeds the bounds of the UA's
document window, content may be clipped to that window by the
native operating environment.
</p>
<div class="example"><P style="display:none">Example(s):</P><p>Example:
The following two rules:</p>
<pre><code class="css">p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
<p>and assuming both Ps are 50 by 55 px, will create, respectively,
the rectangular clipping regions delimited
by the dashed lines in the following illustrations:</p>
<div class="figure">
<p><img src="images/clip.png" alt="Two clipping regions"><SPAN class="dlink">&nbsp;&nbsp;&nbsp;<A name="img-clip" href="images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</A></SPAN></p>
</div>
</div>
<div class="note"><p> <em><strong>Note.</strong> In CSS&nbsp;2.1, all clipping
regions are rectangular. We anticipate future extensions to permit
non-rectangular clipping. Future updates may also reintroduce a
syntax for offsetting shapes from each edge instead of offsetting from
a point.</em></p></div>
<h2>11.2 <a name="visibility">Visibility</a>: the <a href="visufx.html#propdef-visibility" class="noxref"><span
class="propinst-visibility">'visibility'</span></a> property</h2>
<div class="propdef">
<dl><dt>
<span class="index-def" title="'visibility'"><a name="propdef-visibility" class="propdef-title"><strong>'visibility'</strong></a></span>
<dd>
<table class="propinfo" cellspacing=0 cellpadding=0>
<tr valign=baseline><td><em>Value:</em>&nbsp;&nbsp;<td>visible | hidden | collapse | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a>
<tr valign=baseline><td><em>Initial:</em>&nbsp;&nbsp;<td>visible
<tr valign=baseline><td><em>Applies to:</em>&nbsp;&nbsp;<td>all elements
<tr valign=baseline><td><em>Inherited:</em>&nbsp;&nbsp;<td>yes
<tr valign=baseline><td><em>Percentages:</em>&nbsp;&nbsp;<td>N/A
<tr valign=baseline><td><em>Media:</em>&nbsp;&nbsp;<td><a href="media.html#visual-media-group" class="noxref">visual</a>
<tr valign=baseline><td><em>Computed&nbsp;value:</em>&nbsp;&nbsp;<td>as specified
</table>
</dl>
</div>
<p>The <a href="visufx.html#propdef-visibility" class="noxref"><span class="propinst-visibility">'visibility'</span></a> property
specifies whether the boxes generated by an element are
rendered. Invisible boxes still affect layout (set the <a href="visuren.html#propdef-display" class="noxref"><span
class="propinst-display">'display'</span></a> property to 'none' to
suppress box generation altogether). Values have the following
meanings:</p>
<dl>
<dt><strong>visible</strong></dt>
<dd>The generated box is visible.</dd>
<dt><strong>hidden</strong></dt>
<dd>The generated box is invisible (fully transparent, nothing is drawn), but still
affects layout. Furthermore, descendants of the element will
be visible if they have 'visibility: visible'.</dd>
<dt><strong>collapse</strong></dt>
<dd>Please consult the section on
<a href="tables.html#dynamic-effects">dynamic row and column
effects</a> in tables. If used on elements other than rows, row groups, columns, or column groups,
'collapse' has the same meaning as 'hidden'.
</dd>
</dl>
<p>This property may be used in conjunction with scripts to create
dynamic effects.
</p>
<div class="html-example"><p> In the following example, pressing
either form button invokes an author-defined script function that causes
the corresponding box to become visible and the other to be
hidden. Since these boxes have the same size and position, the effect
is that one replaces the other. (The script code is in a hypothetical
script language. It may or may not have any effect in a CSS-capable
UA.)
</p>
<pre><code class="html">
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;HTML&gt;
&lt;HEAD&gt;&lt;TITLE&gt;Dynamic visibility example&lt;/TITLE&gt;
&lt;META
http-equiv="Content-Script-Type"
content="application/x-hypothetical-scripting-language"&gt;
&lt;STYLE type=&quot;text/css&quot;&gt;
&lt;!--
#container1 { position: absolute;
top: 2in; left: 2in; width: 2in }
#container2 { position: absolute;
top: 2in; left: 2in; width: 2in;
visibility: hidden; }
--&gt;
&lt;/STYLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;Choose a suspect:&lt;/P&gt;
&lt;DIV id="container1"&gt;
&lt;IMG alt="Al Capone"
width="100" height="100"
src="suspect1.png"&gt;
&lt;P&gt;Name: Al Capone&lt;/P&gt;
&lt;P&gt;Residence: Chicago&lt;/P&gt;
&lt;/DIV&gt;
&lt;DIV id="container2"&gt;
&lt;IMG alt="Lucky Luciano"
width="100" height="100"
src="suspect2.png"&gt;
&lt;P&gt;Name: Lucky Luciano&lt;/P&gt;
&lt;P&gt;Residence: New York&lt;/P&gt;
&lt;/DIV&gt;
&lt;FORM method="post"
action="http://www.suspect.org/process-bums"&gt;
&lt;P&gt;
&lt;INPUT name="Capone" type="button"
value="Capone"
onclick='show("container1");hide("container2")'&gt;
&lt;INPUT name="Luciano" type="button"
value="Luciano"
onclick='show("container2");hide("container1")'&gt;
&lt;/FORM&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</code></pre>
</div>
<hr class="navbar">
<div class="navbar">
<p><a href="visudet.html">previous</a> &nbsp;
<a href="generate.html">next</a> &nbsp;
<a href="cover.html#minitoc">contents</a> &nbsp;
<a href="propidx.html">properties</a> &nbsp;
<a href="indexlist.html">index</a> &nbsp;
</div>
</body>
</html>