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
AnimationstypRechteck
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 Module 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
clip
Veraltet
Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Before Internet Explorer 7, Internet Explorer incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
Opera Vollständige Unterstützung 7Safari Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Safari incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android ? Safari iOS Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise Safari incorrectly interprets clip: auto as clip: rect(auto, auto, auto, auto).
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Veraltet. Nicht für den Einsatz in neuen Webseiten gedacht.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch