Future CSS: State Container Queries

Wait, what? Sure, you heard that proper. The Chromium crew is experimenting with a brand new kind of question, which is named State Question. Final 12 months, dimension container queries acquired supported in all main browsers. They allow us to question a container based mostly on its width.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    show: flex;
    align-items: heart;
  }
}

Including on that, we now have Fashion queries, which allow us to question a container and verify if a CSS variable persists.

.special-wrapper {
  --theme: darkish;
  container-name: stats;
}

@container stats fashion(--theme: darkish) {
  .stat {
    
  }
}

That is nonetheless in Chrome Canary just for now.

Again to state queries. Whereas watching Una’s speak on CSS Day I noticed one thing that acquired me excited to verify what that is all about.

In my 2023 CSS wishlist, one of many issues was getting a technique to verify if a component is caught, that means that place: sticky is lively. I acquired a lot pleasure once I knew that the Chrome crew is experimenting with it!

Sneaking over the Chromium bug, it really works like this:

• Outline the container kind as sticky
• Use the state question
• Examine if caught: route is lively

Meaning, when the header is sticky, we have to replace the padding. Or perhaps cover or present one thing. It’s as much as you!

Let’s discover the way it works.

State queries examples

Caught state question

A use case for the caught state is when we’ve a header that may change its design based mostly on whether or not it’s caught or not. By caught, I imply that the place: sticky took motion.

Contemplate the next instance:

When the header is sticky, I wish to simplify its design. The reason being that it’s not all the time a superb follow to maintain parts taking an element from the display real-estate.

I used to detect that with Javascript, however now we’d get that in CSS quickly.

.web page {
  container-name: sticky-header;
  container-type: sticky;
}

.site-header {
  place: sticky;
  prime: 0;
}

@container state(caught: prime) {
  .site-header__bottom {
    show: none;
  }

  .site-header__actions {
    show: none;
  }
}

I really feel that the present syntax will change, as I’m undecided about utilizing sticky for container-type and caught for the question.

Wrap state question

State queries aren’t solely about sticky positioning. Earlier this 12 months, I revealed a weblog put up asking Do we’d like CSS flex-wrap detection?

Contemplate the next determine:

Now we have a web site header that’s constructed with flexbox. When the gadgets wrap, I wish to cover the navigation and change it with a toggle menu button.

.site-header {
  container-type: wrap;
  container-name: header;
  show: flex;
  flex-wrap: wrap;
  align-items: heart;
}

@container header state(wrap: true) {
  .site-header__nav {
    show: none;
  }

  .nav-toggle {
    show: block;
  }
}

Having the ability to detect when a flex container is wrapped can be very useful. Word: that is nonetheless an thought and hasn’t been applied in any browser but.

Empty state

At the moment, we are able to use the :empty pseudo-class to verify if a component is empty.

.figcaption:empty {
  show: none;
}

That works effective, but when there’s a house character inside the <figcaption> ingredient, it is going to fail. Can we do higher with state queries?

Contemplate the next HTML. Discover that I deliberately added an empty house.

<part class="part"></part>

I don’t understand how precisely this could work since we are able to’t apply CSS to the container itself, however here’s a pseudo code.

part {
  container-type: empty;
}

@container state(empty: true) {
  show: none;
}

Empty right here means when the container doesn’t have any baby parts.

Detecting the doc route

I’m undecided if this may be thought of a state, however loads of occasions I have to know if the container route is ltr or rtl. For instance, I’d wish to flip an icon.

With a state question for the doc route, this may assist loads.

html[dir="rtl"] .button-icon {
  rework: scaleX(-1);
}


@container state(dir: rtl) {
  .button-icon {
    rework: scaleX(-1);
  }
}

That’s it for this fast put up. What do you suppose? Do you’ve any concepts on different state queries? I might love to listen to from you on Twitter @shadeed9.

Thanks for studying.