Re: [csswg-drafts] [css-conditional-5][css-nesting-1] Feature detection for nesting (#8399)

I highly doubt authors will use something like

```css
@supports selector(& .foo) {
  .wrapper {
    color: magenta;
    & .foo { color: cyan; }
  }
}
@supports not selector(& .foo) {
  .wrapper { color: magenta; } 
  .wrapper .foo { color: cyan }
}
```

They will just use the good ol

```css
.wrapper { color: magenta; } 
.wrapper .foo { color: cyan }
```

The only reasonable fallback strategy seems using JS to read the raw contents of the `<style>`, parse it manually, and if there are nested rules, desugar them. But detecting support for nesting in JS is already possible:

```js
function supportsCSSNesting() {
  try {
    document.querySelector("&");
    return true;
  } catch (e) {
    return false;
  }
}
```

Support for nesting other rules like media queries is also posssible:

```js
var style = document.createElement("style");
style.textContent = ".foo { @media (width >= 500px) { } }";
document.head.append(style);
var {sheet} = style;
style.remove();
return sheet.cssRules[0]?.cssRules?.length === 1;
```

We may want to add nicer ways, but I don't think it's a must.

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


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

Received on Saturday, 4 February 2023 22:54:56 UTC