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

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

Slide 28

Slide 29

Why did this take so long? It seems really simple!

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

“ 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 35

Container queries + aspect-ratio

Slide 36

Slide 37

Slide 38

A parent selector has()

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

has() + container queries What’s inside the component + how much space there is to play with.

Slide 46

Slide 47

Slide 48

subgrid Inherit the size and number of tracks from a parent into a child grid.

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

The value of subgrid replaces the track listing You can subgrid in one dimension or both.

Slide 56

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 57

To use a subgrid you would need to know exactly how many columns and rows the component would have.

Slide 58

CSS requires playing a long game The single-axis decision slowed progress and implementation of subgrid, but it was the right decision.

Slide 59

subgrid + container queries Creating subgrids or using tracks based on available space.

Slide 60

Slide 61

Slide 62

Slide 63

So many possibilities

Slide 64

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

Slide 65

Slide 66

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

Slide 67

The problem with new layout

Slide 68

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

Slide 69

Slide 70

Slide 71

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

Slide 72

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 73

Slide 74

reading-order and reading-order-items https://developer.chrome.com/blog/reading-order/

Slide 75

Slide 76

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 77

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

Slide 78

Thank you! @rachelandrew | https://noti.st/rachelandrew/yG39OE/