clip

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

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

Exemples

CSS

.dotted-border {
  border: dotted;
  position: relative;
  width: 536px;
  height: 350px;
}

#top-left, #middle, #bottom-right {
  position: absolute;
  top: 0px;
}

#top-left {
  left: 360px;
  clip: rect(0px, 175px, 113px, 0px);
}


#middle {
  left: 280px;
  clip: rect(119px, 255px, 229px, 80px);
  /* standard syntax, unsupported by Internet Explorer 4-7 */
}

#bottom-right {
  left: 200px;
  clip: rect(235px 335px 345px 160px);
  /* non-standard syntax, but supported by all major browsers*/
}

HTML

<p class="dotted-border">
  <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic">
  <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left">
  <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle">
  <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right">
</p>

Résultat

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

BCD tables only load in the browser

Voir aussi