Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

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
Animableoui, comme un rectangle
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* 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;

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 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) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.0 (1.0) 4.0[1] 7.0 1.0 (85)[1]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

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