# Day 80: container style queries

DevFeed: [Day 80: container style queries](<https://devfeed.tech/articles/day-80-container-style-queries-52276.md>)

Original publisher: [Read original article](<https://www.matuzo.at/blog/2023/100daysof-day80>)

Author: Manuel Matuzović

Published: 2023-01-13T00:00:00Z

Content type: tutorial

Language: en

Sources: [Manuel Matuzović - Blog](<https://devfeed.tech/sources/manuel-matuzovic-blog.md>)

Topics: [container](<https://devfeed.tech/topics/container.md>), [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Query (disambiguation)](<https://devfeed.tech/topics/query.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Edge](<https://devfeed.tech/topics/edge.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [color](<https://devfeed.tech/tags/color.md>), [component](<https://devfeed.tech/tags/component.md>), [container](<https://devfeed.tech/tags/container.md>), [css](<https://devfeed.tech/tags/css.md>), [custom-properties](<https://devfeed.tech/tags/custom-properties.md>), [design-system](<https://devfeed.tech/tags/design-system.md>), [edge](<https://devfeed.tech/tags/edge.md>)

## AI overview

This tutorial explains CSS container style queries, which conditionally apply styles based on computed values or custom properties in a query container. It demonstrates using them with a card component to change text color based on the card's background color, while noting current browser support limitations.

## Source excerpt

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/Edge 111+ and Opera 98 support container style queries 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 still black in unsupported browsers, but it's white in Chrome/Edge 111+ and Opera 98. Chapter 2 My blog doesn't support comments yet, but you can reply via blog@matuzo.at.