CSS container queries by Duck

Talking points

vietduc — 2023-12-05 04:08:08 UTC

👉 Responsive design: breakpoints
☝️ Using breakpoints outside of CSS
❓ Why CSS container queries
🤧 Problems integrating container queries
👨‍🔧 How we solve them

Resources

vietduc — 2023-12-05 04:10:32 UTC

✅ Solution 3

vietduc — 2023-12-05 04:14:12 UTC

Meet -@ TW variant

https://github.com/padlet/mozart/pull/19262

Replace media queries with container queries

vietduc — 2023-12-05 04:15:50 UTC

tablet-landscape:p-4

@tablet-landscape/surface-container:p-4

Breakpoints in TailwindCSS

vietduc — 2023-12-05 04:17:05 UTC

p-4 tablet-portrait:p-0

.p-4 {
  padding: 1rem;
}

@media (min-width: 744px) {
  .tablet-portrait\:p-0 {
    padding: 0px;
  }
}

How can we make it fall back to the viewport size?

vietduc — 2023-12-05 04:22:47 UTC

Something like this:

useContainerSizeStore().isContainerSmallerThanTabletPortrait

vietduc — 2023-12-05 04:23:23 UTC

We need a way to select only the elements that don't belong in any containers.

vietduc — 2023-12-28 06:21:20 UTC

^{New feature 🌟}

Onboarding panel

CSS container queries

vietduc — 2023-12-28 06:27:17 UTC

Allow styling elements based on the size of their parent container, rather than the viewport.

Demo

vietduc — 2023-12-28 06:27:42 UTC

https://css-container-queries-demo.duckwho.codes/surface-container-queries/

Breakpoints in JavaScript

vietduc — 2023-12-28 06:28:51 UTC

vietduc — 2023-12-28 06:30:51 UTC

window_size store

Declare an element as a container

vietduc — 2023-12-28 06:35:21 UTC

@container/surface-container

.\@container\/surface-container {
  container-type: inline-size;
  container-name: surface-container;
}

vietduc — 2023-12-28 06:42:32 UTC

Use surface_container_size store instead of window_size store

Content picker is used on both Surface and Dashboard

vietduc — 2023-12-28 06:43:57 UTC

@tablet-portrait/surface-container:p-2

doesn't work on Dashboard

❌ Solution 1

vietduc — 2023-12-28 06:45:14 UTC

Not flexible enough. It's a good practice to target a named container.
We can't keep duplicating the class for every container that the component can be used in.

Disclaimer

vietduc — 2023-12-29 02:51:27 UTC

This talk is solely based on the patterns we use in our web app.

Device sizes and breakpoints

vietduc — 2023-12-29 02:58:01 UTC

https://whimsical.com/device-sizes-and-breakpoints-AE8Cze2sDvD2eE56Q7eUo3

Using container queries

vietduc — 2023-12-29 03:09:17 UTC

@tablet-landscape/surface-container:h-8

@container surface-container (min-width: 1024px) {
  .\@tablet-landscape\/surface-container\:h-8 {
    height: 2rem;
  }
}

🤔 Solution 1

vietduc — 2023-12-29 03:27:43 UTC

Make an element on dashboard a container
Update TW classes to be less specific: @tablet-portrait:h-2
Or, duplicate the class: @tablet-portrait/surface-container:h-2 @tablet-portrait/dashboard-container:h-2

🤔 Solution 2

vietduc — 2024-01-03 05:29:49 UTC

Use container queries and media queries on the same element

@tablet-portrait/surface-container:h-2 tablet-portrait:h-2

❌ Solution 2

vietduc — 2024-01-03 05:32:17 UTC

Won't work because container queries don't take precedence over media queries.

How about JavaScript breakpoints?

vietduc — 2024-01-03 11:08:36 UTC

Currently, this is what we do:

isUsedOnSurface ?
  isContainerSmallerThanTabletPortrait :
  isSmallerThanTabletPortrait

If you're working on Surface…

vietduc — 2024-01-03 12:16:14 UTC

Use container queries!

vietduc — 2024-01-03 12:18:27 UTC

Exceptions are:

Slideshow
PDF export page

If you're working on Dashboard…

vietduc — 2024-01-03 12:20:19 UTC

Just something to keep in mind for now.

If you're writing an Orizuru component…

vietduc — 2024-01-03 12:21:07 UTC

Don't use media/container queries. Use size presets.

Recording

tonkatsu — 2024-01-05 03:14:10 UTC