Now and Next in Responsive Design

A presentation at Web Unleashed in October 2022 in by Rachel Andrew

Slide 1

Now and Next in Responsive Design RACHEL ANDREW AT WEB UNLEASHED, OCTOBER 2022

Slide 2

How do we support all these different screen sizes?

Slide 3

Slide 4

Responsive Web Design • Calculating percentages for floated layouts • Squishing images • Leaning on Media Queries

Slide 5

column-count: 3

Slide 6

Flexbox responds to the content

Slide 7

display: flex

Slide 8

display: flex

Slide 9

What does it mean to respond to content?

Slide 10

flex-basis: auto max-content

Slide 11

flex-basis: auto Space reduced from max-content until all boxes fit

Slide 12

We don’t have to line everything up. Sometimes what we need is just to make things fit nicely.

Slide 13

CSS Grid For when you do want to line everything up.

Slide 14

.grid { display: grid; grid-template-columns: repeat(12, 1fr); }

Slide 15

repeat(12, 1fr)

Slide 16

.grid { display: grid; grid-template-columns: repeat(12, minmax(auto, 1fr)); }

Slide 17

repeat(12, 1fr)

Slide 18

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }

Slide 19

repeat(12, minmax(0,1fr))

Slide 20

Responding to content in a grid layout world

Slide 21

auto

Slide 22

grid-template-columns: repeat(3, auto)

Slide 23

justify-content: start

Slide 24

repeat(12, 1fr)

Slide 25

flex-basis: auto repeat(3, 1fr)

Slide 26

min-content, max-content, fitcontent Directing content-based sizing

Slide 27

repeat(3, min-content)

Slide 28

repeat(3, max-content)

Slide 29

repeat(3, fit-content(400px)) max-content 400px

Slide 30

.media { display: grid; grid-template-columns: fit-content(300px) 1fr; gap: 20px; }

Slide 31

Slide 32

Media Queries

Slide 33

column-width: 200px

Slide 34

flex-wrap: wrap

Slide 35

repeat(auto-fill, minmax(200px, 1fr)

Slide 36

The first rule of Media Queries is … Do I need a media query?

Slide 37

.wrapper { display: grid; grid-template-areas: “hd” “bd” “sd” “ft”; }

Slide 38

Slide 39

@media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }

Slide 40

Slide 41

More than just screen size What else could we respond to?

Slide 42

What type of pointer do I have?

Slide 43

@media (pointer:coarse) { .pointer::before { content: “You have a coarse pointer”; } } @media (pointer:fine) { .pointer::before { content: “You have a fine pointer”; } }

Slide 44

Can I hover?

Slide 45

@media (hover) { .can-i-hover::after { content: “You look like you can hover.”; } } @media (hover:none) { .can-i-hover::after { content: “I don’t think you can hover.”; } }

Slide 46

Testing capabilities Check for screen size, but also pointer type and hover ability to understand the environment your site is being used in.

Slide 47

Responding to the wishes of the visitor Media Queries Level 5 and User Preference Media Features

Slide 48

prefers-reduced-motion

Slide 49

@media (prefers-reduced-motion: reduce) { .animation { animation: none; } }

Slide 50

New syntax for range media queries

Slide 51

@media (min-width: 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }

Slide 52

@media (width > 600px) { .wrapper { grid-template-columns: 3fr 1fr; grid-template-areas: “hd hd” “bd sd” “ft ft”; } }

Slide 53

Container queries

Slide 54

.element { container-type: inline-size; }

Slide 55

.element { container-type: inline-size; container-name: sidebar; }

Slide 56

@container (min-width: 500px) { }

Slide 57

@container sidebar (min-width: 500px) { }

Slide 58

Slide 59

Subgrid

Slide 60

.child-grid { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Slide 61

.main-grid { display: grid; grid-template-columns: repeat(12,1fr); grid-template-rows: repeat(4, minmax(150px, auto)); } .child-grid { grid-column: 4 / 8; grid-row: 2 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }