I love the little typographic thing where if you’re reading a block of text that is in italics, that when an italic word is needed within that, it is unitalicized (like that).

I’ve seen that expressed in CSS like:

em em {
  font-style: normal;
}

That’s probably smart to have, but not all italics are necessarily within an <em> tag. You could want all your blockquotes italicized, for example, and the above selector won’t help with that. That’s one of the reasons I think Style Queries are cool.

Well… I guess possible future Style Queries, anyway. I’m imagining this working:

blockquote {
  font-style: italic;
}

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

To be clear: that doesn’t work. You can’t just write a style() query for any style. But perhaps you can see how that would be useful if you could. There is no specific selector for the @container, it’s just “selecting” any element that has that italics, then if an em is using inside, it unitalicizes.

The reason that doesn’t work is that Style Queries only deal with Custom Properties right now. So if we did all our font-style-ing with a Custom Property, it could be done:

blockquote {
  --fontStyle: italic;
  &, em {
    font-style: var(--fontStyle);
  }
}

@container style(--fontStyle: italic) {
  em {
    --fontStyle: normal;
  }
}

Meh — that’s too fiddly for me. Not that I don’t find Style Queries useful at all, I do. I particularly like how setting one Custom Property means you can set a whole slew of other CSS with one change, like a “mixin”. Although “real” mixins would surely be even better.

These kind of Style Queries, which have cross-browser support (except Firefox), can be used to create an “alternating” style effect, which is the same sort of thing I’ve been going on about with the italics. If the parent is one way, do the other, on down the chain.

That’s an image from Roman Komarov’s Alternating Style Queries making the point. It works like this:

.el {
  background: var(--bg);
  --bg: var(--PINK);

  @container style(--bg: var(--PINK)) {
    --bg: var(--THEME_BG);
  }
}

Which says: the background is pink. Unless… you’re in a container where the background is already pink, then the background is a different color. Just that alone creates the alternating nesting effect, which is pretty cool! Roman goes on to show it doesn’t just have to be two that alternate, it can be as complex as you need it, along with a more practical example where it allows nested lists to change their ::marker in an alternating fashion, which I could imagine actually using.