How to understand CSS @rachelandrew
Slide 1
Slide 2
If you work in web development learning CSS is not optional.
Slide 3
Revisit the things you already know
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
It’s true! Some things in CSS have weird names, strange casing, and odd rules.
Slide 6
We can’t break the web
Slide 7
Slide 8
Naming things is hard
Slide 9
Writing Modes A writing-mode agnostic way of working.
Slide 10
Block Inline
Slide 11
Inline Block
Slide 12
Block start Inline start Inline end Block end
Slide 13
Web layout is tied to physical dimensions We think in top, right, bottom, left, width, height.
Slide 14
.example { width: 600px; height: 300px; }
Slide 15
Height Width
Slide 16
Logical Properties & Values Mapping the physical to the flow-relative.
Slide 17
.example { inline-size: 600px; block-size: 300px; }
Slide 18
inline-size block-size
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
Block and inline, start and end
Slide 21
Initial Values Every property has a value.
Slide 22
.example { display: flex; }
Slide 23
Slide 24
Normal flow Block and inline layout
Slide 25
Slide 26
Formatting contexts Switching from block to flex or grid.
Slide 27
Slide 28
.example { display: flex; }
Slide 29
.example { display: grid; grid-template-columns: 1fr 1fr 1fr; }
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 32
Generated content The strange world of ::before and ::after
Slide 33
::before and ::after are pseudo-elements They use two colons :: to distinguish them from pseudo-classes (one colon).
Slide 34
In the past they were defined with one colon :before and :after. So browsers maintain that syntax for backwards compatibility.
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 37
.example { display: grid; } .example::before { content: “”; background-color: #1981a1; } .example::after { content: “”; background-color: #1f0945; }
Slide 38
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 41
Slide 42
Busting out of flow Position and float
Slide 43
Slide 44
display: flow-root Creates a new Block Formatting Context
Slide 45
.box { background-color: rgb(43,91,128); display: flow-root; }
Slide 46
Slide 47
Margin collapsing The rules around combining margins.
Slide 48
Margins collapse in the block direction For example, between paragraphs.
Slide 49
Margins only collapse on items participating in a block formatting context. Flex and Grid items do not collapse margins.
Slide 50
Adjacent children The margin-bottom of a paragraph will combine with the margin-top of a following paragraph.
Slide 51
Slide 52
Completely empty boxes. The top and bottom margin will combine.
Slide 53
Slide 54
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 57
Slide 58
Box Alignment https://drafts.csswg.org/css-align/
Slide 59
Aligning in the block and inline dimensions
Slide 60
Distribution of space and alignment of items within their space
Slide 61
Block start Inline start
Slide 62
justify-content In grid, inline space distribution between tracks.
Slide 63
.example { justify-content: space-between; }
Slide 64
.example { justify-content: space-between; }
Slide 65
align-content In Grid, block dimension space distribution between tracks
Slide 66
.example { align-content: end; }
Slide 67
In flexbox, we justify on the main axis and align on the cross axis
Slide 68
Justify-content In flex layout, main axis space distribution between flex items
Slide 69
.example { justify-content: flex-end; }
Slide 70
align-content In flex layout, cross-axis space distribution between lines
Slide 71
.example { align-content: space-around; }
Slide 72
For –content properties to do anything, you must have spare space to distribute!
Slide 73
Aligning items inside their areas
Slide 74
Slide 75
.example { justify-self: end; align-self: end; }
Slide 76
.example { justify-items: end; align-items: end; }
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
.example { align-self: center; }
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
align- • Cross axis alignment in flexbox • Block axis alignment in grid
Slide 81
-content • Space distribution between flex items or grid tracks • No spare space and these properties do nothing
Slide 82
-items, -self • Alignment within the grid area • Alignment against other flex items on the cross axis
Slide 83
Box sizing https://drafts.csswg.org/css-sizing-3/
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
When we had to control the size of each item in a layout, the Box Model was very important.
Slide 86
Slide 87
Slide 88
Slide 89
Slide 90
Slide 91
What is the inline-size or width of the box? By default, the content-box
Slide 92
If you want your specified width to include padding and border… … set the box-sizing property to border-box.
Slide 93
.example { box-sizing: border-box; }
Slide 94
In the past everything was a length or a percentage.
Slide 95
What is the minimum and maximum size of this thing
Slide 96
Slide 97
Any content-based sizing is worked out based on these min and max content sizes.
Slide 98
.example { display: flex; }
Slide 99
.example { display: flex; } .example > * { flex: auto; }
Slide 100
.example { display: flex; } .example > * { flex: auto; }
Slide 101
.example { display: flex; } .example > * { flex: 1; }
Slide 102
.example { display: grid; grid-template-columns: auto auto auto; }
Slide 103
Do not be afraid of the specifications! Interesting information lives there.
Slide 104
Slide 105
Thank you! @rachelandrew
