A presentation at An Event Apart San Francisco 2019 in in San Francisco, CA, USA by Rachel Andrew
Now You See It. Rachel Andrew @ An Event Apart San Francisco 2019
CSS1 Recommendation December 1996
Some things are block things other things are inline things.
Being able to change the value of display is important. We can choose the correct semantic HTML element for the job, then use CSS to change how it looks.
Teaching CSS over the past 20 years • Here is a block thing • Here is an inline thing • This is the Box Model. It is Very Important and also kind of weird …
display
block and inline
inline block
Block and inline • The block dimension is the direction that paragraphs lay out in your writing mode. • The inline direction is the direction in which sentences run in your writing mode.
block inline writing-mode: vertical-rl
Normal Flow block and inline layout
Layout always returns to Normal Flow A well-structured HTML document means you are working with the browser rather than against it.
For each element, CSS generates one or more boxes as specified by that element’s display property. https://www.w3.org/TR/css-display-3/#intro
display: block Creates a block-level box.
display: inline Creates an inline-level box.
display: flex Creates a block-level box with flex children.
Creating a Flex Formatting Context
Formatting context Describes the behavior of the child elements of a box.
display: flex
display: flex
justify-content: space-between
display: inline-flex
display: grid Creates a block-level box with children participating in a grid formatting context.
display: grid; grid-template-columns: 1fr 2fr 2fr;
The value of display • Changes how the box behaves among other boxes – is it block or inline? • Changes the behavior of the direct children – for example they become flex items.
Two values for display Refactoring the display specification.
display: block flex
display: inline flex
display: block grid
display: block flow
Old Value New Value(s) block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex inline-flex inline flex grid block grid inline-grid inline grid
display: block flow-root Starting over with a new formatting context for normal flow.
overflow: auto
display: block flow-root
display: inline flow-root An inline box that creates a new formatting context.
display: inline-block
display: inline flow-root
Margins Do not collapse through a new formatting context.
display: flow-root
display: flex
Anonymous boxes
p { display: flex; justify-content: space-between; }
Anonymous Boxes Ensure that everything is in a box.
p > * { color: rgb(74,112,122); }
Anonymous Boxes Fixing up the box tree.
li { display: table-cell; }
When Layout Methods Collide Changing the formatting context away from block and inline layout, means some things no longer do what we are used to.
Floating and positioning Taking items out of flow.
Out of flow The floating and positioning behavior we understand is specified for normal flow, for block and inline layout. They behave differently, or don’t work at all in other formatting contexts.
.box blockquote { float: left; } .box { display: grid; grid-template-columns: 1fr 2fr }
li { float: left; }
ul { display: grid; }
Grid and position You can absolutely position items in a grid layout.
grid-column: 2 / 6; grid-row: 3 / -1;
position: absolute; top: 20px; right: 100px; 20px 100px
display: table-cell Anonymous boxes created to fix up the box tree do not get generated once the item participates in a grid formatting context.
This is all as specified Precise details ensure that each browser does the same thing, makes for happier web developers!
This is all testable The Web Platform Tests project has tests against web platform specifications, so user agents can check they are conforming.
Not Generating Boxes display: none and display: contents
display: none Do not generate a box for the element, or for the children of the element.
Aside from the none value, which also affects the aural/speech output and interactivity of an element and its descendants, the display property only affects visual layout https://www.w3.org/TR/css-display-3/#the-display-properties
display: contents Like display: none but only the box it is applied to is removed. The children remain.
nav { display: flex; }
nav { display: flex; justify-content: space-between; } nav ul { display: contents; }
Exciting boxes! Boxes generating boxes.
Principal Box
li:first-child { color: white; }
::marker
li:first-child::marker { color: black; }
li::marker { content: “Step: ” counter(list-item) “: ”; }
h1 { display: list-item; }
h1::marker { content: “🥦🥦”; }
It’s all a value of display
Values of display do not inherit. They act on the principal box and its direct children; the grandchildren go back to normal flow.
subgrid
subgrid Allowing track definitions to be inherited by a grid on a child.
grid-template-columns: repeat(3,1fr 2fr)
grid-column: 2 / 5
grid-column: 2 / 5
grid-column: 3 / 6
grid-template-columns: subgrid
To use subgrid First create a grid formatting context with display: grid. Then opt in columns or rows with the subgrid value.
subgrid The subgrid must be participating in grid layout and a grid container itself.
Putting it all together … A demo.
Thank you! @rachelandrew
CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the core of the inbuilt CSS layout system. Learning Grid Layout, or Flexbox, without understanding Display, leaves you with a wobbly foundation and more questions than answers.
The real question isn’t “Should I use Grid or Flexbox?” but instead, “How do I want these boxes to behave?” Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and knowing how the various formatting contexts behave unlocks margin collapsing and the behavior of items inside grid or flex layout. By the end of the hour, you’ll understand how the display property underpins the layout system we have today, the things coming in the future, and be able to make more informed decisions when deciding how to build any part of your design, big or small.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
