Re: [csswg-drafts] [css-conditional-5][css-nesting-1] Allow browsers with Nesting support to suppress stylesheet imports (#9082)

@bramus 
> ```css
> @import "nested-and-small.css" supports(<method-to-detect-nesting>) skip-next;
> @import "not-nested-and-large.css";
> ```

Tokens that change how subsequent tokens behave are not generally seen favorably in this group.

> ```css
> @config {
>   legacy: 'not-nested-and-large.css';
> }
> 
> @import "nested-and-small.css" supports(<method-to-detect-nesting>);
> @import "not-nested-and-large.css";
> ```
> 
> Or if one wants to add conditions (which would replicate a lot of `@import`)
> 
> ```css
> @config {
>   import-ignore: 'not-nested-and-large.css' not supports(<method-to-detect-nesting>);
> }
> ```

Annotating the import somewhere else seems like the kind of indirection that could easily cause hard to debug problems.

----

While this brainstorming is very creative, it’s also introducing warts to the language that are not necessary: we already *have* a mechanism to conditionally `@import` stylesheets if something is or isn't supported, UAs just need to actually implement it 😄 

Until then, JS works fine for this kind of fallback and requires very little code. 

There are many strategies for this:

Loaded nested CSS without JS (the top-level rules would still render even in older browsers), then add the non nested one conditionally via JS — this may be a good strategy once nesting has > 85% market share (note that [we're already at 72%](https://caniuse.com/css-nesting)): 

```js
if (!CSS.supports("<method-to-detect-nesting>") {
 document.head.insertAdjacentHTML("beforeend", '<link blocking=render href="non-nested-and-large.css" rel="stylesheet">');
}
```

or inserting the right URL via JS to begin with. Or even — gasp — `document.write()`, to prevent FOUC in UAs that don't support `blocking=render`.
Yes, none of them is ideal, but this is a temporary situation until browsers implement `supports()` on `@import` rules.

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


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

Received on Tuesday, 25 July 2023 11:31:35 UTC