La propriété CSS resize

La propriété CSS resize contrôle si — et dans quelle direction — l'utilisateur peut redimensionner un élément en le faisant glisser. Lorsque le redimensionnement est activé, le navigateur affiche une petite poignée (généralement un bouton triangulaire) dans le coin inférieur droit de l'élément, permettant aux visiteurs d'étirer ou de rétrécir la boîte eux-mêmes.

Cette propriété fait partie des propriétés CSS3. Son usage le plus connu concerne l'élément <textarea>, qui est redimensionnable par défaut dans la plupart des navigateurs. Avec resize, vous pouvez étendre ce comportement à d'autres boîtes — ou le désactiver sur un <textarea> où un redimensionnement libre briserait votre mise en page.

Les quatre valeurs standard sont none, both, horizontal et vertical. Deux valeurs supplémentaires, block et inline, redimensionnent en fonction du sens d'écriture et sont encore considérées comme expérimentales.

Info

resize ne prend effet que si l'élément peut réellement rogner son propre contenu. Elle est ignorée sur les éléments en ligne et sur tout élément dont la propriété overflow est visible (la valeur par défaut). Pour que resize fonctionne sur un bloc générique tel qu'un <div>, définissez overflow sur auto, scroll ou hidden. Un <textarea> fonctionne sans cela car il établit déjà son propre conteneur de défilement.

Valeur initiale	none
S'applique à	Les éléments avec un overflow autre que visible, et optionnellement les éléments remplacés représentant des images ou des vidéos, et les iframes.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	Object.style.resize = "horizontal";

Syntaxe

resize: none | both | horizontal | vertical | block | inline | initial | inherit;

Combinez resize avec overflow et une width/height de départ raisonnable afin que la boîte ait une taille définie à partir de laquelle se redimensionner. Vous pouvez également utiliser min-width/max-width (ou leurs équivalents pour la hauteur) pour maintenir la boîte dans des limites raisonnables.

Exemple de la propriété resize avec la valeur "both"

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #1c87c9;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: both;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Ici, la hauteur et la largeur du <div> sont toutes deux déplaçables, car resize: both est combiné avec overflow: auto. Supprimez la ligne overflow et la poignée de glissement disparaît — c'est la raison la plus fréquente pour laquelle resize « ne fonctionne pas ».

Voyez un autre exemple, où l'élément n'est redimensionnable que verticalement :

Exemple de la propriété resize avec la valeur "vertical"

Exemple CSS de redimensionnement vertical

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #ccc;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        resize: vertical;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Un autre exemple où l'élément n'est redimensionnable que horizontalement :

Exemple de la propriété resize avec la valeur "horizontal"

Exemple CSS de redimensionnement horizontal

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #8ebf42;
        background-color: #eee;
        padding: 10px;
        width: 300px;
        height: 200px;
        resize: horizontal;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <h2>Resize property example</h2>
    <div>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </body>
</html>

Essayez vous-même »

Désactiver le redimensionnement sur un textarea

Un usage très courant dans la pratique est l'inverse des exemples ci-dessus : désactiver la poignée de glissement par défaut d'un <textarea> afin que les utilisateurs ne puissent pas casser un formulaire à largeur fixe. Définissez resize: none (ou souvent resize: vertical si vous souhaitez autoriser uniquement la croissance en hauteur) :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      textarea {
        width: 300px;
        height: 100px;
        /* allow the box to grow taller, but never wider */
        resize: vertical;
      }
    </style>
  </head>
  <body>
    <h2>Comment</h2>
    <textarea placeholder="Type your message..."></textarea>
  </body>
</html>

Quand l'utiliser

Textareas : le cas le plus courant. Utilisez resize: vertical pour permettre aux utilisateurs d'agrandir un champ de commentaire sans déformer la largeur du formulaire, ou resize: none pour le verrouiller entièrement.
Panneaux et aperçus redimensionnables : les éditeurs de code, les comparaisons d'images et les fenêtres de discussion permettent aux utilisateurs de faire glisser une boîte à la taille souhaitée.
Évitez sur les boîtes critiques pour la mise en page : si faire glisser un élément risque de chevaucher ou de pousser d'autres contenus de façon imprévisible, laissez resize à none.

Le redimensionnement ne modifie que la taille rendue dans le navigateur et n'affecte jamais le contenu réel, il n'a donc aucun effet sur le document soumis ou stocké.

Valeurs

Valeur	Description	Essayer
none	L'élément n'est pas redimensionnable. C'est la valeur par défaut de cette propriété.	Essayer »
both	L'élément est redimensionnable verticalement et horizontalement.	Essayer »
horizontal	L'élément est redimensionnable uniquement horizontalement.	Essayer »
vertical	L'élément est redimensionnable uniquement verticalement.	Essayer »
block	L'élément affiche un mécanisme permettant à l'utilisateur de le redimensionner dans la direction de bloc (horizontalement ou verticalement selon la valeur de writing-mode et de direction). Cette valeur est une technologie expérimentale.
inline	L'élément affiche un mécanisme permettant à l'utilisateur de le redimensionner dans la direction en ligne (horizontalement ou verticalement selon la valeur de writing-mode et de direction). Cette valeur est une technologie expérimentale.
initial	Donne à la propriété sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété depuis son élément parent.

Exercice

Pratique

Quelle propriété CSS est utilisée pour contrôler le comportement de redimensionnement d'un élément ?

resizescaletransformchange