Re: box-sizing: border-box;

> [Original Message]
> From: Tantek Çelik <tantek@cs.stanford.edu>
>
> On 10/29/03 3:13 AM, "Ernest Cline" <ernestcline@mindspring.com> wrote:
>
> > Proposal:
> > Add four properties to the Box Model Additions section of CSS3
> > Basic User Interface and one shortcut property.
> > 
> > box-inset-top, box-inset-left, box-inset-bottom, and box-inset-right
> > Value: <length> | <percentage>
> > Default: 0
> > If box-sizing is content-box then
> > * a <percentage> value refers to a percentage of
> >  the appropriate padding width.
> > * The box boundary is set so that portion of the padding is
> >  inside the box
> > If box-sizing is border-box then
> > * a <percentage> value refers to a percentage of
> >  the appropriate border width.
> > * The box boundary is set so that portion of the border is
> >  outside the box
> > 
> > box-inset
> > Value: (<length>|<percentage){1,4}
> > Allows one to set all four box-inset-* properties in
> > the usual manner for this type of box model shortcut.

<snip two examples>

> > Note: The effect of having the border straddle the box edge
> > can be simulated with ::outside but only if the border is a
> > solid color as adjacent dashed borders for example are
> > not guaranteed to be aligned with one another.
> > 
> > The following simulates straddling a 4 px border
> > on the box boundary.
> > 
> > E {box-sizing: border-box; border-width: 2px;}
> > E::outside {box-sizing: content-box; border-width: 2px;}
> > 
> > But as I said it can only fully simulate my proposal if a solid border
is
> > used.
> > 
> > Comments wanted.
>
> For one thing, it is far too late for suggestions for new features
> (properties) like this for CSS3-UI, the last call ended months ago.

Fine, then make it a proposal for CSS4-UI, or perhaps CSS3-box
since the current draft also contains the box-sizing property (which is
where on first look, it would make more sense to me to have the
box-sizing property, in any case)  However, where this proposal
gets added to CSS if it should be seen to have value is of far
less importance than if it has value.  It would make sense for my
proposal to be collocated in the same CSS document as
box-sizing which currently is in CSS3-UI.

> Second, the reasons for leaving out the other possible values (margin-box,
> padding-box) for box-sizing were already discussed *quite* some time
ago[1].

While I thank you pointing out this "discussion," please do keep
in mind that not everyone on this list now was on this list then,
so it is possible that new people could have ideas to contribute.

> As you pointed out:
>
> > margin-box would in my opinion only make sense in a kitchen sink way.
> > I can't imagine any use case of it.
>
> Not only that, but due to collapsing vertical margins,
> implementing/understanding the 'margin-box' becomes even more problematic.

Why do you bring up this straw-man in replying to what I said?
My proposal had absolutely nothing to do with margins.
This is mainly because I can't imagine any possible use for margin-box.

> The nice thing about CSS is, if future folks *do* come up with real
reasons
> (rather than "kitchen sink" reasons) for these other values, they can
always
> be added in a latter draft.

I have come up with a real use case that cannot as far as I know be handled
with existing or draft CSS.  Namely, having a non-solid  border straddle the
box boundary. It is possible that a less unwieldy method than what I have
proposed could be developed to handle this use case. Indeed, now that
I have had a chance to think longer on this, I can't imagine a use case for
the applying this when box-sizing is content-box.  And if someone does
come up with a use case, the effect can be achieved via the use of
::outside, so:

Please consider my proposal above amended so as to have the
box-inset-* properties to have no effect when box-sizing is content-box.
(i.e., box-inset-* only applies when box-sizing is border-box.

Now if one can come up with a way to achieve the effect of the following
with existing or other draft CSS I would consider the case closed.

E {
  box-sizing: border-box;
  box-inset: 50%;
  border-style: dashed;
  border-width: thick;
}

The use of ::outside won't work in this case fro two reasons.
1) There is no way to specify a part of a thick border
  (This could be handled by allowing values like 0.5thick
    for border-width using a pseudo-length notation.)
2)  If both E and E::outside have the same border style, such as
   dashed, there is no method I know to have the two borders
   be synchronized in where they dash.

Reason #1 could be satisfied fairly easily, but #2 looks like
it would be even more complicated to implement than my proposal.

> [1]
>  http://lists.w3.org/Archives/Public/www-style/1999Oct/0036.html
> (My goodness, that was *four* years ago).

Received on Wednesday, 29 October 2003 18:22:47 UTC