Now You See It: Understanding Display

A presentation at An Event Apart Online Together in June 2020 in by Rachel Andrew

Slide 1

Slide 1

Now You See It. Rachel Andrew @ An Event Apart Online

Slide 2

Slide 2

CSS1 Recommendation December 1996

Slide 3

Slide 3

Slide 4

Slide 4

Slide 5

Slide 5

Some things are block things other things are inline things.

Slide 6

Slide 6

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

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.

Slide 12

Slide 12

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 …

Slide 13

Slide 13

display

Slide 14

Slide 14

Slide 15

Slide 15

block and inline

Slide 16

Slide 16

Slide 17

Slide 17

inline block

Slide 18

Slide 18

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.

Slide 19

Slide 19

block inline writing-mode: vertical-rl

Slide 20

Slide 20

Normal Flow block and inline layout

Slide 21

Slide 21

Layout always returns to Normal Flow A well-structured HTML document means you are working with the browser rather than against it.

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

For each element, CSS generates zero or more boxes as specified by that element’s display property. https://www.w3.org/TR/css-display-3/#intro

Slide 25

Slide 25

display: block Creates a block-level box.

Slide 26

Slide 26

display: inline Creates an inline-level box.

Slide 27

Slide 27

display: flex Creates a block-level box with flex children.

Slide 28

Slide 28

Creating a Flex Formatting Context

Slide 29

Slide 29

Formatting context Describes the behavior of the child elements of a box.

Slide 30

Slide 30

display: flex

Slide 31

Slide 31

display: flex

Slide 32

Slide 32

justify-content: space-between

Slide 33

Slide 33

display: inline-flex

Slide 34

Slide 34

display: grid Creates a block-level box with children participating in a grid formatting context.

Slide 35

Slide 35

display: grid; grid-template-columns: 1fr 2fr 2fr;

Slide 36

Slide 36

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.

Slide 37

Slide 37

Two values for display Refactoring the display specification.

Slide 38

Slide 38

display: block flex

Slide 39

Slide 39

display: inline flex

Slide 40

Slide 40

display: block grid

Slide 41

Slide 41

display: block flow

Slide 42

Slide 42

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

Slide 43

Slide 43

display: block flow-root Starting over with a new formatting context for normal flow.

Slide 44

Slide 44

Slide 45

Slide 45

overflow: auto

Slide 46

Slide 46

display: block flow-root

Slide 47

Slide 47

display: inline flow-root An inline box that creates a new formatting context.

Slide 48

Slide 48

Slide 49

Slide 49

display: inline-block

Slide 50

Slide 50

display: inline flow-root

Slide 51

Slide 51

Margins Do not collapse through a new formatting context.

Slide 52

Slide 52

Slide 53

Slide 53

Slide 54

Slide 54

display: flow-root

Slide 55

Slide 55

display: flex

Slide 56

Slide 56

Anonymous boxes

Slide 57

Slide 57

<p>One <span>two</span> three</p>

Slide 58

Slide 58

p{ display: flex; justify-content: space-between; }

Slide 59

Slide 59

Anonymous Boxes Ensure that everything is in a box.

Slide 60

Slide 60

p>*{ color: rgb(74,112,122); }

Slide 61

Slide 61

Anonymous Boxes Fixing up the box tree.

Slide 62

Slide 62

li { display: table-cell; }

Slide 63

Slide 63

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.

Slide 64

Slide 64

Floating and positioning Taking items out of flow.

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

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.

Slide 69

Slide 69

.box blockquote { float: left; } .box { display: grid; grid-template-columns: 1fr 2fr }

Slide 70

Slide 70

li { float: left; }

Slide 71

Slide 71

ul { display: grid; }

Slide 72

Slide 72

Slide 73

Slide 73

Grid and position You can absolutely position items in a grid layout.

Slide 74

Slide 74

grid-column: 2 / 6; grid-row: 3 / -1;

Slide 75

Slide 75

position: absolute; top: 20px; right: 100px; 20px 100px

Slide 76

Slide 76

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.

Slide 77

Slide 77

This is all as specified Precise details ensure that each browser does the same thing, makes for happier web developers!

Slide 78

Slide 78

This is all testable The Web Platform Tests project has tests against web platform specifications, so user agents can check they are conforming.

Slide 79

Slide 79

Slide 80

Slide 80

Not Generating Boxes display: none and display: contents

Slide 81

Slide 81

display: none Do not generate a box for the element, or for the children of the element.

Slide 82

Slide 82

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

Slide 83

Slide 83

display: contents Like display: none but only the box it is applied to is removed. The children remain.

Slide 84

Slide 84

<nav> <a class=”home” href=”/”>Home</a> <ul> <li><a href=”“>Nav 1</a></li> <li><a href=”“>Nav 2</a></li> <li><a href=”“>Nav 3</a></li> </ul> </nav>

Slide 85

Slide 85

nav { display: flex; }

Slide 86

Slide 86

nav { display: flex; justify-content: space-between; } nav ul { display: contents; }

Slide 87

Slide 87

Slide 88

Slide 88

Exciting boxes! Boxes generating boxes.

Slide 89

Slide 89

Principal Box

Slide 90

Slide 90

Slide 91

Slide 91

Slide 92

Slide 92

li:first-child { color: white; }

Slide 93

Slide 93

::marker

Slide 94

Slide 94

li:first-child::marker { color: black; }

Slide 95

Slide 95

Slide 96

Slide 96

li::marker { content: “Step: ” counter(list-item) “: ”; }

Slide 97

Slide 97

h1 { display: list-item; }

Slide 98

Slide 98

h1::marker { content: “🥦🥦”; }

Slide 99

Slide 99

It’s all a value of display

Slide 100

Slide 100

Values of display do not inherit. They act on the principal box and its direct children; the grandchildren go back to normal flow.

Slide 101

Slide 101

subgrid

Slide 102

Slide 102

subgrid Allowing track definitions to be inherited by a grid on a child.

Slide 103

Slide 103

grid-template-columns: repeat(3,1fr 2fr)

Slide 104

Slide 104

Slide 105

Slide 105

grid-column: 2 / 5

Slide 106

Slide 106

grid-column: 2 / 5

Slide 107

Slide 107

grid-column: 3 / 6

Slide 108

Slide 108

grid-template-columns: subgrid

Slide 109

Slide 109

To use subgrid First create a grid formatting context with display: grid. Then opt in columns or rows with the subgrid value.

Slide 110

Slide 110

Slide 111

Slide 111

Slide 112

Slide 112

subgrid The subgrid must be participating in grid layout and a grid container itself.

Slide 113

Slide 113

Putting it all together … A demo.

Slide 114

Slide 114

Thank you! @rachelandrew