overflow-clip-box

Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété overflow-clip-box permet de définir la boîte à laquelle faire référence lorsqu'il y a un dépassement du contenu.

On Gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. Prior to Firefox 29, this behavior was hardcoded; since then it uses this property that can be used elsewhere too. Note that this property is activated by default only in the UA stylesheet and chrome contexts.

Valeur initiale	`padding-box`
Applicabilité	tous les éléments
Héritée	non
Média	visuel
Valeur calculée	comme spécifié
Animable	non
Ordre canonique	l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Valeurs avec un mot-clé */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Valeurs globales */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;

Valeurs

padding-box: Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de remplissage (padding).
content-box: Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de contenu.

Syntaxe formelle

padding-box | content-box

Exemples

HTML

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>

CSS

.scroll { 
  overflow: auto;
  padding: 0 30px; 
  width: 6em; 
  border: 1px solid black;
  background: lime content-box;
}

.padding-box {
  overflow-clip-box: padding-box;
}

JavaScript

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);

Résultat

Spécifications

Cette propriété a été proposée dans le cadre du groupe de travail CSS du W3C. Elle n'est pas encore sur le chemin du processus standard mais si elle est acceptée, elle fera vraisemblablement partie de la spécification CSS Overflow Module Level 3.

Fonctionnalité	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Support simple	29.0 (29.0)^[1]	Pas de support	Pas de support	Pas de support	Pas de support

Fonctionnalité	Firefox Mobile (Gecko)	Android	IE Phone	Opera Mobile	Safari Mobile
Support simple	29.0 (29.0)^[1]	Pas de support	Pas de support	Pas de support	Pas de support

[1] Cette propriété est contrôlée grâce à la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, voir bug 966992.