When new CSS features collide Possibility and Complexity at the Intersections Rachel Andrew, Google
Slide 1
Slide 2
When new CSS features collide Possibility and Complexity at the Intersections Rachel Andrew, Google
Slide 3
Floats Floats Positioning Positioning Media queries Media queries Flexbox Grid layout Container queries Cascade layers
Slide 4
Slide 5
“ If I would have asked people what they wanted, they would have said faster horses. (Probably not) Henry Ford. ”
Slide 6
Slide 7
A floated item is out of flow, it has no knowledge of the other boxes in the layout.
Slide 8
In flex layout, items are treated as a group.
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
“ I wanted to get it out there and get other people to have a look at it. ” Me, in The Story of CSS Grid, from Its Creators
Slide 15
Why use grid instead of flexbox?
Slide 16
Slide 17
Slide 18
Two years after grid shipped in the three major engines, only 2% of sites were using grid layout.
Slide 19
Flexbox provided the faster horses.
Slide 20
Container Queries Querying against properties of the container, rather than the viewport.
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Why did this take so long? It seems really simple!
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
“ I believe that container queries should be possible if an element has both layout containment and has size containment in the axis used for container queries. The problem here is that we don’t have a definition of size containment in a single axis. David Baron ”
Slide 33
Container queries + aspect-ratio
Slide 34
Slide 35
Slide 36
A parent selector has()
Slide 37
Slide 38
Slide 39
Slide 40
Slide 41
Slide 42
Slide 43
has() + container queries What’s inside the component + how much space there is to play with.
Slide 44
Slide 45
Slide 46
This month in Chrome Stable 🎉 subgrid Inherit the size and number of tracks from a parent into a child grid.
Slide 47
Slide 48
Slide 49
Slide 50
Slide 51
Slide 52
Slide 53
The value of subgrid replaces the track listing You can subgrid in one dimension or both.
Slide 54
One proposal was to simplify subgrid by locking it to both dimensions. This would mean there was no implicit grid, no way to subgrid columns but have as many rows as required for the content.
Slide 55
To use a subgrid you would need to know exactly how many columns and rows the component would have.
Slide 56
CSS requires playing a long game The single-axis decision slowed progress and implementation of subgrid, but it was the right decision.
Slide 57
subgrid + container queries Creating subgrids or using tracks based on available space.
Slide 58
Slide 59
Slide 60
Slide 61
So many possibilities
Slide 62
Complexity Each new feature is relatively simple to use, however each brings new interactions, and the potential of unexpected behavior.
Slide 63
Slide 64
It’s a good time to really learn CSS It will help you to take advantage of all of this new greatness.
Slide 65
The problem with new layout
Slide 66
The ability to disconnect the source and focus order from the display.
Slide 67
Slide 68
Slide 69
Here’s a really cool thing! Please don’t use it.
Slide 70
How do we ensure a reusable component retains a reasonable focus order? Wherever it is in the layout, no matter how it reflows at different breakpoints.
Slide 71
Slide 72
A new reading-order-items property Proposal: https://developer.chrome.com/blog/reading-order/
Slide 73
Slide 74
Being able to reorder content from CSS using things we can identify using CSS is useful. But we need to be able to do so in a way that works for all our users.
Slide 75
The next big CSS thing? Is more likely to be a lot of small things.
Slide 76
Thank you! @rachelandrew
