4 ms·

I don't like the idea that this is tacked onto the "display" property. "display" is for the outer display properties of the div, but this flow-root is for the i

by bartl 10y ago

I don't like the idea that this is tacked onto the "display" property. "display" is for the outer display properties of the div, but this flow-root is for the inside. You cannot have a div that is both `display: inline-block` and `display: flow-root` at the same time, for example.

mercer 10y ago
Nothing that yet another otherwise meaningless wrapping div won't solve..
masklinn 10y ago
> I don't like the idea that this is tacked onto the "display" property. "display" is for the outer display properties of the div That's really not true[0], "display: flex", "display: grid" or "display: table" are all inner display properties, which is why inline-flex, inline-grid or inline-table exist ("display: flex" sets the outer display mode to "block" and the inner one to "flex", "display: inline-flex" sets the outer display mode to "inline" and the inner one to "flex"). Which is why CSS3 split display properties between outer display (block, inline or run-in) and inner display (flow, flow-root, table, flex, grid or ruby), which can be specified independently e.g. `display: inline flow-root`. Furthermore `display: inline-block flow-root` makes no sense 1. `inline-block` is specifically a "legacy" display property which impacts both inner and outer display (and thus is not compatible with a separate inner display property) 2. `inline-block` already means `inline flow-root` so `display: inline-block flow-root` would expand to `display: inline flow-root flow-root` [0] and has not been since CSS2 and display: table, possibly CSS1's display: list-item
- jpfed 10y ago
  That makes it look like the "display" property will turn into a css shorthand for "inner" and "outer" display properties... is that the case?
  - masklinn 10y ago
    It is already that, it's been that pretty much all along, but for most of its history you couldn't set the inner and outer variants separately, you had to use "precomposed" values like inline-table. AFAIK you can't set the inner and outer display types via separate properties. Furthermore there are values which have more complex interactions/natures than just inner/outer e.g. "contents" (which removes the element's box but leaves the descendants — including pseudo-elements), "list-item" (which can be combined with any outer type but only the flow or flow-root inner types, and generates an internal pseudo-element), or the "internal values" which only make sense within wider display context (table and ruby).
    - gsnedders 10y ago
      There was, briefly, in Display Level 3 drafts, display-inline and display-outside properties, with display being a shorthand additionally supporting legacy values (like inline-block). It's now expected to be in Level 4[1]. [1]: https://lists.w3.org/Archives/Public/www-style/2014Sep/0399.html https://lists.w3.org/Archives/Public/www-style/2014Sep/0399....

by bartl 10y ago

mercer 10y ago

Nothing that yet another otherwise meaningless wrapping div won't solve..

masklinn 10y ago

> I don't like the idea that this is tacked onto the "display" property. "display" is for the outer display properties of the div That's really not true[0], "display: flex", "display: grid" or "display: table" are all inner display properties, which is why inline-flex, inline-grid or inline-table exist ("display: flex" sets the outer display mode to "block" and the inner one to "flex", "display: inline-flex" sets the outer display mode to "inline" and the inner one to "flex"). Which is why CSS3 split display properties between outer display (block, inline or run-in) and inner display (flow, flow-root, table, flex, grid or ruby), which can be specified independently e.g. `display: inline flow-root`. Furthermore `display: inline-block flow-root` makes no sense 1. `inline-block` is specifically a "legacy" display property which impacts both inner and outer display (and thus is not compatible with a separate inner display property) 2. `inline-block` already means `inline flow-root` so `display: inline-block flow-root` would expand to `display: inline flow-root flow-root` [0] and has not been since CSS2 and display: table, possibly CSS1's display: list-item

jpfed 10y ago
That makes it look like the "display" property will turn into a css shorthand for "inner" and "outer" display properties... is that the case?
- masklinn 10y ago
  It is already that, it's been that pretty much all along, but for most of its history you couldn't set the inner and outer variants separately, you had to use "precomposed" values like inline-table. AFAIK you can't set the inner and outer display types via separate properties. Furthermore there are values which have more complex interactions/natures than just inner/outer e.g. "contents" (which removes the element's box but leaves the descendants — including pseudo-elements), "list-item" (which can be combined with any outer type but only the flow or flow-root inner types, and generates an internal pseudo-element), or the "internal values" which only make sense within wider display context (table and ruby).
  - gsnedders 10y ago
    There was, briefly, in Display Level 3 drafts, display-inline and display-outside properties, with display being a shorthand additionally supporting legacy values (like inline-block). It's now expected to be in Level 4[1]. [1]: https://lists.w3.org/Archives/Public/www-style/2014Sep/0399.html https://lists.w3.org/Archives/Public/www-style/2014Sep/0399....