[selectors-4] Add a :media pseudo-class, to match the set of elements matching the media pseudo-classes

[tabatkins]

Based on previous resolutions, @hober added several new media pseudo-classes in #6219, to complement our existing :playing and :paused.

While reviewing, tho, I realized this introduces a new problem. :playing and :paused are mutually exclusive and exhaustive - if an element is capable of matching them, it always matches exactly one of them. So if you want to capture all media elements that aren't playing, you can just write :paused, and vice versa.

However, several of the new pseudo-classes don't have this property. For example, there's no easy way to select all the media elements that aren't muted - :not(:muted) also selects all the non-media elements on the page.

I suggest we add a :media pseudo-class that simply matches media elements, defined as elements capable of matching any of the media pseudo-classes. This way you can match unmuted media elements with :media:not(:muted), which is nice and straightforward.

---

A possible alternative is to replace the just-merged new pseudo-classes with a catch-all :media() pseudo-class, that takes keywords to represent the various states. (And, if necessary, leave :playing and :paused in as pseudonyms for :media(playing) and :media(paused).) I don't think this is a great idea, tho - we'd have to add negated variants of each state, or some negation syntax, and for the simple cases of just wanting to match all elements with a single state, this a decent bit more typing.

[LeaVerou]

No opinion on the feature itself, but not sure about the name. As an author, if I saw :media() I'd think it relates to media queries. In fact, such a pseudo-class would be quite useful, to avoid duplication when authors want to apply a given styling both on a selector, and on a media query. I guess I should open an issue about that (edit: done #6247).

Also, if we're adding pseudo-classes to save authors from having to type commonly needed lists of type selectors, can we please add :heading and :form-control which are far more frequently needed?

[tabatkins]

I agree with your suggestions for extra grouping pseudos, but those should be raised as a separate issue. ^_^

Fair point on the naming - any suggestions for something else?

[emilio]

Hah, I was going to mention :heading when I first read it then forgot. Is typing :is(video, audio) such a big deal?

[css-meeting-bot]

The CSS Working Group just discussed [selectors-4] Add a :media pseudo-class, to match the set of elements matching the media pseudo-classes, and agreed to the following:

• RESOLVED: Close no change

The full IRC log of that discussion

<dael> Topic: [selectors-4] Add a :media pseudo-class, to match the set of elements matching the media pseudo-classes
<dael> github: https://github.com//issues/6237
<dael> TabAtkins: As of a week or two ago had 2 pseudo classes that applied ot media. playing and paused. mutually exclusive. All elements not playing are pause.
<dael> TabAtkins: We agreed on edits from hober adding additional media pseudoclasses to match additional states. I realized this property that you could always select on one pseudoclass no longer applied. Example: muted. Select all not muted you can't use Not muted b/c selects everything on page
<dael> TabAtkins: Suggestion to help authors with this which is pseudoclass to just select media elements
<dael> TabAtkins: A few obj in issue. leaverou_ pointed out requests in the past to select MQ as selector so it mixes into selectors and name for that would be media
<dael> TabAtkins: emilio pointed out we have audio and video and now that we have :is it's not hard to get the same effect as you had before is pseudoclass
<Rossen_> q?
<dael> TabAtkins: Both are reasonable. Don't know if enough to sink it. I still think might be valuable to do something in this relm. What do others think? Not sure which way to go
<hober> q+
<dael> florian: Question. When you use pause it only gives you paused media elements?
<dael> TabAtkins: Yeah. Every single media elements is either playing or paused. But b/c no non-muted psuedo class we no longer have that property
<dael> florian: And can't solve by adding opossite of those introduced
<dael> TabAtkins: Could. Feels weird to add explicitly negated version when we have pseudo class negation
<dael> florian: But not same meaning
<leaverou_> q+
<dael> TabAtkins: Yeah.
<emilio> q+
<Rossen_> ack hober
<dael> hober: I think TabAtkins is right it's a real problem. Sympathetic to emilio point that :is audio|video is enough. Worry it's not fufutre proof. If we add another media feature sites will not match the new ones
<dael> hober: Slightly prefer adding a new pseudoclass but could live with leaving it to :is
<dael> hober: Don't care for adding negated pseudoclasses for all the new ones. Explosed number in a way that feels distasteful, but it's an aesthetic preference
<dael> TabAtkins: I think at this point I'm okay going with emilio and if we introduce more media elements we can revisit this so we don't have to negotiate futureproofing with media pseudoclass
<dael> leaverou_: I wanted to ask if we have sufficient evidence that authors want to target all media elements in a way. Stylesheets trying to target non-muted media elements? Feel it would be all video or audio
<fantasai> +1 leaverou_
<dael> hober: One use case is in user stylesheet. Looking at a website, something obnoxious happening and I can't find it to make it stop
<bkardell_> exxtension too
<dael> Rossen_: Good use case.
<bkardell_> s/extension/it would be useful in extensions
<Rossen_> ack leaverou_
<Rossen_> ack emilio
<dael> emilio: Wanted to mention there is precident for explicit negation with readwrite and readonly. You could argue that for website authors having media pseudoclass...argument hober made makes sense but can flip. New media elements would have selectors that didn't match start matching. Can go both ways.
<dael> emilio: I don't care either way, but there is precedent for negation
<dael> TabAtkins: That precedent exists in same way as playing and paused. Explicit differnet states. If name is not-x is what feels weird
<dael> TabAtkins: Think we're reasonably agreeing to close no change and rely on :is
<fantasai> +1 to close no change for now
<dael> emilio: Sounds good
<leaverou_> +1 to close
<dael> Rossen_: When seeking will one apply? both? none?
<dael> TabAtkins: I think playing
<dael> hober: Buffering and stalled playing still matches. I don't remember if new spec text says for seeking. Might be good followup
<Rossen_> q?
<dael> TabAtkins: Yeah, could use clarification
<tantek> possibly related: we have pseudo-classes for partially loaded images right? (that are still loading)
<TabAtkins> OH wait lol, we just have a :seeking pseudoclass now
<dael> fantasai: On queue to agree with leaverou_ and emilio. Close no change. If we need clarification add resolution
<TabAtkins> So, uh, obviously that's the one that matches when you're seeking
<dael> hober: Clarification shouldn't be always one or the other for seeking. Can used seeker to search playing or paused. Need to say unlike buffering or stalled you might be playing or paused when seeking
<dael> Rossen_: Seek has no change to the last known state of playing or paused. Fair?
<dael> hober: I think so
<dael> Rossen_: Prop: Close no change
<dael> hober: Can we also add action to write clarification?
<dael> action hober add text for Seek has no change to the last known state of playing or paused
<dael> RESOLVED: Close no change