- 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>
All, 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