[selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries

[LeaVerou]

Authors often need to duplicate rules across media queries and selectors. For example, this kind of thing is common:

@media (prefers-color-scheme: dark) {
	:root {
		/* dark mode rules */
	}
}

:root.dark {
	/* duplicated dark mode rules */
}

To my knowledge, there is no way to reduce this duplication with CSS, even if we take CSS nesting into account. Authors either write flimsy JS to toggle the class per the media query, use preprocessor mixins, or just live with the duplication.

Also, often media queries only contain a single rule, and could benefit from a more concise syntax.

With this proposal, the code above would be written as:

:root:is(.dark, :media(prefers-color-scheme: dark)) {
	/* dark mode rules */
}

Any :media() pseudos within a selector would desugar as media queries, joined with and and prepended with not accordingly (e.g. :media(foo):not(:media(bar)) should desugar to @media (foo) not (bar) {...}).

[tabatkins]

I definitely agree with this functionality. Having some tests appear in an MQ vs others appearing in a selector means we have to do some awkward nesting and reduplication. This is also the motivation behind a generic conditional rule that combines @media and @supports (the @when proposal that I need to revive).

With that background, perhaps we should make the pseudo-class name more generic, so that it can handle support queries as well?

[LeaVerou]

With that background, perhaps we should make the pseudo-class name more generic, so that it can handle support queries as well?

Agreed, I was wondering about it when I opened the issue, but decided against it as I thought it would complicate the syntax too much. But if you also think so, let's do that.

[argyleink]

I ran into this last week and after asking Tab about it, have found myself here!

Here's a reduced case https://codepen.io/argyleink/pen/OJpmEWE where I would hope to eliminate the duplication between light and dark

[bkimmel]

I love this idea. I kinda wish media queries just worked this way in the first place.

[mirisuzanne]

We discussed this as an approach to container queries, and it's probably good to consider them as part of this conversation. If the only syntax is selector-based, it makes larger changes (impacting multiple selectors) more repetitive – though nesting could help that problem:

.card:container(width > 30em) {
  & .card-image { … }
  & .card-content { … }
  & .card-footer { … }
}

With container queries specifically, this also introduces a different way to solve the "named container" problem – but it can be kinda confusing as well. Right now we always have the selector-target query its nearest container:

/* body and card are both containers */
body, .card { contain: inline-size style layout; }

@container (width > 30em) {
  .card { /* card queries the size of body */ }
  .card .content { /* content queries the size of card */ }
}

.card:container(width > 30em) .content {
  /* card queries the size of body, in order to update content */
}

I don't see it as a universally better solution than the at-rule syntax, but I do think it can provide some interesting trade-offs. Interested to see where this conversation goes.

[andruud]

Adding :container probably exceeds acceptable complexity limits. It makes invalidation much more annoying, since we would need to figure out if a given selector would have matched without :container pseudos, and in order do that correctly we would probably need to evaluate any non-matching selector with :container twice, which I'd rather not do.

Also, you know Emilio won't accept that it makes Element.matches depend on layout.

Also also, it's not compatible with other CSS things, e.g.:

body {
  width: 40em;
  contain: inline-size style layout;
}

body:has(.card:container(width > 30em)) {
  width: 20em;
}

[daKmoR]

My use case is "to provide the user a way to override the system setting for light/dark mode".
e.g. as a user, I want to set a dark/light mode on a per-website basis and not change my system settings.

typically that is nowadays implemented in a way that sets an attribute on the body like <body theme="dark"> or <body theme="light">.

However, that means that in this case media queries like @media (prefers-color-scheme: dark) { do become "hostile" because as soon as they are used somewhere I will be forced to "override" it back.

So not only do I need to duplicate the dark mode styles but also the light mode styles 😭

It will look something like this
Codepen: https://codepen.io/daKmoR/pen/WNMZpMm

/* light mode is default */
:root {
  --p-color: black;
  --p-background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode rules */
    --p-color: white;
    --p-background: black;
  }
}

:root[theme=light] {
  /* override back to light mode - duplicating  */
  --p-color: black;
  --p-background: white;
}

:root[theme=dark] {
  /* duplicated dark mode rules */
  --p-color: white;
  --p-background: black;
}

p {
  color: var(--p-color);
  background: var(--p-background);
}

shadow root

In the above example, if someone uses a media query in a CSS file you can at least "solve" it by adding more duplicate CSS.

However, once you have a shadow root it means you can no longer solve it on CSS level 😭

Consider this code in a shadow root
Codepen: https://codepen.io/daKmoR/pen/jOZGBgO

  <style>
    :host {
      --p-color: black;
      --p-background: white;
    }
    @media (prefers-color-scheme: dark) {
	    :host {
		    /* dark mode rules */
        --p-color: white;
        --p-background: black;
      }
    }
    p {
      color: var(--p-color);
      background: var(--p-background);
    }
    /* no way to override it based on the fakeroot theme */
    /* selectors like body[theme=light]" will not select anything */   
  </style>  
  <p>text in shadow root</p>

within the shadow root there is no way to adjust the color based on a bodys attribute as far as I know.
outside of the shadow root you can not influence the css of the inside...

also imagine that this component with the shadow root is potentially an external dependency either from open source or from a different team/department.

Workaround

The only why I can think 😅

1. Duplicate the theme attribute to EVERY component

<body theme="dark">
  <my-el theme="dark"></my-el>
  <other-el theme="dark"></other-el>
</body>

2. Enfore a company wide "ban" on using @media (prefers-color-scheme: dark) and on any external dependency using it

With that you can then ALWAYS force using the theme attribute

:host([theme=dark]) {
  /* dark theme styles */
}

Imho these are massive downsides and basically prevent usage of a core platform feature like media queries.

Suggestion

Provide a way to set a "user prefers color scheme". Something that can be set via js.

window.setMedia('prefers-color-scheme', 'dark');`

and then all media queries like @media (prefers-color-scheme: dark) { would be true.

That would mean you can use media queries in all cases and no duplication in any css would be needed.

A see that this is a completely different "solution"... is there already an issue for a solution in this direction or shall I open a new one?

[jakearchibald]

Rather than make media queries & container queries work in selectors, would it be better to make selectors work in @ rules when nested?

I haven't thought hard about the parsing here, but something like:

:root {
  @media (prefers-color-scheme: dark),
  &.dark {
    /* dark mode rules */
  }
}