Box Model Extensions

We want to define several new things that would properly go in Box Model, but we don't want to wait for that, the most complicated module in all of CSS, to be finished (or even properly started). So, we should make a new module that does a few “extensions” to the box model, assuming that the base case will be properly defined later.

Aspect Ratio

As defined at

Would grant the ability to specify an 'aspect ratio' for the a box, locking its width and height into a definite ratio. This can currently be partially hacked by exploiting some minor details of how percentages work in padding, but having this be explicit is better and allows a more thorough treatment.

Size Keywords

The auto keyword for width and height resolve to interesting values based on context, which can't be duplicated elsewhere. For example, tables and floats resolve auto using the “shrinkwrap” algorithm, while normal blocks use a “fill” algorithm to fill their parent as much as possible.

These behaviors should be explicitly named so they can be used generally:

  • fill: The normal width of a display:block element, where it fills its parent.
  • min-content: The width of a box if you take all optional linebreak opportunities.
  • max-content: The width of a box if you take no optional linebreak opportunities.
  • fit-content: min(max-content, fill)
ideas/box-model-extensions.txt · Last modified: 2014/12/09 15:48 (external edit)
Recent changes RSS feed Valid XHTML 1.0 Valid CSS Driven by DokuWiki