overflow-clip-box

Kein Standard
Diese Funktion entspricht nicht dem Standard und ist nicht Teil der Standardisierung. Diese Funktion darf nicht in Webseiten, die via das Internet zugänglich sind, benutzt werden: Sie wird nicht für alle Nutzer funktionieren. Es kann zu umfangreichen Inkompatibilitäten zwischen verschiedenen Implementierungen kommen und die Funktionsweise oder Eigenschaften könnten in der Zukunft verändert werden.

Übersicht

Die overflow-clip-box CSS Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.

In Gecko wird standardmäßig padding-box überall verwendet, aber <input type="text"> und ähnliche Elemente verwenden den Wert content-box. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in User Agent Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.

Initialwertpadding-box
Anwendbar aufalle Elemente
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
AnimierbarNein
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Schlüsselwortwerte */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Globale Werte */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;

Werte

padding-box
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Paddingbox erfolgt.
content-box
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Contentbox erfolgt.

Formale Syntax

padding-box | content-box

Beispiele

padding-box

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>
.scroll { 
  overflow: auto;
  padding: 0 30px; 
  width: 6em; 
  border: 1px solid black;
  background: lime content-box;
}
.padding-box {
  overflow-clip-box: padding-box;
} 
function scrollSomeElements() {
  var elms = document.querySelectorAll('.scroll');
  for (i=0; i < elms.length; ++i) {
    elms[i].scrollLeft=80;
  }
}
var elt = document.queryElementsByTagName('body')[0];

elt.addEventListener("load", scrollSomeElements, false);

Spezifikationen

Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in CSS Overflow Module Level 3 erscheinen.

Browser Kompatibilität

Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Grundlegende Unterstützung 29.0 (29.0)[1] Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
Merkmal Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Grundlegende Unterstützung 29.0 (29.0)[1] Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] Diese Eigenschaft wird durch die layout.css.overflow-clip-box.enabled Einstellung gesteuert, welche standardmäßig false ist. Sie ist nur in User Agent Stylesheets und dem Chrome Kontext aktiviert. Siehe Bug 966992.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, fscholz, weedukind
 Zuletzt aktualisiert von: Sebastianz,