resize
======

La propriété **`resize`** permet de contrôler le caractère redimensionnable d'un élément et notamment la direction dans laquelle celui-ci peut être redimensionné.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/\* Valeurs globales \*/
resize: inherit;
resize: initial;
resize: unset;
```


La propriété `resize` peut être définie avec l'un des mots-clés suivants.

### Valeurs

`none`

L'élément n'offre aucune méthode à l'utilisateur pour que celui-ci le redimensionne.

`both`

L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner, horizontalement et verticalement.

`horizontal`

L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner horizontalement (pas de redimensionnement vertical).

`vertical`

L'élément affiche un mécanisme afin que l'utilisateur puisse le redimensionner verticalement (pas de redimensionnement horizontal).

`block` 
Expérimental

Selon les valeurs de `writing-mode` et `direction`, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc.

`inline` 
Expérimental

Selon les valeurs de `writing-mode` et `direction`, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.


**Note :** `resize` ne s'applique pas aux blocs dont la propriété `overflow` vaut `visible`.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | éléments dont `overflow` ne vaut pas `visible` et éventuellement les éléments remplacés qui représentent des images, des vidéos ou des iframes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

resize =   
  none        |  
  both        |  
  horizontal  |  
  vertical    |  
  block       |  
  inline        
  
```

Exemples
--------

### Désactiver le redimensionnement des éléments `textarea`

#### CSS

Par défaut, les éléments `<textarea>` peuvent être redimensionnés. Ce comportement peut être modifié grâce à ce fragment CSS :


```css
textarea.exemple {
  resize: none;
}
```


#### HTML


```html
<textarea class="exemple">Saisir du texte ici.</textarea>
```


#### Résultat

### Utiliser `resize` sur des éléments quelconques

La propriété `resize` peut être utilisée afin de pouvoir redimensionner n'importe quel élément. Dans l'exemple qui suit, on a une boîte `<div>` redimensionnable qui contient un paragraphe ((`<p>`) lui-même redimensionnable) :

#### CSS


```css
.redimensionnable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}
```


#### HTML


```html
<div class="redimensionnable">
  <p class="redimensionnable">
    Ce paragraphe peut être redimensionné car la propriété CSS resize vaut
    'both' sur cet élément.
  </p>
</div>
```


#### Résultat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # resize |

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

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

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

* `<textarea>`