Two-Value Display Properties in CSS
The incomparable Rachel Andrew introduces the brave new world of two-value CSS
display
properties:
the outer
display
type of an element is always block or inline, and dictates how the box behaves in the normal flow of the document. The innerdisplay
type then changes the formatting context of the children.To better describe this behavior, the CSS Display specification has been refactored to allow for
display
to accept two values. The first describes whether the outerdisplay
type 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 venerable 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.”