Here’s a CSS3 property that has very little support and that I’m not sure has too many real world applications or if it would even be extremely beneficial — the CSS3 resize property.
The resize property is part of the W3C’s Basic User Interface Module, which is in the candidate recommendation stage.
Unfortunately, the resize property is listed in the Features at Risk section of that same document, so it’s quite possible that this feature will be removed if browser-makers don’t support it. Nonetheless, here’s a quick review of exactly what this property is all about so you can decide if it’s of any practical use in your projects.
Description and Syntax
The resize property allows a developer to define whether or not a UI element can be resized manually by the user.
The property accepts three unique values: “both”, “horizontal”, and “vertical”. It also accepts the generic none and initial. I think they’re all pretty self explanatory. But basically, the value dictates whether the element can be resized in both directions or in one direction. The code is as follows (take note of what else I’ve included):
.element {
overflow: auto; /* overflow is needed */
resize: both;
}
In order for the resize property to work, the element must also have an overflow value set to either “scroll”, “auto”, or “hidden”, or else it has to inherit one of those values from its parent. Resize will not work if the overflow value is set to “visible”, which is the default for overflow.
Some On-Page Demos
If you use Safari or Chrome, you’ve probably already seen this property in action even on pages where it hasn’t been programmed. WebKit browsers will automatically apply a resize handle to the <textarea> element, as you can see in the example <textarea> element below:
The code has the CSS included, but it’s not necessary for those browsers, and since they’re the only browsers that support it, it’s not necessary at all for that element. But if other browsers pick up support, it will be working, so the CSS makes it a little more future-proof (although for this kind of property I wonder how valuable it could really be).
<
p>Here are a couple of more examples:
<
p>
The second example above uses nested elements and absolute positioning to make the resizing all wonky. Basically, because the nested element (the resizable one) is pushed to the bottom of its parent, it has nowhere to go so it resizes in the other direction instead of downwards. I suppose in that case it would make more sense for the resize handle to appear on the top left corner, but that doesn’t seem to be possible — oh wait, let’s try rotating the box:
Nah…
Further Info
Here are some things to take note of in addition to what’s already been said above:
- Allowing a user to resize an element will affect the layout of surrounding elements; this can be overcome by absolutely positioning the resizable element
- You can set a
max-widthormax-heightto prevent the size getting too big and breaking the layout - It doesn’t seem as though the user can make the element smaller than what it starts out as, so setting a
min-widthormin-heightis apparently pointless - WebKit-based browsers are the only in-use browsers that support
resize; I assume that includes WebKit on iPhone and iPad resizewill be supported in Firefox 4, so its future seems a little more secure despite being on the “at risk” list- In WebKit and Firefox 4+, the
<textarea>elements are resizable in both directions by default; in order to negate this, you can just useresize: none, which I suppose could be added to a CSS reset if you didn’t like this feature - If you set a
<textarea>element to haveoverflow: visible, it will not negate the default resizability of the element; this can only be overriden by settingresize: none - Earlier versions of WebKit-based user agents apparently relied on the
-webkit-prefix, but it doesn’t seem that it’s necessary; you might want to include it just in case
Is It Useless?
I can’t think of too many practical uses for this property, which probably explains why it has had such poor support. I suppose it could have some value in the context of a scripted game where the user has to size something correctly. I suppose you could also make images resizable, but that is problematic because you’d be pre-loading the larger image and putting it into a smaller space, which is generally bad practice.
Are there any other practical uses for this other than the few I’ve discussed here? Or do you think should this property be removed from the spec?
It is not useless. If the browser gives the user a way to resize textareas, a web designer should be able to lock put some constraints to it in order not to break the layout. I used this feature a couple times, and I think
resize: vertical;should be a more appropriate reset value rather than removing the feature completely from users.Although, if you think about it, you can achieve the same result by setting max-* to the same value of * (width or height), so we could probably live as well without it.
hey its a good property particularly for the fields like text area. I wish modern browsers support this.. although bug you displayed needs to be fixed for currently supported browsers.
Thanks for update.
Couple of days ago I was editing my about info on facebook. I wrote a couple of paragraphs and thanks to chrome that supports resize on a textarea input I was able to resize and review all my info without having to scroll. Imagine a small textarea with a couple of paragraphs.
I think it’s good if it’s used correctly.
Now when I’m writing lot of paragraphs on a small textarea I always look to resize the box.
I don’t see a lot of practical uses but It’s I don’t think it’s useless.
these also work in Firefox 4 beta :)
Yep, I mentioned that in the article.
Other uses:
1. Resizing a photo so that it fits a certain viewport (like choosing the cropping for an avatar).
2. Controlling the area width of a split view
3. Any web app that imitates the function of desktop layout apps (powerpoint, illustrator, etc).
By the way, you have disabled resize in this very comment box!
Ha, you’re right! I had forgotten about that. Not sure exactly why I did that, but I decided to enable vertical resizing only, as I think the width is sufficient.
Thanks for the reminder.
this is one of my favorite features in gmail. you can resize the message editor window :)
I use “resize: vertical” in my CSS reset… okay so you are not resetting anything by including it but it’s useful to have on any website. I don’t like to use resize horizontal though as it breaks the layout in a nasty way.
I remember about my one client
who ask me to stop the resizing of textarea in safari browser.
Then i discovered the resize property.
But yes it is great one. When you need more rooms for the input.
tkx for share!
useful with modal dialogs. Most javascript frameworks that support modal dialogs have some other way of doing it… but allowing them to do it easier would probably be better anyways.
I could see it being useful if you were using iframes… ick.
Hmm, the enabling/selective feature, sure… disabling? why? so that your visitors can’t “break” your design? I’m not very experienced with Safari, but I’m sure it has the same ability as FireFox, Opera and Chrome, where you can edit the HTML/CSS/JavaScript in realtime, any blockage laid within the HTML can be bypassed, if people want to break the design, they can. Which reminds me, that breakage will only be viewable by themselves, breaking a design in a way that only affects yourself, why do it? and why make any attempts of blocking it?
But yeah, I can see the applications for it if it is by default disabled, and can be enabled through CSS, making it obvious to “normal” users that they indeed can resize this item.
This shouldn’t be in the standard. Resizable textboxes are a user agent feature to help mitigate poor design, and giving developers the option to it is madness. If I as a user want to resize a textbox to help me enter text, then that should be up to me. The developer has no idea about the screen resolution, DPI, and physical dimensions of my device, or any special accessibility overrides or user stylesheets I have applied, and therefore no way to say I don’t need to resize something.
I would think it could be of some use in html apps. picture a notepad-style program with the ability to resize docked elements to full editor windows. if i’m being clear, i think you can see where i’m going with this.
I love this feature, its main use in my opinion is increased usability, but it’s also good for prototyping when client wants to see how much text is optimal for a design.
What are you all going on about! This has tonnes of potential use cases! Would you say resizeable boxes on desktop applications are useless? Ofcourse not.
So yes, for your average freaken blog, it may not have many applications beyond a resizable textarea. But the real great applications are in application style websites. You can have resizeable widgets, windows, messages, etc. Could use it in a WYSIWYG style editor that’s built into the website, with resizeable shapes that the user can move around. The only thing which sucks about this is the lack of support and the limited functionality. I’d want the option to specify where the resize icons are shown, what image is used, what cursor is shown on hover, etc.
There have got to be all kinds of great reasons to have resizable elements of all sorts. Man, why are people so married to their grids these days? I use grids, too, but if I thought to myself “I wish this element was resizable; it would be so convenient for users” I would NEVER worry about whether it broke my precious grid or not.
What about this use >> http://codepen.io/mmoustafa/pen/lBwhv
I found a perfect use for resize. I have a streaming video above it’s chatbox so users wouldn’t be able to chat with a huge video object taking most of the fold. In my case I used resize:vertical; so that a user has the OPTION to make the video object as large as he can to include the chat on his/her screen.
The problem: The resize “button”, the 3 little lines on the bottom right needs to be customizable… That’s what I’m looking for and could be the problem that rules out resize for me.
Hi,
I need help,
I want resize iframe by dragging right bottom corner but its working in all browsers but not in IE,is there any solution for this to work in IE..?
The resize property is also useful with the contenteditable tag when making, for example, rich text editors or similar:
w3schools.com/tags/att_global_contenteditable.asp