How to understand CSS

A presentation at An Event Apart Fall Summit in October 2021 in by Rachel Andrew

Slide 1

Slide 1

How to understand CSS @rachelandrew

Slide 2

Slide 2

If you work in web development learning CSS is not optional.

Slide 3

Slide 3

Revisit the things you already know

Slide 4

Slide 4

function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName==”Netscape”)&&(parseIn t(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload() ; } MM_reloadPage(true);

Slide 5

Slide 5

It’s true! Some things in CSS have weird names, strange casing, and odd rules.

Slide 6

Slide 6

We can’t break the web

Slide 7

Slide 7

Slide 8

Slide 8

Naming things is hard

Slide 9

Slide 9

Writing Modes A writing-mode agnostic way of working.

Slide 10

Slide 10

Block Inline

Slide 11

Slide 11

Inline Block

Slide 12

Slide 12

Block start Inline start Inline end Block end

Slide 13

Slide 13

Web layout is tied to physical dimensions We think in top, right, bottom, left, width, height.

Slide 14

Slide 14

.example { width: 600px; height: 300px; }

Slide 15

Slide 15

Height Width

Slide 16

Slide 16

Logical Properties & Values Mapping the physical to the flow-relative.

Slide 17

Slide 17

.example { inline-size: 600px; block-size: 300px; }

Slide 18

Slide 18

inline-size block-size

Slide 19

Slide 19

Physical vs. Logical .example { padding-top: 10px; padding-right: 2em; margin-bottom: 2em; } .example { padding-block-start: 10px; padding-inline-end: 2em; margin-block-end: 2em; }

Slide 20

Slide 20

Block and inline, start and end

Slide 21

Slide 21

Initial Values Every property has a value.

Slide 22

Slide 22

.example { display: flex; }

Slide 23

Slide 23

Slide 24

Slide 24

Normal flow Block and inline layout

Slide 25

Slide 25

Slide 26

Slide 26

Formatting contexts Switching from block to flex or grid.

Slide 27

Slide 27

Slide 28

Slide 28

.example { display: flex; }

Slide 29

Slide 29

.example { display: grid; grid-template-columns: 1fr 1fr 1fr; }

Slide 30

Slide 30

Changing the value of display changes the formatting context of the direct children of the element. Inside those children we return to normal flow.

Slide 31

Slide 31

Slide 32

Slide 32

Generated content The strange world of ::before and ::after

Slide 33

Slide 33

::before and ::after are pseudo-elements They use two colons :: to distinguish them from pseudo-classes (one colon).

Slide 34

Slide 34

In the past they were defined with one colon :before and :after. So browsers maintain that syntax for backwards compatibility.

Slide 35

Slide 35

::before and ::after add a first and last child Before the other children and after the other children of the element.

Slide 36

Slide 36

Slide 37

Slide 37

.example { display: grid; } .example::before { content: “”; background-color: #1981a1; } .example::after { content: “”; background-color: #1f0945; }

Slide 38

Slide 38

Slide 39

Slide 39

h1 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em; } h1::before, h1::after { content: “”; align-self: center; border-bottom: 2px solid #1f0945; }

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Busting out of flow Position and float

Slide 43

Slide 43

Slide 44

Slide 44

display: flow-root Creates a new Block Formatting Context

Slide 45

Slide 45

.box { background-color: rgb(43,91,128); display: flow-root; }

Slide 46

Slide 46

Slide 47

Slide 47

Margin collapsing The rules around combining margins.

Slide 48

Slide 48

Margins collapse in the block direction For example, between paragraphs.

Slide 49

Slide 49

Margins only collapse on items participating in a block formatting context. Flex and Grid items do not collapse margins.

Slide 50

Slide 50

Adjacent children The margin-bottom of a paragraph will combine with the margin-top of a following paragraph.

Slide 51

Slide 51

Slide 52

Slide 52

Completely empty boxes. The top and bottom margin will combine.

Slide 53

Slide 53

Slide 54

Slide 54

Slide 55

Slide 55

First and last child and parent The margin on these children can be combined with the margin on their parent.

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

Box Alignment https://drafts.csswg.org/css-align/

Slide 59

Slide 59

Aligning in the block and inline dimensions

Slide 60

Slide 60

Distribution of space and alignment of items within their space

Slide 61

Slide 61

Block start Inline start

Slide 62

Slide 62

justify-content In grid, inline space distribution between tracks.

Slide 63

Slide 63

.example { justify-content: space-between; }

Slide 64

Slide 64

.example { justify-content: space-between; }

Slide 65

Slide 65

align-content In Grid, block dimension space distribution between tracks

Slide 66

Slide 66

.example { align-content: end; }

Slide 67

Slide 67

In flexbox, we justify on the main axis and align on the cross axis

Slide 68

Slide 68

Justify-content In flex layout, main axis space distribution between flex items

Slide 69

Slide 69

.example { justify-content: flex-end; }

Slide 70

Slide 70

align-content In flex layout, cross-axis space distribution between lines

Slide 71

Slide 71

.example { align-content: space-around; }

Slide 72

Slide 72

For –content properties to do anything, you must have spare space to distribute!

Slide 73

Slide 73

Aligning items inside their areas

Slide 74

Slide 74

Slide 75

Slide 75

.example { justify-self: end; align-self: end; }

Slide 76

Slide 76

.example { justify-items: end; align-items: end; }

Slide 77

Slide 77

“ [justify-self] does not apply to flex items, because there is more than one item in the main axis.” https://drafts.csswg.org/css-align/#justify-flex ”

Slide 78

Slide 78

.example { align-self: center; }

Slide 79

Slide 79

justify- • Main axis alignment in flexbox (the direction of flex-direction) • Flexbox only supports justify-content (not justify–items or justify–self) • Inline axis alignment in grid

Slide 80

Slide 80

align- • Cross axis alignment in flexbox • Block axis alignment in grid

Slide 81

Slide 81

-content • Space distribution between flex items or grid tracks • No spare space and these properties do nothing

Slide 82

Slide 82

-items, -self • Alignment within the grid area • Alignment against other flex items on the cross axis

Slide 83

Slide 83

Box sizing https://drafts.csswg.org/css-sizing-3/

Slide 84

Slide 84

What about the Box Model? Isn’t there a rule that anyone talking about CSS must show a box model diagram?

Slide 85

Slide 85

When we had to control the size of each item in a layout, the Box Model was very important.

Slide 86

Slide 86

Slide 87

Slide 87

Slide 88

Slide 88

Slide 89

Slide 89

Slide 90

Slide 90

Slide 91

Slide 91

What is the inline-size or width of the box? By default, the content-box

Slide 92

Slide 92

If you want your specified width to include padding and border… … set the box-sizing property to border-box.

Slide 93

Slide 93

.example { box-sizing: border-box; }

Slide 94

Slide 94

In the past everything was a length or a percentage.

Slide 95

Slide 95

What is the minimum and maximum size of this thing

Slide 96

Slide 96

Slide 97

Slide 97

Any content-based sizing is worked out based on these min and max content sizes.

Slide 98

Slide 98

.example { display: flex; }

Slide 99

Slide 99

.example { display: flex; } .example > * { flex: auto; }

Slide 100

Slide 100

.example { display: flex; } .example > * { flex: auto; }

Slide 101

Slide 101

.example { display: flex; } .example > * { flex: 1; }

Slide 102

Slide 102

.example { display: grid; grid-template-columns: auto auto auto; }

Slide 103

Slide 103

Do not be afraid of the specifications! Interesting information lives there.

Slide 104

Slide 104

Slide 105

Slide 105

Thank you! @rachelandrew