Day 80: container style queries

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Container style queries allow querying the computed values of a query container.

No browser supports it yet, but we should be able to do something like this:

.card {
  aspect-ratio: 1 / 1;
}

.card--wide {
  aspect-ratio: 16 / 9
}

@container style(aspect-ratio: 16 / 9) {
  img {
    object-fit: cover;
  }
}

We can check whether a container has a specific property and value assigned and apply additional styles based on this condition. Chrome support container style queries behind a flag, but only with custom properties, not ordinary properties.

Here’s an example based on a component I've built a while ago where this can be useful. We have a card component that can be used in different ways. It can contain just text, text and an image, text and a video, and also text with a background color. Most background colors in our design system work well with black as the text color, but there’s one exception.

:root {
  --nebelgrau: #d6d1ca;
  --flieder: #aaaafa;
  --abendstimmung: #49274b;
}

.card {
  --bg: var(--nebelgrau);
  background-color: var(--bg);
}

<div class="card">
  <h2>Chapter 1</h2>
</div>

<div class="card" style="--bg: var(--flieder)">
  <h2>Chapter 2</h2>
</div>

<div class="card" style="--bg: var(--abendstimmung)">
  <h2>Chapter 3</h2>
</div>

Chapter 1

Chapter 2

Chapter 3

I could assign a class to this specific card variation and just change the text color. That’s actually what we’re doing at the moment, but with style queries I can create a general rule that changes the text color whenever the container has a specific background color.

@container style(--bg: var(--abendstimmung)) {
  * {
    color: #fff;
  }
}

Note: The color is probably still black for you, but it's white in supported browsers (Only Chrome behind a flag at the moment.)

Chapter 2

My blog doesn't support comments yet, but you can reply via blog@matuzo.at.

This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović

Print Share Comment Cite Upload Translate Updates

APA

Manuel Matuzović | Sciencx (2023-01-13T00:00:00+00:00) Day 80: container style queries. Retrieved from https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/

MLA

" » Day 80: container style queries." Manuel Matuzović | Sciencx - Friday January 13, 2023, https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/

HARVARD

Manuel Matuzović | Sciencx Friday January 13, 2023 » Day 80: container style queries., viewed ,<https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/>

VANCOUVER

Manuel Matuzović | Sciencx - » Day 80: container style queries. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/

CHICAGO

" » Day 80: container style queries." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/

IEEE

" » Day 80: container style queries." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/. [Accessed: ]

rf:citation

» Day 80: container style queries | Manuel Matuzović | Sciencx | https://www.scien.cx/2023/01/13/day-80-container-style-queries-2/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Chapter 1

Chapter 2

Chapter 3

Chapter 2

Related Posts