Learning to love CSS

A presentation at c’t webdev in February 2020 in Cologne, Germany by Rachel Andrew

Slide 1

Slide 1

Learning to love CSS. Rachel Andrew @ c’t webdev Slides & resources https://noti.st/rachelandrew

Slide 2

Slide 2

Doing things on the web since 1996 Co-founder Perch CMS & Notist. Editor in Chief Smashing Magazine. Writer of many books. CSS Working Group Member representing Fronteers. Spec editor Multicol and Page Floats. MDN tech writer. Slides & resources https://noti.st/rachelandrew

Slide 3

Slide 3

Slides & resources https://noti.st/rachelandrew

Slide 4

Slide 4

Slides & resources https://noti.st/rachelandrew

Slide 5

Slide 5

Slides & resources https://noti.st/rachelandrew

Slide 6

Slide 6

Slides & resources https://noti.st/rachelandrew

Slide 7

Slide 7

Slides & resources https://noti.st/rachelandrew

Slide 8

Slide 8

Slides & resources https://noti.st/rachelandrew

Slide 9

Slide 9

From <table> to CSS Slides & resources https://noti.st/rachelandrew

Slide 10

Slide 10

Slides & resources https://noti.st/rachelandrew

Slide 11

Slide 11

Slides & resources https://noti.st/rachelandrew

Slide 12

Slide 12

Slides & resources https://noti.st/rachelandrew

Slide 13

Slide 13

The ‘Netscape Resize Fix’ Reloaded the browser window on resize, otherwise all positioned elements stacked up top left. Slides & resources https://noti.st/rachelandrew

Slide 14

Slide 14

“He then employed the little-used CSS ‘float’ property to float the content to the desired width:” Slides & resources https://noti.st/rachelandrew

Slide 15

Slide 15

Slides & resources https://noti.st/rachelandrew

Slide 16

Slide 16

The job of a web developer was as browser bug wrangler. Slides & resources https://noti.st/rachelandrew

Slide 17

Slide 17

Slides & resources https://noti.st/rachelandrew

Slide 18

Slide 18

Frameworks helped busy teams deal with fragile CSS layout methods. Slides & resources https://noti.st/rachelandrew

Slide 19

Slide 19

Slides & resources https://noti.st/rachelandrew

Slide 20

Slide 20

The Grid Layout spec Initial implementation in Internet Explorer 10. Slides & resources https://noti.st/rachelandrew

Slide 21

Slide 21

Slides & resources https://noti.st/rachelandrew

Slide 22

Slide 22

A real layout system at the heart of CSS It’s more than just grid and flex. Slides & resources https://noti.st/rachelandrew

Slide 23

Slide 23

Talking about CSS as a layout system Slides & resources https://noti.st/rachelandrew

Slide 24

Slide 24

• • • • • • • • • Flow Layout Changing the value of display Out of flow elements Block Formatting Contexts Writing Modes Logical, flow-relative properties and values Alignment Sizing Media & Feature Queries Slides & resources https://noti.st/rachelandrew

Slide 25

Slide 25

Understanding display Slides & resources https://noti.st/rachelandrew

Slide 26

Slide 26

Normal Flow Block and Inline Layout Slides & resources https://noti.st/rachelandrew

Slide 27

Slide 27

Slides & resources https://noti.st/rachelandrew

Slide 28

Slide 28

CSS is doing work for us, before we write any CSS. Slides & resources https://noti.st/rachelandrew

Slide 29

Slide 29

Slides & resources https://noti.st/rachelandrew

Slide 30

Slide 30

.example { display: flex; } Slides & resources https://noti.st/rachelandrew

Slide 31

Slide 31

.example { display: grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 32

Slide 32

Changing the value of display changes that element and its direct children. Slides & resources https://noti.st/rachelandrew

Slide 33

Slide 33

Slides & resources https://noti.st/rachelandrew

Slide 34

Slide 34

The two values of display Slides & resources https://noti.st/rachelandrew

Slide 35

Slide 35

.example { display: block grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 36

Slide 36

.example { display: inline grid; grid-template-columns: 1fr 1fr 1fr; } Slides & resources https://noti.st/rachelandrew

Slide 37

Slide 37

The outer display type How the box behaves in the layout - block or inline Slides & resources https://noti.st/rachelandrew

Slide 38

Slide 38

The inner display type The formatting context of the direct children – grid, flex etc. Slides & resources https://noti.st/rachelandrew

Slide 39

Slide 39

Busting out of flow Slides & resources https://noti.st/rachelandrew

Slide 40

Slide 40

position Slides & resources https://noti.st/rachelandrew

Slide 41

Slide 41

.position { position: absolute; } Slides & resources https://noti.st/rachelandrew

Slide 42

Slide 42

float Slides & resources https://noti.st/rachelandrew

Slide 43

Slide 43

.box { background-color: rgb(43,91,128); } Slides & resources https://noti.st/rachelandrew

Slide 44

Slide 44

display: flow-root Slides & resources https://noti.st/rachelandrew

Slide 45

Slide 45

Creating a new Block Formatting Context Slides & resources https://noti.st/rachelandrew

Slide 46

Slide 46

.box { background-color: rgb(43,91,128); display: flow-root; } Slides & resources https://noti.st/rachelandrew

Slide 47

Slide 47

Writing Modes Slides & resources https://noti.st/rachelandrew

Slide 48

Slide 48

writing-mode: horizontal-tb; Inline Dimension Block Dimension Slides & resources https://noti.st/rachelandrew

Slide 49

Slide 49

writing-mode: vertical-rl; Block Dimension Inline Dimension Slides & resources https://noti.st/rachelandrew

Slide 50

Slide 50

Block Start Block Start Block End Block End Slides & resources https://noti.st/rachelandrew

Slide 51

Slide 51

Inline Start Inline End Inline Start Inline End Slides & resources https://noti.st/rachelandrew

Slide 52

Slide 52

Web layout was tied to physical dimensions We think in top, right, bottom, left. Or width & height. Slides & resources https://noti.st/rachelandrew

Slide 53

Slide 53

.example { width: 600px; height: 300px; } Slides & resources https://noti.st/rachelandrew

Slide 54

Slide 54

Logical Properties & Values Slides & resources https://noti.st/rachelandrew

Slide 55

Slide 55

.example { inline-size: 600px; block-size: 300px; } Slides & resources https://noti.st/rachelandrew

Slide 56

Slide 56

inline-size = width block-size = height Slides & resources https://noti.st/rachelandrew

Slide 57

Slide 57

block-size = width inline-size = height Slides & resources https://noti.st/rachelandrew

Slide 58

Slide 58

Physical v. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; margin-inline: 1em; } Slides & resources https://noti.st/rachelandrew

Slide 59

Slide 59

.example { border-start-start-radius: 20px; border-start-end-radius: 3em; border-end-start-radius: 2em 4em; border-end-end-radius: 5px; } Slides & resources https://noti.st/rachelandrew

Slide 60

Slide 60

Layout exists in this flow-relative, logical world. Slides & resources https://noti.st/rachelandrew

Slide 61

Slide 61

Box Alignment https://drafts.csswg.org/css-align/ Slides & resources https://noti.st/rachelandrew

Slide 62

Slide 62

Aligning things in the block and inline dimensions. Slides & resources https://noti.st/rachelandrew

Slide 63

Slide 63

Distribution of space and alignment of items within their space. Slides & resources https://noti.st/rachelandrew

Slide 64

Slide 64

Block Start Inline Start Slides & resources https://noti.st/rachelandrew

Slide 65

Slide 65

justify-content In Grid, inline dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew

Slide 66

Slide 66

.example { justify-content: space-between; } Slides & resources https://noti.st/rachelandrew

Slide 67

Slide 67

align-content In Grid, block dimension space distribution between tracks Slides & resources https://noti.st/rachelandrew

Slide 68

Slide 68

.example { align-content: end; } Slides & resources https://noti.st/rachelandrew

Slide 69

Slide 69

In flexbox, we justify on the main axis and align on the cross axis Slides & resources https://noti.st/rachelandrew

Slide 70

Slide 70

justify-content In Flex, main axis space distribution between flex items Slides & resources https://noti.st/rachelandrew

Slide 71

Slide 71

.example { justify-content: flex-end; } Slides & resources https://noti.st/rachelandrew

Slide 72

Slide 72

align-content In Flex, cross axis space distribution between flex lines Slides & resources https://noti.st/rachelandrew

Slide 73

Slide 73

.example { align-content: space-around; } Slides & resources https://noti.st/rachelandrew

Slide 74

Slide 74

For –content properties to do anything, you must have spare space to distribute! Slides & resources https://noti.st/rachelandrew

Slide 75

Slide 75

Slides & resources https://noti.st/rachelandrew

Slide 76

Slide 76

.item { justify-self: end; align-self: end; } Slides & resources https://noti.st/rachelandrew

Slide 77

Slide 77

.example { justify-items: end; align-items: end; } Slides & resources https://noti.st/rachelandrew

Slide 78

Slide 78

“[justify-content] does not apply to flex items, because there is more than one item in the main axis.” Slides & resources https://noti.st/rachelandrew

Slide 79

Slide 79

.item { align-self: center; } Slides & resources https://noti.st/rachelandrew

Slide 80

Slide 80

“Prior to alignment via justifycontent and align-self, any positive free space is distributed to auto margins in that dimension.” Slides & resources https://noti.st/rachelandrew

Slide 81

Slide 81

.example div:last-child { margin-left: auto; } Slides & resources https://noti.st/rachelandrew

Slide 82

Slide 82

Let’s stop calling stuff that is in the spec a CSS ‘hack’ Slides & resources https://noti.st/rachelandrew

Slide 83

Slide 83

Safe and Unsafe alignment Avoiding CSS data loss Slides & resources https://noti.st/rachelandrew

Slide 84

Slide 84

.example { display: flex; flex-direction: column; align-items: center; } Slides & resources https://noti.st/rachelandrew

Slide 85

Slide 85

.example { display: flex; flex-direction: column; align-items: safe center; } Slides & resources https://noti.st/rachelandrew

Slide 86

Slide 86

Box Sizing https://drafts.csswg.org/css-sizing-3/ Slides & resources https://noti.st/rachelandrew

Slide 87

Slide 87

What about the Box Model? Slides & resources https://noti.st/rachelandrew

Slide 88

Slide 88

When we had to control the size of each item in a layout, the Box Model was key. Slides & resources https://noti.st/rachelandrew

Slide 89

Slide 89

Slides & resources https://noti.st/rachelandrew

Slide 90

Slide 90

500px Slides & resources https://noti.st/rachelandrew

Slide 91

Slide 91

30px + 500px + 30px Slides & resources https://noti.st/rachelandrew

Slide 92

Slide 92

5px + 30px + 500px + 30px + 5px Slides & resources https://noti.st/rachelandrew

Slide 93

Slide 93

40px + 5px + 30px + 500px + 30px + 5px + 40px Slides & resources https://noti.st/rachelandrew

Slide 94

Slide 94

What is the inline-size or width of the box? By default, the content-box Slides & resources https://noti.st/rachelandrew

Slide 95

Slide 95

If you want the specified width to include padding and border Set the box-sizing property to border-box. Slides & resources https://noti.st/rachelandrew

Slide 96

Slide 96

.example { box-sizing: border-box; } Slides & resources https://noti.st/rachelandrew

Slide 97

Slide 97

How big is that box? Slides & resources https://noti.st/rachelandrew

Slide 98

Slide 98

In the past everything was a length or a percentage. Slides & resources https://noti.st/rachelandrew

Slide 99

Slide 99

What is the minimum and maximum size of this thing? Slides & resources https://noti.st/rachelandrew

Slide 100

Slide 100

.example { grid-template-columns: min-content max-content; } Slides & resources https://noti.st/rachelandrew

Slide 101

Slide 101

Any content-based sizing is worked out based on these min and max content sizes. Slides & resources https://noti.st/rachelandrew

Slide 102

Slide 102

.example { display: flex; } Slides & resources https://noti.st/rachelandrew

Slide 103

Slide 103

.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew

Slide 104

Slide 104

.example > * { flex: auto; } Slides & resources https://noti.st/rachelandrew

Slide 105

Slide 105

.example > * { flex: 1; } Slides & resources https://noti.st/rachelandrew

Slide 106

Slide 106

Old browsers. They exist. Slides & resources https://noti.st/rachelandrew

Slide 107

Slide 107

We have a specification. Some of it isn’t implemented yet. Slides & resources https://noti.st/rachelandrew

Slide 108

Slide 108

Lack of support is very different to the buggy support of the past. Slides & resources https://noti.st/rachelandrew

Slide 109

Slide 109

Media & Feature Queries How big is my viewport? Is this a touchscreen? Does this browser support Grid? Respond based on the answers. Slides & resources https://noti.st/rachelandrew

Slide 110

Slide 110

Contributing to the platform Slides & resources https://noti.st/rachelandrew

Slide 111

Slide 111

Anyone can contribute to specifications You don’t need to be an Invited Expert or representative. Slides & resources https://noti.st/rachelandrew

Slide 112

Slide 112

Slides & resources https://noti.st/rachelandrew

Slide 113

Slide 113

Everyone is allowed to contribute You don’t need permission, or to be qualified in some way. Slides & resources https://noti.st/rachelandrew

Slide 114

Slide 114

Read and comment on specification issues https://github.com/w3c/csswg-drafts/issues Slides & resources https://noti.st/rachelandrew

Slide 115

Slide 115

Slides & resources https://noti.st/rachelandrew

Slide 116

Slide 116

Show use cases As with any software development, real use cases are valuable. Slides & resources https://noti.st/rachelandrew

Slide 117

Slide 117

Contribute examples and diagrams to specifications Slides & resources https://noti.st/rachelandrew

Slide 118

Slide 118

Slides & resources https://noti.st/rachelandrew

Slide 119

Slide 119

Slides & resources https://noti.st/rachelandrew

Slide 120

Slide 120

WICG Discourse https://discourse.wicg.io/ Slides & resources https://noti.st/rachelandrew

Slide 121

Slide 121

It will probably take longer than you think for changes to be made! Patience is required for web platform contributions. Slides & resources https://noti.st/rachelandrew

Slide 122

Slide 122

Raise browser bugs Fix bugs, or request that features are implemented. Slides & resources https://noti.st/rachelandrew

Slide 123

Slide 123

Learn to create a Reduced Test Case Slides & resources https://noti.st/rachelandrew

Slide 124

Slide 124

Slides & resources https://noti.st/rachelandrew

Slide 125

Slide 125

Test and offer feedback on features behind flags. This is the best time to make changes to a spec. Slides & resources https://noti.st/rachelandrew

Slide 126

Slide 126

Slides & resources https://noti.st/rachelandrew

Slide 127

Slide 127

Web Platform Tests Help us test the web platform Slides & resources https://noti.st/rachelandrew

Slide 128

Slide 128

Slides & resources https://noti.st/rachelandrew

Slide 129

Slide 129

Many people who work on CSS started by writing tests. Slides & resources https://noti.st/rachelandrew

Slide 130

Slide 130

Comment on spec issues, raise new issues, contribute examples, raise browser bugs, write tests. Slides & resources https://noti.st/rachelandrew

Slide 131

Slide 131

Everything has changed. Slides & resources https://noti.st/rachelandrew

Slide 132

Slide 132

Nothing has changed. We need to work together to protect the open web platform. Slides & resources https://noti.st/rachelandrew

Slide 133

Slide 133

Thank you! @rachelandrew Slides & resources https://noti.st/rachelandrew