The CSS 'resize' property allows for various elements in HTML, such as textarea's, input's and div's to be resized by the user by including resize markers to the bottom right of the given element. In the past developers had to go through the time-consuming task of having to implement this functionality in JavaScript by leveraging various mouse events, such as mousedown and mousemove.
In this article, I'll dive deep into how the CSS resize property works, breakdown the various options, and give a few practical examples to help you leverage it effectively in your web projects. Whether you're a seasoned developer or just starting out, understanding how to use the resize property can simplify your code and improve your website's performance.
What is the CSS resize property?
The CSS resize property controls whether an element is resizable by the user, and if so, in which directions it can be expanded. It’s a great way to add a layer of interactivity to web elements without writing complex JavaScript code, as mentioned above.
Basic Syntax
.element{
resize: none | both | horizontal | vertical;
}
Here’s what each value does:
none: The element cannot be resized. This is the default value.
both: The element can be resized both horizontally and vertically.
horizontal: The element can only be resized horizontally (left and right).
vertical: The element can only be resized vertically (up and down).
Applying the resize property
Let’s walk through some practical examples to see how you can use the resize property in your web projects.
Example 1: Resizable Textarea
Textareas are one of the most common use cases for the resize property. By default, textareas are resizable both horizontally and vertically. However, you might want to control this behavior depending on your design.
<textarea class="resizable-textarea"></textarea>
<style>
.resizable-textarea {
width: 300px;
height: 100px;
resize: both;
overflow: auto;
}
</style>
In this example, the textarea can be resized in both directions. The overflow: auto; ensures that content exceeding the boundaries of the resized element can still be accessed with scrollbars. This is the most commonly seen scenario on most websites.
You can improve the usability though by including max-height and max-width constraints on a textarea to ensure that it doesn't expand beyond a give size.
Example 2: Restricting Resize to Horizontal Only
Imagine you have a chat interface where the input field should only expand horizontally.
<textarea class="horizontal-only"></textarea>
<style>
.horizontal-only {
width: 300px;
resize: horizontal;
overflow: hidden;
}
</style>
Here, the textarea field will only be resizable horizontally, making it perfect for maintaining a consistent vertical height while allowing more text to be added by the user.
Example 3: Preventing Resize
Sometimes, you might not want an element to be resizable at all, perhaps to keep a design consistent to avoid breaking other elements. And you can easily do that by setting the resize value to 'none' on a given element:
<div class="fixed-size-box">This box cannot be resized.</div>
<style>
.fixed-size-box {
width: 200px;
height: 200px;
resize: none;
overflow: hidden;
}
</style>
In this example, the resize: none; ensures that the user cannot alter the size of the box, making the design consistent across different devices and browsers.
The Role of overflow with resize
One crucial aspect to keep in mind when working with the resize property is how it interacts with the overflow property.
overflow: auto - Allows scrollbars to appear when content overflows, making it a good match for resizable elements.
overflow: hidden - Hides the overflowing content, which might be useful when you want to limit the visible area strictly to the element’s boundaries.
overflow: scroll - Forces scrollbars to appear even when content does not overflow, though this is less common in combination with resizing.
It’s important to set the overflow property appropriately to ensure that your resizable elements behave as expected to the user.
Browser compatibility
The CSS resize property enjoys broad support across modern browsers, including Chrome, Firefox, Safari, and Edge. However, it’s worth noting that this property does not work in Internet Explorer, which is no longer widely used but still relevant in some enterprise environments.
For edge cases where resize is not supported, or if you need more complex resize behavior (e.g., snapping, aspect ratio constraints), you might still need to resort to JavaScript.
Enhancing user experience with min-width, min-height, max-width, and max-height
To create a more controlled resizing experience, you can use min-width, min-height, max-width, and max-height properties alongside resize. These properties allow you to define the boundaries within which an element can be resized.
<div class="constrained-resizable-box">Resize me!</div>
<style>
.constrained-resizable-box {
width: 200px;
height: 200px;
resize: both;
overflow: auto;
min-width: 150px;
min-height: 150px;
max-width: 300px;
max-height: 300px;
}
</style>
In this example, the box can be resized, but only within the minimum and maximum dimensions specified, ensuring that it never becomes too small or too large for the design.
Real-World Applications and Best Practices
The resize property is particularly useful in the following scenarios:
Customizable UIs: Allow users to resize panels, chat windows, or sidebars to fit their needs.
Text Areas: Provide users with the flexibility to expand text areas, making input easier without overwhelming the initial layout.
Widgets: For resizable dashboard widgets, resize can be a straightforward way to offer flexibility without complex code.
When using the resize property, always consider the user experience. While it offers simplicity, uncontrolled resizing can lead to awkward layouts or content overflow. Therefore, pairing resize with proper width, height, and overflow constraints is key to maintaining a polished UI.
Conclusion
The resize property was a much needed addition to the CSS standard as many older websites today (including this one) still rely on using custom JavaScript in order to create a similar effect.