[whatwg] Element borders as resizable handles

[Anne van Kesteren]

On Sun, 20 Apr 2008 14:58:35 +0200, Greg Houston  
<gregory.houston at gmail.com> wrote:
>>   http://www.w3.org/TR/2004/CR-css3-ui-20040511/#resize
>
> This fulfills the basic idea, though the spec seems to leave the
> resize mechanism up to the imaginations of the UAs. All it says is
> that the resize mechanism is not a scrollbar. Using the element
> borders might be one option for a resize mechanism. I imagine the CSS3
> authors may have felt it out of their scope to try to define a resize
> mechanism since it is a UI element. Though my particular idea may or
> may not be a good one, it does beg the question as to whether or not
> there should be HTML elements that can be used for such things and
> that developers can then style and customize themselves rather than
> being stuck with the various UA implementations that may or may not
> work well with specific web application designs. Also, due to the
> vagueness of the specification the implementations could vary quite
> wildy from one browser to another. Do the resize mechanisms go on the
> inside of the element, on the outside, centered on the edge? What
> shape are they, circles, squares, rectangles? Are they as tall or wide
> as the element or are they just little icons centered on each edge and
> at the corners? If the element that is being resized has rounded
> corners does the UI still look good? Are they simple in design or are
> they shaded and intricate? Are they visible at all, or does the cursor
> merely change when the mouse is over them? As a designer and developer
> these are things I would like to have some control over.

If you want full control you probably have to implement it yourself.


> Regarding a couple of the new UI elements in HTML5, it is not clear to
> me from the spec if the meter and progress elements are purely UA
> designed elements or if the developer has control over their styling.

You can probably style them using XBL in due course. They are similar to  
form controls as far as I can tell.


> With the HTML5 drag and drop, can you specify a handle for the dragged
> element(s) or are the dragged element(s) always their own handle(drag
> mechanism)?

I'm not sure what you mean here.


> No, though after looking at these links the non-canvas part does
> indeed appear to be more in the realm of the CSS3 spec. Where HTML
> ends and CSS begins can be a little fuzzy for me. Regardless, to
> clarify, if you have a div that is 100x100 pixels and you add a 5px
> border, you will now have an element with dimensions of 105x105px.
> This is because the border is aligned to the outside of the element.
> If you animate the size of the border the element will grow and shrink
> in size. If the border were added on the inside the element will
> remain 100x100px wide regardless of the border size, but the content
> size would shrink and expand.

Oh, you want 'box-sizing':

   http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing

(This property has several UA implementations already. Some with a prefix  
only, admittedly.)


-- 
Anne van Kesteren
<http://annevankesteren.nl/>
<http://www.opera.com/>