CSS3-box: width, height, box-sizing, etc.

There are three proposals in the CSS3 Box Model WD
http://www.w3.org/TR/2001/WD-css3-box-20010726/#the-box-width

A) Name: box-width, box-height 
   Value: <length> | <percentage> | auto | inherit | initial

B) Name: box-sizing 
   Value: content-box | border-box | inherit | initial

C) simple expressions as width/height values, e.g. 
   width: 10% - 2 * 2px;

The problem with the first is that you can't use border-box
sizing for min/max-width and min/max-height. One could add
min-box-width and so on, but that's a bit unweildy.
Also, two different properties for setting the height means
you can't override a previous 'box-width' with a more specific
or higher-cascade-level 'width'.

With box-sizing, you can apply it to min/max-width and 
min/max-height without adding so many new properties. You also
don't wind up with the cascade problem where one width setting
can't override a previous width setting. However, setting
'box-sizing' to border-box will also affect any width/height
settings made by, for example, the user stylesheet, which may
have assumed content-box sizing. Also, you can't set max-width
as a border-box measurement and min-width as a content-box
measurement--it's all or nothing.

Simple expressions, while useful in and of themselves, aren't
be an ideal solution, either; hard-coding the border width
into the width calculation won't account for borders and 
padding set elsewhere in the cascade. For example, a user may
specify "border: 0 !important;"--which throws off a 10% + .4em
width set by an author who also set "border-width: .2em;". Then
one also has to keep track of all the relevant author rules--
which is hard to do if site-wide stylesheets are written by one
person and local stylesheets are written by another.

Now, if you provide a mechanism to symbolically represent
border and padding in the expression, you avoid the hard-coding
problem: Padding and border-width can cascade independently,
and still be taken into account no matter what the final value.

ex:  width: 50% - <border-width> - <padding>;

(I suggest making the syntax very general, as you might later
find such references useful in other contexts.)

---------
http://www.w3.org/TR/2001/WD-css3-box-20010726/#the-ltlengthgt -

  "A <percentage> is relative to the computed value of the width
   or height of the containing block"

This is ambiguously worded. I have "width: 50%". Is it 50% of the
width or 50% of the height? 

Also, is the containing block's width/height computed with or
without borders and padding?

---------

BTW, I highly recommend adding dbaron's 'intrinsic' and 'min-intrinsic'
keywords.

http://www.w3.org/TR/2001/WD-css3-box-20010726/#the-width

  "[Idea by David Baron: add keyword values 'intrinsic' and 
   'min-intrinsic' to force an element to have its intrinsic or
    minimum width.]"

Received on Friday, 16 November 2001 23:28:05 UTC