CSS / clip / Rechteckige Ausschnitte und Umstieg auf clip-path

clip ist eine alte CSS-Eigenschaft, die den sichtbaren Teil eines Elements auf ein Rechteck beschränkt. Sie gilt für Elemente mit position: absolute oder position: fixed und ist veraltet, daher sollte clip-path in neuem Code bevorzugt werden. Bei der Migration bestehenden Codes unterscheiden Sie die Grenzkoordinaten in rect() von den inneren Abständen in inset().

Voraussetzungen und wichtigste Werte

Clipping versteckt Zeichnungen außerhalb eines Bereichs. Es unterscheidet sich davon, die Originalbilddatei zu bearbeiten oder tatsächlich die Breite und Höhe des Elements zu reduzieren. Der Anfangswert von clip ist auto, und er wird nicht vererbt. Das Setzen nur von position: relative bewirkt nicht, dass das Legacy-Clipping angewendet wird.

Das alte Clip-Rechteck akzeptiert keine Prozentsätze. Der vollständige Wert clip: auto unterscheidet sich auch von rect(auto, auto, auto, auto). Letzteres schneidet an den Innenkanten des Rahmens, sodass überlaufende Nachfahren den Unterschied sichtbar machen können. MDN Clip-Syntax und Anwendungsbedingungen

Original und Ausschnitt am vollständigen Beispiel vergleichen

Speichern Sie den folgenden vollständigen Code als clip-example.html in UTF-8 und öffnen Sie ihn in einem Browser. Es werden keine externen Bilder, Bibliotheken oder Server benötigt. Bewahren Sie diese Demonstrationsstile in dieser Datei auf, anstatt sie in ein gemeinsames Site-Stylesheet einzufügen. Vergleichen Sie alle drei Boxen, ändern Sie dann jeweils einen Wert, speichern Sie und laden Sie die Seite neu.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>clip und clip-path vergleichen</title>
  <style>
    body { margin: 0; padding: 16px; font: 16px/1.6 sans-serif; }
    main { max-width: 760px; margin: auto; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .frame { position: relative; width: 200px; height: 120px;
      background: #e5e7eb; outline: 1px solid #666; }
    .target { width: 100%; height: 100%; padding: 0; border: 0;
      background: linear-gradient(135deg, #006c9c, #ffd166); }
    .legacy { position: absolute; top: 0; left: 0;
      clip: rect(20px, 180px, 100px, 20px); }
    .modern { clip-path: inset(20px); }
  </style>
</head>
<body>
  <main>
    <h1>clip und clip-path vergleichen</h1>
    <div class="samples">
      <section><h2>clip: auto</h2>
        <div class="frame"><div class="target"></div></div></section>
      <section><h2>clip: rect(20px, 180px, 100px, 20px)</h2>
        <div class="frame"><div class="target legacy"></div></div></section>
      <section><h2>clip-path: inset(20px)</h2>
        <div class="frame"><div class="target modern"></div></div></section>
    </div>
  </main>
</body>
</html>

Die erste Box ist die Referenz und zeigt den gesamten 200×120px-Gradienten. Die zweite und dritte sollten einen 160×80px-Bereich nach Ausschluss von 20px an jeder Kante zeigen. Der graue Hintergrund und die Umrandung gehören zu einem separaten Rahmen, sodass die ursprüngliche Boxgröße sichtbar bleibt. Bei einem schmalen Fenster rutschen die Vergleichsboxen in eine andere Reihe.

rect-Koordinaten in inset-Abstände umrechnen

Die beiden Deklarationen erzeugen denselben sichtbaren Bereich, weil ihre Zahlen unterschiedliche Bedeutungen haben. Diese Regeln entsprechen .legacy und .modern im vollständigen Beispiel.

.legacy {
  position: absolute;
  clip: rect(20px, 180px, 100px, 20px);
}
.modern {
  clip-path: inset(20px);
}

Im veralteten Rechteck werden oben und unten vom inneren oberen Rand gemessen; links und rechts werden vom inneren linken Rand gemessen. Eine rechte Koordinate von 180px bedeutet nicht, dass 180px von der rechten Seite entfernt werden. Die vier inset-Werte messen stattdessen nach innen von ihren jeweiligen Rändern, wobei die Border-Box verwendet wird, sofern kein anderes Bezugselement angegeben ist. Das Ziel in diesem Beispiel hat kein Padding oder Border, sodass dieser Unterschied im Bezugselement den Vergleich nicht beeinflusst.

Für eine Box mit Breite W und Höhe H ohne Padding oder Rahmen entspricht rect(t, r, b, l) inset(t, W − r, H − b, l). Fügen Sie in echtem CSS die berechneten Längen ein, anstatt erklärende Ausdrücke wie W − r zu kopieren. Wenn es Rahmen, Padding oder eine andere Bezugsbox gibt, gleichen Sie zuerst die Koordinatensysteme an. MDN clip-path Bezugsboxen und Formen

Elementgröße ändern und vergleichen

Ändern Sie zunächst nur .frame auf eine Breite von 300px und eine Höhe von 180px im vollständigen Beispiel. Wenn die alten Rechteckkoordinaten beibehalten werden, bleibt ein sichtbarer Bereich von 160×80px, während inset(20px) jetzt 260×140px ergibt, da jeweils 20px vom Rand des größeren Kastens ausgeschlossen werden. Vergleichen Sie, warum dieselben Zahlen nicht dasselbe abgeschnittene Ergebnis garantieren.

Um die beiden Methoden wieder anzugleichen, ändern Sie die rechte Grenze von .legacy auf 280px und die untere Grenze auf 160px. Ersetzen Sie diese beiden Regeln im vollständigen Beispiel wie folgt. Lassen Sie die .modern-Deklaration unverändert.

.frame {
  width: 300px;
  height: 180px;
}
.legacy {
  clip: rect(20px, 280px, 160px, 20px);
}

Beide Methoden sollten nun eine 260×140px große Region belassen. Stellen Sie nach dem Vergleich .frame wieder auf 200×120px und rect auf 20px, 180px, 100px, 20px zurück. Um denselben inneren Abstand in einer responsiven Box beizubehalten, drückt inset die Absicht direkter aus als das wiederholte Neuberechnen fester Grenzen.

Clipping, Layout und Zugänglichkeit

Beschneiden mit clip-path lässt in der Regel den Layoutbereich des Elements unverändert. Das Beispiel .modern nimmt 200×120px ein und nur sein gemalter Bereich wird kleiner. Das .legacy-Element befindet sich aufgrund absoluter Positionierung außerhalb des normalen Flusses; sein übergeordnetes Element .frame reserviert den Vergleichsbereich. Unterscheiden Sie diesen Positionierungseffekt vom eigentlichen Beschneiden.

Für neuen Code sollten Sie clip-path-Formen wie inset für ein Rechteck oder circle für einen Kreis in Betracht ziehen. Wenn das Ziel darin besteht, überlaufenden Inhalt auszublenden oder Scrollen anzubieten, berücksichtigen Sie die separate Rolle von overflow. Ein clip-path-Wert, der nicht none ist, kann auch einen Stapelkontext (stacking context) erstellen, überprüfen Sie daher überlappende Elemente nach der Migration. CSS Maskierung bei Clipping und Elemente-Geometrie

Clipping ist keine Zugriffskontrolle oder Datenschutzmaßnahme. Versteckter Text kann im Dokument verbleiben, und seine Behandlung durch unterstützende Technologien muss separat überprüft werden. Vermeiden Sie das Clipping von Schaltflächen, Eingabefeldern, wichtigen Informationen oder Tastatur-Fokusindikatoren, wenn dadurch die Bedienung der Oberfläche verhindert wird. Stellen Sie eine Möglichkeit bereit, den Inhalt beim Zoomen oder bei der Verwendung von Touch- und Tastaturnavigation zu lesen.

Wenn Clipping fehlt oder anders aussieht

• Überprüfen Sie die berechnete Position und das Zuschneiden des ausgewählten Elements in den Entwicklertools. Relative oder statische Positionierung erfüllt nicht die Bedingungen des Legacy-Zuschneidens. Ändern Sie im Beispiel nur position von .legacy auf relative, vergleichen Sie, ob das Zuschneiden verschwindet, und stellen Sie dann absolute wieder her.
• Die Reihenfolge der rect-Werte ist oben, rechts, unten, links. Wenn rechts kleiner als links oder unten kleiner als oben ist, bleibt das erwartete Rechteck nicht erhalten. Überprüfen Sie, ob alte Koordinaten nach der Änderung von Breite oder Höhe beibehalten wurden.
• Das Overflow, clip-path oder eine andere Zuschneideregel eines Vorfahren kann den sichtbaren Bereich weiter reduzieren. Deaktivieren und aktivieren Sie Deklarationen einzeln in den Entwicklertools, um die Ursache zu isolieren.
• Beim Ersetzen von clip durch clip-path sollten Sie Positionierung, Referenzrahmen, Ränder, Innenabstände, Stapelreihenfolge und Fokusindikatoren vergleichen. Das alte rect(), das von clip verwendet wird, und die neuere rect()‑Form in clip-path haben eine unterschiedliche Syntax; gleiche Namen bedeuten nicht, dass ihre Werte austauschbar sind.