W3C home > Mailing lists > Public > www-style@w3.org > June 2010

Re: [css3-content] ::outside become "containing block"

From: Paul Duffin <pduffin@volantis.com>
Date: Fri, 11 Jun 2010 04:11:28 -0600 (MDT)
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style <www-style@w3.org>, Boris Zbarsky <bzbarsky@mit.edu>
Message-ID: <2051013058.672981276251088801.JavaMail.root@zimbra.volantis.com>
    Thanks for your feedback. I have also come to the conclusion that treating ::outside as identical to simply wrapping the element with a real element with the same styles is the simplest to implement, easiest to explain and most flexible for the page author.

::inside may also be useful but as mentioned has issues with replaced elements.

Some points to cover in the specification:

The elements to which ::outside can and cannot be applied.
* Doesn't make much sense on table cells/rows/columns.
* What about list-items? How would it behave on that, where would marker go?
* What about around children of flexible box?

Some additional use cases for ::outside.

Use Case #1

Wrap additional structure around a replaced element, either with explicitly specified dimensions, or intrinsic dimension, such that there is no gap between the edges of the replaced elements margin-box and the containing element's content-box.

e.g. shrink to fit around an element that has a specific width/height, e.g. an image with following styles:
    {box-sizing: content-box; width: 100px; height: 100px; border: thick solid red; padding: 2px}

The width and height of the ::outside should be calculated so that it's content-box has the same size and position as the border-box of its superior parent.

'shrink-to-fit' can be achieved in certain cases (floats, tables, inline-block) but it always comes with some additional issues to handle. It would be nice to be able to specify that orthogonally to the other cases. e.g. Have width: shrink-to-fit, height: shrink-to-fit. Then auto keyword specified on width/height would behave as shrink-to-fit by default for floated elements, tables and inline-blocks.

Use Case #2

Expand the element to fill its ::outside element. The dimensions of the ::outside element is explicitly specified, either as fixed length, or percentage.

'expand-to-fill' can be achieved using either
    {box-sizing: border-box; width:100%; height:100%}
or flexible box model.
Received on Friday, 11 June 2010 10:12:07 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:36 UTC