Proprietà CSS resize

La proprietà CSS resize controlla se — e in quale direzione — l'utente può ridimensionare un elemento trascinandolo. Quando il ridimensionamento è abilitato, il browser mostra una piccola maniglia di trascinamento (di solito un pomello triangolare) nell'angolo in basso a destra dell'elemento, permettendo ai visitatori di allargare o restringere il riquadro autonomamente.

Questa proprietà fa parte delle proprietà CSS3. Il suo utilizzo più comune riguarda l'elemento <textarea>, che è ridimensionabile per impostazione predefinita nella maggior parte dei browser. Con resize, è possibile estendere lo stesso comportamento ad altri riquadri — oppure disabilitarlo su un <textarea> dove il ridimensionamento libero romperebbe il layout.

I quattro valori standard sono none, both, horizontal e vertical. Due valori aggiuntivi, block e inline, ridimensionano in relazione alla direzione di scrittura e sono ancora considerati sperimentali.

Informazione

resize ha effetto solo quando l'elemento è in grado di ritagliare il proprio contenuto. Viene ignorato sugli elementi inline e su qualsiasi elemento il cui overflow sia visible (il valore predefinito). Per far funzionare resize su un blocco generico come un <div>, impostare overflow su auto, scroll o hidden. Un <textarea> funziona senza questo requisito perché stabilisce già un proprio contenitore scorrevole.

Valore iniziale	none
Si applica a	Elementi con overflow diverso da visible, e opzionalmente elementi sostituiti che rappresentano immagini o video, e iframe.
Ereditato	No.
Animabile	No.
Versione	CSS3
Sintassi DOM	Object.style.resize = "horizontal";

Sintassi

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

Abbinare resize con overflow e un valore iniziale sensato per width/height in modo che il riquadro abbia una dimensione definita da cui partire. Potrebbe essere utile anche specificare min-width/max-width (o le rispettive controparti per l'altezza) per mantenere il riquadro entro limiti ragionevoli.

Esempio della proprietà resize con il valore "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>

Provalo tu stesso »

In questo caso sia l'altezza che la larghezza del <div> sono trascinabili, poiché resize: both è combinato con overflow: auto. Rimuovere la riga overflow fa scomparire la maniglia di trascinamento — questa è la ragione più comune per cui resize "non funziona".

Ecco un altro esempio, in cui l'elemento è ridimensionabile solo verticalmente:

Esempio della proprietà resize con il valore "vertical"

Esempio CSS di elemento ridimensionabile verticalmente

<!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>

Provalo tu stesso »

Un altro esempio in cui l'elemento è ridimensionabile solo orizzontalmente:

Esempio della proprietà resize con il valore "horizontal"

Esempio CSS di elemento ridimensionabile orizzontalmente

<!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>

Provalo tu stesso »

Disabilitare il ridimensionamento su un textarea

Un caso d'uso molto comune nella pratica è l'opposto degli esempi precedenti: disabilitare la maniglia di trascinamento predefinita su un <textarea> in modo che gli utenti non possano rompere un modulo a larghezza fissa. Impostare resize: none (oppure resize: vertical se si vuole consentire solo la crescita in altezza):

<!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>

Quando utilizzarlo

Textarea: il caso quotidiano. Usare resize: vertical per permettere agli utenti di allungare un campo commento senza distorcere la larghezza del modulo, oppure resize: none per bloccarlo completamente.
Pannelli e anteprime ridimensionabili: editor di codice, confronti di immagini e finestre di chat consentono agli utenti di trascinare un riquadro fino a una dimensione comoda.
Evitare su riquadri critici per il layout: se trascinare un elemento potrebbe sovrapporre o spostare altri contenuti in modo imprevedibile, lasciare resize su none.

Poiché il ridimensionamento modifica solo la dimensione visualizzata nel browser e mai il contenuto effettivo, non ha alcun effetto sul documento inviato o memorizzato.

Valori

Valore	Descrizione	Provalo
none	L'elemento non viene ridimensionato. Questo è il valore predefinito della proprietà.	Provalo »
both	L'elemento viene ridimensionato sia verticalmente che orizzontalmente.	Provalo »
horizontal	L'elemento viene ridimensionato solo orizzontalmente.	Provalo »
vertical	L'elemento viene ridimensionato solo verticalmente.	Provalo »
block	L'elemento mostra un meccanismo per consentire all'utente di ridimensionarlo nella direzione del blocco (orizzontalmente o verticalmente a seconda del valore di writing-mode e direction). Questo valore è una tecnologia sperimentale.
inline	L'elemento mostra un meccanismo per consentire all'utente di ridimensionarlo nella direzione inline (orizzontalmente o verticalmente a seconda del valore di writing-mode e direction). Questo valore è una tecnologia sperimentale.
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Esercitazione

Pratica

Quale proprietà CSS si usa per controllare il comportamento di ridimensionamento di un elemento?

resizescaletransformchange