W3C home > Mailing lists > Public > www-style@w3.org > June 2011

Re: [css3 box, cssom] flexibility in box-sizing and offset* properties

From: Aron Allen <me@aronallen.com>
Date: Thu, 16 Jun 2011 11:20:51 +0200
Message-Id: <11057565-CD64-4F98-83AC-FA745EE25EB6@aronallen.com>
To: www-style@w3.org
The new box-sizing CSS property is really useful. 
I often find myself designing scalable interfaces, where I want to have a fixed width on the padding, margin, and/or border, but a relative width on the element in whole, this is now possible (without overflowing boxes) with CSS3.

Firefox currently implements: 'content-box', 'border-box', 'margin-box' and 'padding-box', the current draft only proposes the 'border-box' value. 
But in some situations it is really useful to be able to set the box-sizing model to one of the four edges, especially when designing full-width mobile apps.

I disagree with the '.' accessor procedure, since it changes some fundamental language principles in CSS.

I do not fear property name explosion, the box-sizing property gives enormous freedom to designers, finally they can choose a box-model that fits them.


> [Excuse me if this has been discussed before.]
> 
> Regarding the current suggestion on box-width/box-sizing, why not generalize
> it to all edges, ie margin-box, border-box, padding-box and content-box?
> There are situations when all these alternatives can be useful.
> Either it can be done by adding more values to box-sizing, or to add more
> properties f ex margin-box-width, border-box-width etc, but the latter may
> lead to a property name "explosion" as you probably want to offer this
> functionality for min-width/max-width, positioning etc.
> 
> An alternative could be to use suffixes on existing properties:
>   #myDiv {
>     width.marginedge: 90%;
>     min-width.contentedge: 5em;
>   }
> where the last property assignment could as well be written as "min-width"
> without suffix as it corresponds to the current CSS21 rules. The same system
> could apply to positioning properties (top.borderedge etc).
> 
> A related feature is being able to query an element's position and size with
> respect to different edges using the offset* DOM properties, or similar
> feature. Today we see developers using libraries like Dojo (dojo.html.layout
> package) to get to this information in a convenient way. It would be a
> strength to have this standardized in the browser's native library instead.
> 
> Best regards
> Mike


--
Kindest regards,
Aron Allen.

+45 31 48 32 42

Sent from my Mac.
Received on Sunday, 19 June 2011 11:01:20 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:41 GMT