MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Obsolète
Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété clip permet de définir la zone d'un élément qui est visible. La propriété clip s'applique uniquement aux éléments positionnés de façon absolue (autrement dit, ceux avec position:absolute ou position:fixed).

/* Valeur avec un mot-clé */
clip: auto;

/* Valeurs de forme */
/* Type <shape>     */
clip: rect(1px 10em 3rem 2ch);
clip: rect(1px, 10em, 3rem, 2ch);

/* Valeurs globales */
clip: inherit;
clip: initial;
clip: unset;

Attention ! Cette propriété est dépréciée et ne doit plus être utilisée. La propriété clip-path peut être utilisée à la place.

Valeur initialeauto
Applicabilitééléments positionnés de manière absolue
Héritéenon
Médiavisuel
Valeur calculéeauto si spécifié comme auto, sinon un rectangle avec quatre valeurs dont chacune vaut auto si elles sont spécifiées comme auto sinon, la longueur calculée
Type d'animationun rectangle
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Valeurs

<shape>
Une forme rectangulaire indiquée avec rect(<haut>, <droite>, <bas>, <gauche>) ou avec rect(<haut> <droite> <bas> <gauche>). <haut> et <bas> indiquent les décalages à partir du haut de la boîte de bordure, <gauche> et <droite> indiquent les décalages à partir du bord gauche de la boîte de bordure.
<haut>, <droite>, <bas> et <gauche> peuvent avoir une valeur de longueur (type <length>) ou auto. Si un des côtés vaut auto, l'élément est rogné sur ce côté avec le bord intérieur de la boîte de bordure.
auto
L'élément n'est pas rogné (la valeur par défaut). Attention, l'effet obtenu n'est pas le même que rect(auto, auto, auto, auto).

Syntaxe formelle

<shape> | auto


<shape> = rect(<top>, <right>, <bottom>, <left>)

Spécifications

Spécification État Commentaires
CSS Masking Module Level 1
La définition de 'clip' dans cette spécification.
Candidat au statut de recommandation Dépréciation de la propriété clip et proposition de  clip-path comme remplacement.
CSS Transitions
La définition de 'clip' dans cette spécification.
Version de travail clip peut être animée.
CSS Level 2 (Revision 1)
La définition de 'clip' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) (Oui) 4.0[1] 7.0 1.0 (85)[1]
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Phone Opera Mobile Safari Mobile
Support simple ? ? (Oui) ? ? ?

[1] Pour Internet Explorer jusqu'à la version 7.0 et pour Safari jusqu'à la version 5.1.7 interprétaient clip: auto comme clip: rect(auto, auto, auto, auto) (ce qui était incorrect).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, mrstork, Sebastianz, teoli, FredB, Mgjbot, Valacar, Elethiomel, Fredchat
 Dernière mise à jour par : SphinxKnight,