learning css in 2020. · slides & resources learning css in 2020. rachel andrew
TRANSCRIPT
Slides & resources https://noti.st/rachelandrew
Learning CSS in 2020.Rachel Andrew
Slides & resources https://noti.st/rachelandrew
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
I learn a thing.I write it down.
I share it.
Slides & resources https://noti.st/rachelandrew
I thought that I had teaching CSS layout all
figured out
Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system
Slides & resources https://noti.st/rachelandrew
Talking about CSS as a layout system
Slides & resources https://noti.st/rachelandrew
As students today you have a massive advantage.
Slides & resources https://noti.st/rachelandrew
You can learn CSS in the same structured way as you learn
any other language.
Slides & resources https://noti.st/rachelandrew
• 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
Understanding display
Slides & resources https://noti.st/rachelandrew
Normal FlowBlock and Inline Layout
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
CSS is doing work for us, before we write any CSS.
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.example {display: flex;
}
Slides & resources https://noti.st/rachelandrew
.example {display: grid;grid-template-columns: 1fr 1fr 1fr;
}
Slides & resources https://noti.st/rachelandrew
Changing the value of display changes that element and its
direct children.
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
The two values of display
Slides & resources https://noti.st/rachelandrew
.example {display: block grid;grid-template-columns: 1fr 1fr 1fr;
}
Slides & resources https://noti.st/rachelandrew
.example {display: inline grid;grid-template-columns: 1fr 1fr 1fr;
}
Slides & resources https://noti.st/rachelandrew
The outer display typeHow the box behaves in the layout - block or inline
Slides & resources https://noti.st/rachelandrew
The inner display typeThe formatting context of the direct children – grid, flex etc.
Slides & resources https://noti.st/rachelandrew
Busting out of flow
Slides & resources https://noti.st/rachelandrew
position
Slides & resources https://noti.st/rachelandrew
.position {position: absolute;
}
Slides & resources https://noti.st/rachelandrew
float
Slides & resources https://noti.st/rachelandrew
.box {background-color: rgb(43,91,128);
}
Slides & resources https://noti.st/rachelandrew
display: flow-root
Slides & resources https://noti.st/rachelandrew
Creating a new Block Formatting Context
Slides & resources https://noti.st/rachelandrew
.box {background-color: rgb(43,91,128);display: flow-root;
}
Slides & resources https://noti.st/rachelandrew
Writing Modes
Slides & resources https://noti.st/rachelandrew
Block Dimension
writing-mode: horizontal-tb;
Inline Dimension
Slides & resources https://noti.st/rachelandrew
Inline Dimension
writing-mode: vertical-rl;
Block Dimension
Slides & resources https://noti.st/rachelandrew
Block Start
Block Start
Block End
Block EndBlock E
nd
Slides & resources https://noti.st/rachelandrew
Inline Start
Inline End
Inline Start
Inline End
Slides & resources https://noti.st/rachelandrew
Web layout was tied to physical dimensions
We think in top, right, bottom, left. Or width & height.
Slides & resources https://noti.st/rachelandrew
.example {width: 600px;height: 300px;
}
Slides & resources https://noti.st/rachelandrew
Logical Properties & Values
Slides & resources https://noti.st/rachelandrew
.example {inline-size: 600px;block-size: 300px;
}
Slides & resources https://noti.st/rachelandrew
block-size =
height
inline-size = width
Slides & resources https://noti.st/rachelandrew
inline-size = heig
ht
block-size = width
Slides & resources https://noti.st/rachelandrew
.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;
}
Physical v. Logical
Slides & resources https://noti.st/rachelandrew
.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
Understand this flow-relative, logical world.
Slides & resources https://noti.st/rachelandrew
Box Alignmenthttps://drafts.csswg.org/css-align/
Slides & resources https://noti.st/rachelandrew
Aligning things in the blockand inline dimensions.
Slides & resources https://noti.st/rachelandrew
Distribution of space and alignment of items within
their space.
Slides & resources https://noti.st/rachelandrew
Block Start
Inline Start
Slides & resources https://noti.st/rachelandrew
justify-contentIn Grid, inline dimension space distribution between tracks
Slides & resources https://noti.st/rachelandrew
.example {justify-content: space-between;
}
Slides & resources https://noti.st/rachelandrew
align-contentIn Grid, block dimension space distribution between tracks
Slides & resources https://noti.st/rachelandrew
.example {align-content: end;
}
Slides & resources https://noti.st/rachelandrew
In flexbox, we justify on the main axis and
align on the cross axis
Slides & resources https://noti.st/rachelandrew
justify-contentIn Flex, main axis space distribution between flex items
Slides & resources https://noti.st/rachelandrew
.example {justify-content: flex-end;
}
Slides & resources https://noti.st/rachelandrew
align-contentIn Flex, cross axis space distribution between flex lines
Slides & resources https://noti.st/rachelandrew
.example {align-content: space-around;
}
Slides & resources https://noti.st/rachelandrew
For –content properties to do anything, you must have spare
space to distribute!
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
.item {justify-self: end;align-self: end;
}
Slides & resources https://noti.st/rachelandrew
.example {justify-items: end;align-items: end;
}
Slides & resources https://noti.st/rachelandrew
“[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
.item {align-self: center;
}
Slides & resources https://noti.st/rachelandrew
“Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.”
Slides & resources https://noti.st/rachelandrew
.example div:last-child {margin-left: auto;
}
Slides & resources https://noti.st/rachelandrew
Let’s stop calling stuff that is in the spec a CSS ‘hack’
Slides & resources https://noti.st/rachelandrew
Safe and Unsafe alignment
Avoiding CSS data loss
Slides & resources https://noti.st/rachelandrew
.example {display: flex;flex-direction: column;align-items: center;
}
Slides & resources https://noti.st/rachelandrew
.example {display: flex;flex-direction: column;align-items: safe center;
}
Slides & resources https://noti.st/rachelandrew
Box Sizinghttps://drafts.csswg.org/css-sizing-3/
Slides & resources https://noti.st/rachelandrew
What about the Box Model?
Slides & resources https://noti.st/rachelandrew
When we had to control the size of each item in a layout,
the Box Model was key.
Slides & resources https://noti.st/rachelandrew
Slides & resources https://noti.st/rachelandrew
500px
Slides & resources https://noti.st/rachelandrew
30px + 500px + 30px
Slides & resources https://noti.st/rachelandrew
5px + 30px + 500px + 30px + 5px
Slides & resources https://noti.st/rachelandrew
40px + 5px + 30px + 500px + 30px + 5px + 40px
Slides & resources https://noti.st/rachelandrew
What is the inline-size or width of the box?
By default, the content-box
Slides & resources https://noti.st/rachelandrew
If you want the specified width to include padding
and borderSet the box-sizing property to border-box.
Slides & resources https://noti.st/rachelandrew
.example {box-sizing: border-box;
}
Slides & resources https://noti.st/rachelandrew
How big is that box?
Slides & resources https://noti.st/rachelandrew
In the past everything was a length or a percentage.
Slides & resources https://noti.st/rachelandrew
What is the minimum and maximum size of this thing?
Slides & resources https://noti.st/rachelandrew
.example {grid-template-columns: min-content max-content;
}
Slides & resources https://noti.st/rachelandrew
Any content-based sizing is worked out based on these min and max content sizes.
Slides & resources https://noti.st/rachelandrew
.example {display: flex;
}
Slides & resources https://noti.st/rachelandrew
.example > * {flex: auto;
}
Slides & resources https://noti.st/rachelandrew
.example > * {flex: auto;
}
Slides & resources https://noti.st/rachelandrew
.example > * {flex: 1;
}
Slides & resources https://noti.st/rachelandrew
Old browsers. They exist.
Slides & resources https://noti.st/rachelandrew
We have a specification. Some of it isn’t implemented yet.
Slides & resources https://noti.st/rachelandrew
Lack of support is very different to the buggy
support of the past.
Slides & resources https://noti.st/rachelandrew
Media & Feature QueriesHow big is my viewport? Is this a touchscreen? Does this browser support Grid? Respond based on the answers.
Slides & resources https://noti.st/rachelandrew
Avoid resources describing CSS as a weird and quirky
thing.
Slides & resources https://noti.st/rachelandrew
CSS is unlike other languages because it serves
environments like no other.
Slides & resources https://noti.st/rachelandrew
Learn CSS as it is today.
Slides & resources https://noti.st/rachelandrew
Thank you!@rachelandrew