La proprietà resize di CSS3
Tra le tante novità in via di introduzione da parte di CSS3, la nuova - e non ancora definitiva - release dei Cascading Style Sheet, una proprietà particolarmente interessante è sicuramente resize. Grazie a questa proprietà, com'è facile intuire, è possibile creare, in modo semplicissimo, elementi ridimensionabili all'interno delle nostre pagine web utilizzando una riga di codice CSS (fino all'avvento di CSS3 la creazione di elementi ridimensionabili richiedeva il ricorso a complesse funzionalità Javascript).
Attualmente questa proprietà, così come molte altre dei CSS3, non è universalmente supportata da tutti browser ma solo quelli della famiglia WebKit (Safari e Chrome) e da Firefox 4.
Da segnalare che su questi browser alcuni elementi della pagina, come ad esempio il tag <textarea>, risultano ridimensionabili di default sia in altezza che in larghezza.
Gestire il resize
La proprietà resize può avere diversi valori:
- none = l'elemento non è ridimensionabile;
- horizontal = l'elemento può essere ridimensionato solo orizzontalmente;
- vertical = l'elemento può essere ridimensionato solo verticalmente;
- both = l'elemento può essere ridimensionato sia verticalmente che orizzontalmente;
/*
Impedisco il resize delle textarea
*/
textarea { resize: none; }
/*
Creo un elemento ridimensionabile in verticale
*/
div.vert{ resize: vertical; }
Gestire le dimensioni in modo vincolato
L'utilizzo della proprietà resize, molto spesso, viene accompagnata - per ragioni di design - a dei vincoli che determinano le dimensioni minime e/o massime che l'elemento ridimensionabile può assumere. Per fare questo si ricorre alle seguenti proprietà CSS:
- max-width e max-height
- min-width e min-height
div.horiz {
height: 200px;
width: 300px;
max-width: 600px;
background: #EEEEEE;
border: 3px solid #DDDDDD;
overflow: auto;
resize: horizontal;
}
A questa pagina potete vedere una demo funzionante (ovviamente, per vedere la proprietà resize all'opera è necessario utilizzare un browser che la supporti).
