Re: [csswg-drafts] [selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries (#6247)

Would this pseudo-class counterpart to the `@media` at-rule work directly on selectors or only inside `:is()` and `:not()`? I'd guess both, but I only see examples within other pseudo-class rules on this thread.

Assuming this applies to all applicable at-rules, this might also solve the issue/proposal I opened today in #10356.

This way, `@starting-style` rules can be applied inline with other selector-based rules to avoid redundancy. One of the spec's authors, @dbaron, also spoke into the discussion and voiced a similar sentiment.
> I agree that we ended up with a solution that requires a bunch of repetition that I'm not happy about.

Having a way to use these at-rules inline as pseudos would be amazing.

I initially preferred the syntax proposed by @jakearchibald (above) and by @jothsa in #8840, but that would also impose some limitations. In the case of `@starting-style`, this would still not allow the at-rule to mix with selector logic in the ways necessary to remove redundancy.

However, with a pseudo-class rule counterpart available, much of the redundancy in this example:
```css
dialog {
  transform: translateY(-50%);
  &, &::backdrop {
    transition: all 0.25s ease-out allow-discrete;
    opacity: 0;
  }
  &[open] {
    transform: translateY(0);
    &, &::backdrop {
      opacity: 1;
    }
  }
  @starting-style {
    &[open] {
      transform: translateY(-50%);
      &, &::backdrop {
        opacity: 0;
      }
    }
  }
}
```

…can be consolidated, leaving us with this:
```css
dialog {
  &, &[open]:starting-style {
    transform: translateY(-50%);
    &, &::backdrop {
      transition: all 0.25s ease-out allow-discrete;
      opacity: 0;
    }
  }
  &[open] {
    transform: translateY(0);
    &, &::backdrop {
      opacity: 1;
    }
  }
}
```

I think @jonathantneal's suggestion of introducing a `:when` pseudo for this could also work well, as long as `starting-style` would be valid within `@when()` rules `:when()` wouldn't pose a significant risk of confusion (between `:where()` and `:when()`).

If we did want a way to match the query syntax exactly, we could consider `:matches(@media(…))`, but I think that might be a step backward with the more flexible `@when` on the horizon.

---

It might help to organize a comprehensive list of all at-rules that could benefit from a pseudo-class counterpart like this.
* `@when`
* `@media`
* `@supports`
* `@starting-style`
* any others?

Or should we introduce only one new pseudo-class, `:when()` which can be used to test for any of these and others?

-- 
GitHub Notification of comment by brandonmcconnell
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6247#issuecomment-2121238979 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 20 May 2024 21:26:53 UTC