Resize the property of CSS3

Among the many innovations being introduced by CSS3, the new - and not yet final - release of the Cascading Style Sheets, a property is particularly interesting is resize. Thanks to this property, it is easy to see, you can create, so simple, resizable elements within our web pages using one line of CSS code (until the advent of CSS3 creating elements required the use of scalable complex JavaScript functions).

Currently this property, as well as many other of CSS3 is not universally supported by all browsers but only those of the family WebKit (Safari and Chrome) and Firefox 4.

Be noted that some of these browsers page elements, such as the tag <textarea>, are resizable by default in both height and width.

Managing resize

Resize the property may have different values:

• none = element is not resizable;
• Horizontal = the element can be resized horizontally only;
• = vertical element can be resized vertically only;
• both = the element can be resized both vertically and horizontally;

Here are some instance:

 / *







 Prevents resizing of textarea







 * /







 textarea {resize: none;}









 / *







 I create a resizable element vertically







 * /







 div.vert {resize: vertical;}

Manage the size with bound

The use of the property resize very often is accompanied - for reasons of design - to the constraints that determine the minimum and / or maximum can assume that the element resizable. To do this we used the following CSS properties:

• max-width and max-height
• min-width and min-height

Let's see an example of a resizable div horizontally with fixed maximum width:

 {div.horiz



  



 height: 200px;



  



 width: 300px;



  



 max-width: 600px;



  



 background: # EEEEEE;



  



 border: 3px solid # dddddd;



  



 overflow: auto;



  



 resize: horizontal;







 }

On this page you can see a working demo (of course, to see the property resize the work you must use a browser that supports it).