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

Two 'advantages' of her proposal are; a) providing a fallback width if  
appropriate, and b) works better with the cascade. The box-sizing  
switch is integral to the particular selector block that it's declared  
in, and authors are reliant on the switch taking place within these  
style rules.

-- Providing a fallback width value --

I think being able to provide a fallback width is wholly unnecessary.  
The most common use case for using the box-sizing switch I can  
envisage is mixing width & padding/border value units; e.g 'width:100%  
border-box;padding:50px;border:10px solid black;'. Using fantasai's  
proposal, we could theoretically provide down-level clients with a  
fallback width value (content-box) but in reality we couldn't emulate  
such a layout based on the content-box model.


-- The Cascade --

Suppose one author writes a rule such as:-

.example{
   width:100% border-box;
   padding:50px;
   border:10px solid black;
}

And a second author, importing that stylesheet writes a stronger rule  
setting the width, expecting the content-box. In reality he would be  
unable to use a percentage width and for the declaration to still be  
usable in many contexts, as the resulting calculation would be (based  
on 'width:99%;), '99% + 100px + 20px'.

Whereas if the 'box-sizing:border-box;' rule was declared in the first  
authors stylesheet declaration, the border-box model would be  
inherited and used in conjunction with the stronger width value, set  
by the second author. This would mean that the second author could  
realistically use the percentage unit for the stronger width value,  
since the sum would be '99% - 100px - 20px'. He could now very easily  
use '.example' beside other elements that are using the content-box  
model.


-- Support --

There is support for the box-sizing property in all four major  
browsers, although two (Firefox and Safari) still use their vendor  
prefixes.


In conclusion, the box-model switch is a fundamental layout property  
and I think it's not something we are able provide an appropriate  
fallback for. I'd suggest that we just use the 'box-sizing' property  
to activate a box-model switch.




------------------------------------------------------------------------------
fantasai wrote:

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 Monday, 17 November 2008 11:53:20 UTC