clip

  • Revision slug: CSS/clip
  • Revision title: clip
  • Revision id: 28021
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment formatting; 18 words added, 18 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

p     { border:dotted;  position:relative; }

#img2 { position:absolute;  left:263px;

        clip: rect(40px, 200px, 150px, 30px); 
        /* standard syntax, unsupported by Internet Explorer 4-7 */
      }

#img3 {  position:absolute;  left:526px;

         clip: rect(40px  200px  150px  30px);
         /* non-standard syntax, but supported by all major browsers including Firefox and IE */
      }

hut.jpg hut.jpg hut.jpg

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>p     { border:dotted;  position:relative; }

#img2 { position:absolute;  left:263px;

        clip: rect(40px, 200px, 150px, 30px); 
        /* standard syntax, unsupported by Internet Explorer 4-7 */
      }

#img3 {  position:absolute;  left:526px;

         clip: rect(40px  200px  150px  30px);
         /* non-standard syntax, but supported by all major browsers including Firefox and IE */
      }
</pre>
<p style="position:relative; border:dotted"><img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="position:absolute; left:263px; clip: rect(40px, 200px, 150px, 30px)"> <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="position:absolute; left:526px; clip: rect(40px 200px 150px 30px)"></p><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