DEV Community

Karl Stolley
Karl Stolley

Posted on • Originally published at stolley.dev on

1

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 inner display 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 outer display 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.”

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs