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