La propriété resize permet de contrôler le caractère redimensionnable d'un élément.
| 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 |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* 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;
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- Selon les valeurs de
writing-modeetdirection, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du bloc. inline- Selon les valeurs de
writing-modeetdirection, l'élément affiche un mécanisme pour que l'utilisateur puisse le redimensionner, horizontalement ou verticalement, dans la direction du flux en ligne.
Syntaxe formelle
none | both | horizontal | vertical
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 :
textarea.exemple {
resize: none;
}
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
.redimensionnable {
resize: both;
overflow: scroll;
border: 1px solid black;
}
div {
height: 300px;
width: 300px;
}
p {
height: 200px;
width: 200px;
}
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
| Spécification | Statut | Commentaires |
|---|---|---|
| CSS Logical Properties Level 1 La définition de 'resize' dans cette spécification. |
Brouillon de l'éditeur | Ajout des valeurs block et inline. |
| CSS Basic User Interface Module Level 3 La définition de 'resize' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
Support simple (sur <textarea>) |
1.0 | 4.0 (2.0)-moz | Pas de support | 12.1 | 3.0 (522) |
Sur n'importe quel élément de bloc, replacé, cellule de tableau, en ligne (sauf quand overflow vaut visible) |
4.0 | 5.0 (5.0)[1] | Pas de support | 15 | 4.0 |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Support simple (sur <textarea>) |
? | ? | ? | ? | ? |
Sur n'importe quel élément de bloc, replacé, cellule de tableau, en ligne (sauf quand overflow vaut visible) |
? | ?[1] | ? | ? | ? |
[1] resize n'a actuellement aucun effet sur <iframe> (cf. bug 680823)