Now and Next in Responsive Design

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

How do we support all these different screen sizes?

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

column-count: 3

Flexbox responds to the content

display: flex

display: flex

What does it mean to respond to content?

flex-basis: auto max-content

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

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

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

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

repeat(12, 1fr)

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

repeat(12, 1fr)

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

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

Responding to content in a grid layout world

auto

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

justify-content: start

repeat(12, 1fr)

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

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

repeat(3, min-content)

repeat(3, max-content)

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

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

Media Queries

column-width: 200px

flex-wrap: wrap

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

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

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

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

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

What type of pointer do I have?

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

Can I hover?

@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.”; } }

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

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

prefers-reduced-motion

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

New syntax for range media queries

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

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

Container queries

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

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

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

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

Subgrid

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

.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; }

Subgrid + container queries

@container my-grid (min-width: 600px) { .item { display: grid; grid-template-columns: subgrid; } }

:has()

li:has(h2) { }

@container (min-width: 500px) { .card:has(figure+.content) { display: grid; grid-template-columns: .8fr 1fr; gap: 10px; } }

What does it mean to do responsive design today?

Respond to content

Use new layout and image features

Use media features and container queries to enhance your layout.

It’s not just about screen, or even component, size

Responding to needs and environment

Don’t expect people to fix something to use your website. Respond to meet them where they are.

Thank you! https://noti.st/rachelandrew