Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

resize

La propriété resize permet de contrôler le caractère redimensionnable d'un élément.

Valeur initialenone
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éenon
Médiavisuel
Valeur calculéecomme spécifié
Animablenon
Ordre canoniquel'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-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
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.

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)

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Sebastianz, teoli, FredB
 Dernière mise à jour par : SphinxKnight,