blog

Siamo giunti alla rubrica mensile Proprietà CSS3, dedicata alle ultime novità sulle nuove proprietà della terza versione dei CSS.

La proprietà CSS3 di oggi è: Resize permette di specificare se un elemento è ridimensionabile dall’utente oppure no, e se si, lungo quale asse: verticale, orizzontale o entrambi.

Sintassi e definizione di Resize

La proprietà Resize può avere i seguenti valori:

both: l’elemento può essere ridimensionato sia in verticale che orizzontale;
none: l’elemento è fisso, non può essere ridimensionato;
horizontal: l’elemento può essere ridimensionato solo orizzontalmente;
vertical: l’elemento può essere ridimensionato solo verticalmente;

A tal riguardo è giusto specificare che tutti gli elementi hanno come valore di default resize: “none”, tranne la textarea che ha come predefinito il valore “both”.

Vediamo subito come si presenta:

La sintassi CSS del precedente esempio è la seguente:

div {
      height: 50px;
      width: 300px;
      padding:5px;
      background: #EEEEEE;
      border: 3px solid #DDDDDD;
      overflow: auto;
      resize: horizontal;
}

Come si può notare è molto importante specificare la proprietà overflow.

Impedire a <textarea> di essere ridimensionata

Come è stato già accennato l’elemento textarea ha di default la proprietà resize impostata su “both” e perciò è ridimensionabile sia in larghezza che in altezza. Per impedire agli utenti di allargare o restringere la textarea è necessario specificare il valore “none” alla proprietà resize:

La sintassi per impedire alla textarea di essere ridimensionata è la seguente:

textarea { resize: none; }

Settare il ridimensionamento massimo e minimo

Per questioni grafiche consiglio di inserire dei paletti per quanto riguarda il ridimensionamento massimo e minimo, questo può essere specificato con queste semplici proprietà:
max-width: larghezza massima
max-height: altezza massima
min-width: larghezza minima
min-height: altezza minima

Vediamo un’esempio:

La sintassi CSS del precedente esempio è la seguente:

div {
      height: 50px;
      width: 300px;
      padding:5px;
      background: #EEEEEE;
      border: 3px solid #DDDDDD;
      overflow: auto;
      resize: both;
      max-width:480px;
      max-height:100px;
      min-width:50px;
      min-height:50px;
}

Foto di Elenathewise – Fotolia.com