Paradox Designs

CSS3 includes a useful new property called Resize. This allows a developer to specify any block element in their site as resizeable, and the users of said site to be able to resize it, either by grippy handles in a corner, or by expanding the edges via cursors. Another useful trick of css is how to control these resizings, as you don’t want users to blow up the comment box to take over your site[1. A user's resize settings are NOT saved (as of current browser technology), and do not affect other users. Every time a page is reloaded, the elements return to their normal size, unless you implement some other method to remember the settings.], or shrink it down to where they don’t know where it is.

Note: Currently, only Webkit based browsers[2. Google Chrome and Apple Safari] support the resize property, but in time, more browsers should support.

Defaults

By default, browsers make text areas (multi line input=text boxes) resizeable, and don’t set restrictions on how it is resized. But this does not mean you can’t make any element resizeable, as demonstrated below:

That is a div that can be resized in any direction, but only to double its original size. It cannot be shrunk less than its original size.

Making an element Resize

To make any element in your site resize, you must be able to style the element. You can do this either via classes, ids, style tags, or any other valid css styling mechanism. In the case of this guide, i will be using classes.

When you have the element you want to affect defined in some manner, add the following css tag: resize
The resize tag is all you need to make an element resizeable, and even control the direction in which it can be modified. The paramiters for said element can be seen below:

Those only give you basic control of an element’s sizing, though. Users can still expand an element or shrink it as much as they want, and break your site layout while doing so. Thats where the next section comes in useful.

Google Chrome does not seem to honor resize: vertical and resize: horizontal. This may change in future versions, but as of writing, the best tips are to set the max and min properties for the direction you do not want to resize to the same value as width.

Controlling an element’s size

The initial size of an element is set via the width and height css properties. You should use these for most of your sizing, so they should not provide a problem.

If you already use max-width, max-height, min-width, and min-height, you are good to go.

If you don’t, you have just been introduced to those properties. They set how big or small an element can be, and provide incredibly useful.

Those size restrictions also apply to the resize property. An element cannot be resized more than its max-width or max-height, nor can it be shrunk more than its min-width or min-height. This makes it very easy to control exactly what users can and cant do, and should provide useful.

With these tips, I hope you are able to make your websites much more dynamic for the users, while ensuring that your layout and design is not broken.