overflow-clip-box-inline

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é CSS overflow-clip-box-inline définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).

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

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

Note : Sur Gecko, padding-box est, par défaut utilisé partout sauf pour <input type="text"> et les éléments semblables qui utilisent content-box. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.

Valeur introuvable dans la base de données

Syntaxe

Valeurs

padding-box
Avec ce mot-clé, le rognage est relatif à la boîte de remplissage (padding).
content-box
Avec ce mot-clé, le rognage est relatif à la boîte de contenu.

Syntaxe formelle

La syntaxe n'a pas été trouvée !

Exemples

padding-box

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-inline: 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 au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans CSS Overflow Module Level 3 si c'est le cas.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Support simple 59 (59)[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 59.0 (59)[1] Pas de support Pas de support Pas de support Pas de support

[1] Cette propriété est contrôlée par la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir bug 966992.

Voir aussi