When new CSS features collide Possibility and Complexity at the Intersections Rachel Andrew, Google
Slide 1
Slide 2
Floats Floats Positioning Positioning Media queries Media queries Flexbox Grid layout Container queries Cascade layers
Slide 3
Slide 4
“ If I would have asked people what they wanted, they would have said faster horses. (Probably not) Henry Ford. ”
Slide 5
Slide 6
A floated item is out of flow, it has no knowledge of the other boxes in the layout.
Slide 7
In flex layout, items are treated as a group.
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
“ 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 14
Why use grid instead of flexbox?
Slide 15
Slide 16
Slide 17
Two years after grid shipped in the three major engines, only 2% of sites were using grid layout.
Slide 18
Flexbox provided the faster horses.
Slide 19
Container Queries Querying against properties of the container, rather than the viewport.
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
Why did this take so long? It seems really simple!
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
“ 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 34
Container queries + aspect-ratio
Slide 35
Slide 36
Slide 37
A parent selector has()
Slide 38
Slide 39
Slide 40
Slide 41
Slide 42
Slide 43
Slide 44
has() + container queries What’s inside the component + how much space there is to play with.
Slide 45
Slide 46
Slide 47
subgrid Inherit the size and number of tracks from a parent into a child grid.
Slide 48
Slide 49
Slide 50
Slide 51
Slide 52
Slide 53
Slide 54
The value of subgrid replaces the track listing You can subgrid in one dimension or both.
Slide 55
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 56
To use a subgrid you would need to know exactly how many columns and rows the component would have.
Slide 57
CSS requires playing a long game The single-axis decision slowed progress and implementation of subgrid, but it was the right decision.
Slide 58
subgrid + container queries Creating subgrids or using tracks based on available space.
Slide 59
Slide 60
Slide 61
Slide 62
So many possibilities
Slide 63
Thank you! @rachelandrew
