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