CSS clip-Eigenschaft
Die CSS clip-Eigenschaft gilt nur für absolut positionierte Elemente mit position: absolute oder position: fixed. Beispiele ausprobieren.
Die CSS-Eigenschaft clip definiert ein Rechteck, das ein positioniertes Element zuschneidet und alles außerhalb dieses Rechtecks verbirgt. Alles jenseits des sichtbaren Bereichs wird nicht gerendert und reagiert nicht auf Klicks. Es ist das ursprüngliche „Zeige nur diesen Teil der Box"-Werkzeug in CSS, und obwohl es inzwischen zugunsten von clip-path veraltet ist, begegnet man ihm noch in älterem Code und im klassischen Barrierefreiheitsmuster für „visuell versteckte" Elemente.
Diese Seite beschreibt, was clip bewirkt, wie die rect()-Koordinaten funktionieren, wo es anwendbar ist und wie man zur modernen Alternative migriert.
Wie clip funktioniert
Der Zuschneidebereich ist ein Rechteck, das als rect(top, right, bottom, left) angegeben wird. Jeder Wert ist ein Längen-Offset, gemessen von der oberen linken Ecke der Border Box des Elements — er beantwortet also die Frage „wie weit von der Kante entfernt liegt diese Seite des sichtbaren Fensters?":
top— Abstand vom oberen Rand bis zur Oberkante des sichtbaren Bereichs.right— Abstand vom linken Rand bis zur rechten Seite des sichtbaren Bereichs.bottom— Abstand vom oberen Rand bis zur Unterkante des sichtbaren Bereichs.left— Abstand vom linken Rand bis zur linken Seite des sichtbaren Bereichs.
rect(10px, 80px, 60px, 60px) behält also den Ausschnitt des Elements zwischen x = 20px…80px und y = 10px…60px und blendet den Rest aus. Jeder der vier Werte kann auch auto sein, was „die eigene Kante des Elements verwenden" bedeutet (keine Beschneidung auf dieser Seite).
clip wirkt nur auf absolut positionierte Elemente — also Elemente mit position: absolute oder position: fixed. Bei statisch oder relativ positionierten Elementen wird es ignoriert. Es wird auch ignoriert, wenn die Eigenschaft overflow auf visible gesetzt ist (der Standardwert), sodass ein beschnittenes Element in der Regel bereits position: absolute benötigt, um seinen eigenen Kontext zu etablieren.
Die Komma-Falle
CSS2 definierte rect() mit Kommas — rect(0px, 70px, 200px, 0px) — aber einige ältere Browser akzeptierten auch eine durch Leerzeichen getrennte Form: rect(0px 70px 200px 0px). Die Kommaform ist die sichere Variante. Einheiten sind immer anzugeben; rect(0, 70, 200, 0) ohne px ist ungültig.
Die Eigenschaft clip ist veraltet und aus der modernen CSS-Spezifikation entfernt. Für neue Projekte sollte clip-path verwendet werden, das nicht auf Rechtecke beschränkt ist, auf jedes positionierte oder statische Element angewendet werden kann und animierbar ist. Der direkte Ersatz für clip: rect(t, r, b, l) ist clip-path: inset(t calc(100% - r) calc(100% - b) l) oder einfacher clip-path: rect(t r b l) in Browsern, die die rect()-Form unterstützen.
| Anfangswert | auto |
|---|---|
| Gilt für | Absolut positionierte Elemente. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.clip = "rect(10px,40px,40px,10px)"; |
Syntax
Syntax der CSS clip-Eigenschaft
clip: auto | shape | initial | inherit;Beispiel der clip-Eigenschaft:
Beispiel der CSS clip-Eigenschaft mit dem Wert auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: auto;
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com" />
</body>
</html>Ergebnis
Mit clip: auto wird nichts beschnitten — das vollständige Bild wird angezeigt. Im nächsten Beispiel schneidet das rect()-Rechteck das Bild auf den durch seine Koordinaten definierten Bereich zu.
Beispiel der clip-Eigenschaft mit dem Wert „rect":
Beispiel der CSS clip-Eigenschaft mit dem shape-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
clip: rect(0px, 70px, 200px, 0px);
}
</style>
</head>
<body>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3docs.com logo" />
</body>
</html>Das „visuell versteckte" Muster
Der häufigste Grund, warum clip in echtem Code noch vorkommt, ist das visually hidden-Hilfsmuster (a11y). Es blendet Inhalte für sehende Benutzer aus, macht sie aber weiterhin für Screenreader zugänglich — anders als display: none oder visibility: hidden, die den Text auch aus dem Accessibility-Baum entfernen.
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}Wendet man es auf ein <span> an, das einen Icon-Only-Button beschriftet, wird die Beschriftung angekündigt, aber nie gezeichnet. Moderne Stylesheets kombinieren dies mit clip-path: inset(50%), damit der Helfer auch dann noch funktioniert, wenn clip schrittweise abgeschafft wird.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Schneidet ein Element nicht zu. Dies ist der Standardwert. | Ausprobieren » |
| shape | Schneidet ein Element zu. Der einzige gültige Wert ist rect(top, right, bottom, left). | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |