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.

**Attention :** Cette propriété est dépréciée, on utilisera `clip-path` à la place.

La propriété CSS **`clip`** définit la portion visible d'un élément. La propriété `clip` s'applique uniquement aux éléments positionnés de façon absolue (c'est-à-dire qui ont `position:absolute` ou `position:fixed`).


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

/\* Valeur de type <shape> \*/
clip: rect(1px, 10em, 3rem, 2ch);

/\* Valeurs globales \*/
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
```

Syntaxe
-------

### Valeurs

`<shape>`

Une forme (type `<shape>`) rectangulaire avec la structure `rect(<haut>, <droit>, <bas>, <gauche>)`. Les valeurs `<haut>` et `<bas>` sont des décalages à partir du *bord intérieur haut de la bordure* de la boîte, tandis que `<droit>` et `<gauche>` sont des décalages à partir du *bord intérieur gauche de la bordure* de la boîte, c'est-à-dire la délimitation de la zone de remplissage (*padding*).

Les valeurs `<haut>`, `<droit>`, `<bas>`, et `<gauche>` peuvent être exprimées avec une longueur (valeur de type `<length>`) ou `auto`. Si l'une des valeurs est `auto`, l'élément est rogné sur *le bord intérieur de la bordure* du côté correspondant.

`auto`

L'élément n'est pas rogné (par défaut). Attention, le comportement est différent de celui obtenu avec `rect(auto, auto, auto, auto)`, qui rogne l'élément aux bords intérieurs de la bordure.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | éléments positionnés de manière absolue |
| Héritée | non |
| 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 |
| Type d'animation | un rectangle |

Syntaxe formelle
----------------
```

clip =   
  <rect()>  |  
  auto        
  
<rect()> =   
  rect( <top> , <right> , <bottom> , <left> )    
  
```

Exemples
--------

### Rogner une image

#### CSS


```css
.dotted-border {
  border: dotted;
  position: relative;
  width: 390px;
  height: 400px;
}

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

#top-left {
  left: 400px;
  clip: rect(0, 130px, 90px, 0);
}

#middle {
  left: 270px;
  clip: rect(100px, 260px, 190px, 130px);
}

#bottom-right {
  left: 140px;
  clip: rect(200px, 390px, 290px, 260px);
}
```


#### HTML


```html
<p class="dotted-border">
  <img src="macarons.png" title="Image originale" />
  <img id="top-left" src="macarons.png" title="Image rognée en haut à gauche" />
  <img id="middle" src="macarons.png" title="Image rognée au centre" />
  <img
 id="bottom-right"
 src="macarons.png"
 title="Image rognée en bas à droite" />
</p>
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1 # clip-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Cette propriété est dépréciée, on utilisera `clip-path` à la place.
* Les propriétés CSS connexes :
    + `text-overflow`
    + `white-space`
    + `overflow-x`
    + `overflow-y`
    + `overflow`
    + `display`
    + `position`