CSS trick: resizing elements without using JS

actually there is a funny and easy way to resizing elements in your page, just by assigning one css class to your elements like so.
html:

<div class="resizable"></div>

css:

div {
    height: 300px;
    width: 300px;
    background-color: #f00;
}
.resizable {
    resize: both;
    overflow: scroll /* or auto */;
    border: 2px solid #000;
}

for more info MDN

but there is somthing anoying, its how can you styling that's little span on the bottom of the resizable element ?

Comments

[jstewart8053]

The resize property is for the user though, not the developer, correct? So there wouldn't be any need to say you can create it without Javascript, right? Am I'm missing the point/helpfulness of this article?

[open]

the idea behind that is how as a developer can make a something resizable to the user's by the easiest way.

There are a many ways to do that, but all of them are adding four extra spans as a reference (top left, top right, bottom right, bottom left), and calculate the dimensions... etc etc
but the css way doesn't use any extra elements.
let me tell you the story why i like it.. i'm trying to clone UbuntuDDE desktop as html and css and inside of it i'm also trying to clone the chromium browser (open source alternative of chrome).
and i set the elements resizable use both ways (js and css ) and by the css way it's so smoothly , i don't know if there is somthing about it but it's works just fine for me.

here the js code and compare it with the css ^_^

[jstewart8053]

Okay, I gotcha now. You were talking about the user. Thats where I was confused at. I probably should stop trying to read after 2am from now on... lol. The resize property is really nice, and a I wish more pages would use it. I'm on my ipad often, so being able to resize comes in handy. Thanks for the clarification 👌

[open]

you're welcome... yep at 2 am you should be in a deep-sleep state 👌 not in dev reading weird things loooool. 🤣

[jstewart8053]

deep dream state... was that a coding pun? 😂😂😂 Very true, and funny!

[open]

by the way i can't following advice, but instead i always insist on giving it to people and friends 🤣🤣, and the proof of that is it's 5am and i'm still awake loool

[Duy K. Bui]

Well, I guess before we have this CSS attribute implemented, we would have need to use a mouse event handler on a float control to mimic the native resize behavior.