Re: [csswg-drafts] [css-nesting] How to resolve nested CSS with pseudo elements in the parent (#7433)

TL;DR;

`@supports selector(:is(::before)) and selector(& p)` is a valid way to check for support in the future if this remains true :

> But the restrictions should exist in both places or neither.

----------

I was looking at this from a feature detection perspective and I think a couple of things intersect here.

- `:is()` is not forgiving in `@supports` which was a recent change I think
- you can not test for a structure in `@supports` (e.g. `@supports selector(::before { & {} })`)


Chrome 106:
- `@supports selector(:is(::before))` : `true`
- `@supports selector(& p)` : `false`
- `@supports selector(:is(::before)) and selector(& p)` : `false`

Chrome 109:
- `@supports selector(:is(::before))` : `false`
- `@supports selector(& p)` : `true`
- `@supports selector(:is(::before)) and selector(& p)` : `false`

```html
<!DOCTYPE html>
<html lang="en">
<head>
 <title>Document</title>
 <style>
  html {
   & p {
    color: green;
   }
  }

  @supports selector(& p) {
   p {
    /* Version 109.0.5372.0 (Official Build) canary (arm64) */
    /* Experimental platform features on */
    text-decoration: underline solid green;
   }
  }

  @supports selector(:is(::before)) {
   p {
    /* Version 106.0.5249.119 (Official Build) (arm64) */
    text-decoration: underline wavy red;
   }
  }

  @supports selector(:is(::before)) and selector(& p) {
   p {
    text-decoration: underline dotted purple;
   }
  }
 </style>
</head>
<body>
 <p>Hello!</p>
</body>
</html>
```

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


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

Received on Friday, 21 October 2022 08:57:36 UTC