We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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. C'est une propriété raccourcie pour les propriétés overflow-clip-box-inline et overflow-clip-box-block.

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

/* Deux valeurs */
overflow-clip-box: padding-box content-box;
overflow-clip-box: content-box content-box;

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

Note : Par défaut, sur Gecko, padding-box est utilisé partout mais <input type="text"> et les éléments similaires utilisent la valeur content-box. Avant Firefox 29, ce comportement était intégré en dur. Depuis, le comportement se base sur cette propriété qui peut être utilisée à d'autres endroits. On notera que cette propriété est uniquement activée pour les feuilles de styles définies au niveau de l'agent utilisateur et pour les contextes liés au chrome de l'application.

Valeur initialepadding-box
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

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.

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 29.0 (29.0)[1] Pas de support Pas de support Pas de support Pas de support
Propriété raccourcie, gestion de deux valeurs 59 (59) 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
Propriété raccourcie, gestion de deux valeurs 59.0 (59) 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.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,