When New CSS Features Collide: Possibility and Complexity at the Intersections

Slide 1

When new CSS features collide Possibility and Complexity at the Intersections Rachel Andrew, Google

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

Complexity Each new feature is relatively simple to use, however each brings new interactions, and the potential of unexpected behavior.

Slide 64

Slide 65

It’s a good time to really learn CSS It will help you to take advantage of all of this new greatness.

Slide 66

The problem with new layout

Slide 67

The ability to disconnect the source and focus order from the display.

Slide 68

Slide 69

Slide 70

Here’s a really cool thing! Please don’t use it.

Slide 71

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 72

Slide 73

A new reading-order property Proposal: https://github.com/w3c/csswg-drafts/issues/7387#issuecomment-1217193918

Slide 74

Slide 75

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 76

Focus is hard If you have examples and use cases for this feature, talk to me!

Slide 77

Thank you! @rachelandrew