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.

Initialwert	`auto`
Anwendbar auf	absolut positionierte Elemente
Vererbt	Nein
Medien	visuell
Berechneter Wert	`auto`, falls als `auto` angegeben, ansonsten ein Rechteck mit vier Werten, von denen jeder `auto` ist, falls als `auto` angegeben, ansonsten die berechnete Länge
Animierbar	ja, als Rechteck
Kanonische Reihenfolge	die 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> | autowobei 
<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

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

Verwandte CSS Eigenschaften: text-overflow, white-space, overflow-x, overflow-y, overflow, display, position