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 initiale | auto |
---|---|
Applicabilité | éléments positionnés de manière absolue |
Héritée | non |
Média | visuel |
Valeur calculée | auto 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 |
Animable | oui, comme un rectangle |
Ordre canonique | l'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 avecrect(<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>
) ouauto
. Si un des côtés vautauto
, 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> | autooù
<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).