3 ms·

> Fun fact: the display values we use all the time are actually short-hand. For example, `block` is actually short-hand for `block flow`. Refer to the specific

> Fun fact: the display values we use all the time are actually short-hand. For example, `block` is actually short-hand for `block flow`. Refer to the specification for full list. ---- https://drafts.csswg.org/css-display/#propdef-display https://drafts.csswg.org/css-display/#propdef-display: > The `display` property defines box’s display type, which consists of the two basic qualities of how an element generates boxes: > * the inner display type, which defines [...] the kind of formatting context it generates, dictating how its descendant boxes are laid out. > * the outer display type, which dictates how the box participates in its parent formatting context. ... > <display-outside> = block | inline | ... > <display-inside> = flow | flow-root | table | flex ... ... Short `display` | Full `display` | Generated box ----------------|--------------------|--------------- 'block' | 'block flow' | block-level block container 'flow-root' | 'block flow-root' | block-level block container that establishes a new block formatting context 'inline' | 'inline flow' | inline box 'inline-block' | 'inline flow-root' | inline-level block container ----------------|--------------------|--------------- 'flex' | 'block flex' | block-level flex container 'inline-flex' | 'inline flex' | inline-level flex container -------- The advent of this kind of explicit systematic consistency in web standards is pretty much my favourite thing about living in the future. Every day I fall to my knees and cry with joy and gratefulness that I will only have spent this a small fraction of my professional engagement with web things in the abominable hellscape that was this world before CSS3 started being widely implemented.

gsnedders 10y ago
Note that the split between inner and outer display type (which I presume is what it means by short-hand—a term normally defined as one property that sets multiple properties, rather than one property that takes multiple values) isn't implemented anywhere yet, as far as I'm aware.
- jewbacca 10y ago
  It looks like there were independent `display-inside/outside` properties, with `display` being a "one property that sets multiple properties" shorthand, in the first draft of the spec: https://www.w3.org/TR/2014/WD-css-display-3-20140911/#the-display https://www.w3.org/TR/2014/WD-css-display-3-20140911/#the-di... --- But that has since been changed to `display` being a "one property that takes multiple values" shorthand, in the current version of the spec: https://www.w3.org/TR/2015/WD-css-display-3-20150721/#changes https://www.w3.org/TR/2015/WD-css-display-3-20150721/#change... > Changes since the 11 September 2014 Working Draft include: > Removed `display-inside`, `display-outside`, and `display-extras` longhands, in favor of just making `display` multi-value. (This was done to impose constraints on what can be combined. Future levels of this specification may relax some or all of those restrictions if they become unnecessary or unwanted.) -------- But you're right. It's not even on caniuse yet (vote here: https://github.com/Fyrd/caniuse/issues/2337 https://github.com/Fyrd/caniuse/issues/2337). But I'm stoked to even see these orthogonal axes and their domains officially laid out, and names given to concepts. Even just `display-inside` vs `display-outside`. I've had discussions with professionals where no one was certain enough about the `display` mess to make any confident statements on the exact nature of the similarity between `flex` and `block`. Who knew if there were edge cases that made them not have (what I now have the words to describe as) the same `display-outside` behaviour? Thanks also to the crazy muddle of just-slightly-different behaviour the proliferation of other display options has scarred us all with, previously all sharing a single, very arbitrary-seeming, axis.

gsnedders 10y ago

Note that the split between inner and outer display type (which I presume is what it means by short-hand—a term normally defined as one property that sets multiple properties, rather than one property that takes multiple values) isn't implemented anywhere yet, as far as I'm aware.

jewbacca 10y ago
It looks like there were independent `display-inside/outside` properties, with `display` being a "one property that sets multiple properties" shorthand, in the first draft of the spec: https://www.w3.org/TR/2014/WD-css-display-3-20140911/#the-display https://www.w3.org/TR/2014/WD-css-display-3-20140911/#the-di... --- But that has since been changed to `display` being a "one property that takes multiple values" shorthand, in the current version of the spec: https://www.w3.org/TR/2015/WD-css-display-3-20150721/#changes https://www.w3.org/TR/2015/WD-css-display-3-20150721/#change... > Changes since the 11 September 2014 Working Draft include: > Removed `display-inside`, `display-outside`, and `display-extras` longhands, in favor of just making `display` multi-value. (This was done to impose constraints on what can be combined. Future levels of this specification may relax some or all of those restrictions if they become unnecessary or unwanted.) -------- But you're right. It's not even on caniuse yet (vote here: https://github.com/Fyrd/caniuse/issues/2337 https://github.com/Fyrd/caniuse/issues/2337). But I'm stoked to even see these orthogonal axes and their domains officially laid out, and names given to concepts. Even just `display-inside` vs `display-outside`. I've had discussions with professionals where no one was certain enough about the `display` mess to make any confident statements on the exact nature of the similarity between `flex` and `block`. Who knew if there were edge cases that made them not have (what I now have the words to describe as) the same `display-outside` behaviour? Thanks also to the crazy muddle of just-slightly-different behaviour the proliferation of other display options has scarred us all with, previously all sharing a single, very arbitrary-seeming, axis.