A presentation at Web Unleashed by Rachel Andrew
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
The latest CSS features landing in our browsers promise a revolution for responsive design. With container queries, we can look at the size of a component and adapt layout accordingly, perhaps using subgrid to allow those components to align to an overall grid. Media features allow us to work out how a user is interacting with our app, and the preferences they have set around things like motion.
In this talk, Rachel Andrew will take a look at what is available right now across browsers, and what is just around the corner. She’ll also dive into plenty of information about browser support to help you adopt new things with confidence.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
