clip

Unerwünscht
Dieses Feature wurde aus den Webstandards entfernt. Obwohl manche Browser es immer noch unterstützen, wird es zukünftig wegfallen. Es sollte daher nicht mehr in alten oder neuen Projekten verwendet werden. Webseiten oder Webapps, die es benutzen, funktionieren möglicherweise irgendwann nicht mehr korrekt.

Übersicht

Die clip CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit position:absolute.

Warnung: Diese Eigenschaft ist veraltet. Es sollte stattdessen clip-path verwendet werden.

Initialwertauto
Anwendbar aufabsolut positionierte Elemente
VererbtNein
Medienvisuell
Berechneter Wertauto, falls als auto angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder auto ist, falls als auto angegeben, ansonsten die berechnete Länge
Animierbarja, als Rechteck
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwert */
clip: auto;

/* <shape> Werte */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

/* Globale Werte */
clip: inherit;
clip: initial;
clip: unset;

Werte

<shape>
Ein rechteckiger <shape> Wert der Form rect(<top>, <right>, <bottom>, <left>) oder rect(<top> <right> <bottom> <left>) wobei <top> und <bottom> Versätze von der Innenseite des oberen Randes der Box angeben und <right> und <left> Versätze von der Innenseite des linken Randes der Box — d. h. die Ausmaße der Innenabstandsbox.
<top>, <right>, <bottom> und <left> können entweder einen <length> Wert haben oder auto. Falls der Wert irgendeiner Seite auto ist, wird das Element an der Innenseite des Randes dieser Seite abgeschnitten.
auto
Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von rect(auto, auto, auto, auto) unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.

Formale Syntax

<shape> | auto

wobei
<shape> = rect(<top>, <right>, <bottom>, <left>)

Beispiele

.dotted-border { 
   border: dotted;  
   position: relative; 
   width: 536px;
   height: 350px;
}

#top-left, #middle, #bottom-right {
   position: absolute;
   top: 0px;
}

#top-left {
   left: 360px;
   clip: rect(0px, 175px, 113px, 0px); 
}


#middle {
   left: 280px;
   clip: rect(119px, 255px, 229px, 80px); 
   /* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */
}

#bottom-right {
   left: 200px;
   clip: rect(235px 335px 345px 160px);
   /* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */
}
<p class="dotted-border">
   <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" /> 
   <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist"> 
   <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist"> 
   <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist">
</p>

Spezifikationen

Spezifikation Status Kommentar
CSS Masking Level 1
Die Definition von 'clip' in dieser Spezifikation.
Anwärter Empfehlung Markiert die clip Eigenschaft als veraltet, schlägt clip-path als Ersatz vor.
CSS Transitions
Die Definition von 'clip' in dieser Spezifikation.
Arbeitsentwurf Definiert clip als animierbar.
CSS Level 2 (Revision 1)
Die Definition von 'clip' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Merkmal Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 1.0 1.0 (1.0) 4.0[1] 7.0 1.0 (85)[1]
Merkmal Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung ? ? ? ? ?

[1] Internet Explorer bis Version 7.0 und Safari bis mindestens Version 5.1.7 interpretieren clip: auto fälschlicherweise als clip: rect(auto, auto, auto, auto).

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: mrstork, Sebastianz
 Zuletzt aktualisiert von: mrstork,