The incomparable Rachel Andrew introduces the brave new world of two-value CSS
displaytype of an element is always block or inline, and dictates how the box behaves in the normal flow of the document. The inner
displaytype then changes the formatting context of the children.
To better describe this behavior, the CSS Display specification has been refactored to allow for
displayto accept two values. The first describes whether the outer
displaytype is block or inline, whereas the second value describes the formatting of the children.
I’m of two minds for this change. On the one hand, this introduces some complexity (e.g., the
display: block is, in its two-value declaration,
display: block flow). But on the
other hand, with that complexity comes an invitation to web developers to better understand document
flow and formatting context—to which Rachel Andrew’s book The New CSS
Layout is an indispensable guide.
The two-value syntax for
display is currently only available in Firefox
70, listed in the compatibility table at MDN under “multi-keyword values.”