[css3-box] box-sizing on width and height

CSS's model of applying 'width' and 'height' to the content box instead
of the border box makes a lot of things difficult. The 'box-sizing'
property is able to solve that, but it doesn't interact very well with
the cascade. The 'calc()' function is able to solve that, but it also
doesn't interact very well with the cascade.

So I propose adding the keywords 'content-box' and 'border-box' to 'width'
and 'height', to be used in conjunction with a length or percentage. (If
specified, it overrides 'box-sizing'; otherwise 'box-sizing' is honored.)

Like this:

   width: border-box 50%;
or
   width: 50% border-box;

The advantages are
   - only affects this declaration, so if other width declarations
     in the style sheet are expecting content-box sizing, they get
     what they expect
   - doesn't require me to hard-code border width and padding values
     into the width declaration
   - my width declaration is ignored by browsers that don't support
     the box-sizing switch, so I can give a fallback width if that's
     appropriate

~fantasai

Received on Thursday, 14 February 2008 23:28:50 UTC