mozilla

Revision 28018 of clip

  • Revision slug: CSS/clip
  • Revision title: clip
  • Revision id: 28018
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 2 words added, 1 words removed

Revision Content

{{ CSSRef() }}

Summary

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with {{ cssxref("position","position:absolute") }}.

  • {{ Xref_cssinitial() }}: auto
  • Applies to: absolutely positioned elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: A rectangle consisting of four computed lengths; otherwise, as specified

Syntax

clip:  {{ Xref_cssshape() }}| auto | {{ Cssxref("inherit") }}

Values

<shape>
A rectangular shape of the form
rect(<top>, <right>, <bottom>, <left>)   /* standard syntax */
or
rect(<top> <right> <bottom> <left>)      /* backwards compatible syntax */
where <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and <left> specify offsets from the left border edge of the box.
<top>, <right>, <bottom>, and <left> may either have a {{ Xref_csslength() }} value or auto.
auto
The element does not clip (default value)

Examples

 .foo { clip: rect(10px, 200px, 150px, 10px); position: absolute; }
     /* standard syntax, unsupported by Intenet Explorer 4-7 */

 .foo { clip: rect(10px  200px  150px  10px); position: absolute; }
     /* non-standard syntax, but supported by all major browsers including Firefox and IE 4-8 */

Specifications

Browser compatibility

Browser Lowest version Support of correct comma syntax
Internet Explorer 4.0 8.0
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 7.0 7.0
Safari (WebKit) 1.0 (85) 1.0 (85)
Internet Explorer 4-7 doesn't support comma separation, so don't use commas in order to prevent compatibility problems. See "Examples" section above.

See also

{{ Cssxref("overflow") }}, {{ Cssxref("position") }}

{{ languages( { "fr": "fr/CSS/clip", "pl": "pl/CSS/clip" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> clip </code>CSS property defines what portion of an element is visible. The<code> clip </code>property applies only to elements with {{ cssxref("position","position:absolute") }}.</p>
<ul> <li>{{ Xref_cssinitial() }}: auto</li> <li>Applies to: absolutely positioned elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: A rectangle consisting of four computed lengths; otherwise, as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">clip:  {{ Xref_cssshape() }}| auto | {{ Cssxref("inherit") }}
</pre>
<h3>Values</h3>
<dl> <dt>&lt;shape&gt;</dt> <dd>A rectangular shape of the form <pre style="margin:0">rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)   /* standard syntax */
</pre> or <pre style="margin:0">rect(&lt;top&gt; &lt;right&gt; &lt;bottom&gt; &lt;left&gt;)      /* backwards compatible syntax */</pre> where <code>&lt;top&gt;</code> and <code>&lt;bottom&gt;</code> specify offsets from the <em>top border edge</em> of the box, and <code>&lt;right&gt;</code>, and <code>&lt;left&gt;</code> specify offsets from the <em>left border edge</em> of the box.</dd>
</dl>
<dl> <dd><code>&lt;top&gt;</code>, <code>&lt;right&gt;</code>, <code>&lt;bottom&gt;</code>, and <code>&lt;left&gt;</code> may either have a {{ Xref_csslength() }} value or<code> auto</code>.</dd> <dt>auto</dt> <dd>The element does not clip (default value)</dd>
</dl>
<h3>Examples</h3>
<pre> .foo { clip: rect(10px, 200px, 150px, 10px); position: absolute; }
     /* standard syntax, <u>unsupported by Intenet Explorer 4-7</u> */

 .foo { clip: rect(10px  200px  150px  10px); position: absolute; }
     /* non-standard syntax, but supported by all major browsers including Firefox and IE 4-8 */
</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/visufx.html#clipping" title="http://www.w3.org/TR/CSS21/visufx.html#clipping">CSS 2.1 Visual effects#clipping</a></li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> <th>Support of correct comma syntax</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>8.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> </tr> <tr> <td>Opera</td> <td>7.0</td> <td>7.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> </tr> </tbody>
</table>
<div class="warning">Internet Explorer 4-7 doesn't support comma separation, so don't use commas in order to prevent compatibility problems. See "Examples" section above.</div>
<h3>See also</h3>
<p>{{ Cssxref("overflow") }}, {{ Cssxref("position") }}</p>
<p>{{ languages( { "fr": "fr/CSS/clip", "pl": "pl/CSS/clip" } ) }}</p>
Revert to this revision